博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Node环境配置及Gulp工具
阅读量:6364 次
发布时间:2019-06-23

本文共 3885 字,大约阅读时间需要 12 分钟。

1.GitLab网上使用

  • 两种登录方式

    • 通过Http登录,需要用户名和密码

    • 通过SSH登录,不需要用户名和密码只需要RSA密钥就行,RSA通过在git bash中输入 ssh-keygen -t rsa生成,生成好的密钥通过生成的路径找到对应的id_rsa.pub文件,将其内容添加到gitlab中并保存ssh密钥,以后的push 或者pull操作都不会需要用户名和 密码。

  • 克隆仓库

    • git clone 你的地址(这里可以通过https地址或者通过SSH方式获取你的网上仓库)

  • 获取仓库内容

    • git pull 地址/origin master 可以通过https地址获取仓库数据,但是这样做太麻烦了,使用origin相当于替换了之前的地址用法都是一样的。

      • 其实这样使用包含了两个操作

      • git fetch origin (获取远端的分支)

      • git merge origin/master (合并远端分支)

  • 远端分支管理

    • 创建远端分支

      • 1.在本地创建好分支以后,本地 push 该分支即可

      • 2.在网页上创建分支好以后,通过git fetch获取该分支

    • 删除远端分支

    • git push origin --delete 需要删除的分支,那么其他人如果需要更新分支 需要 git fetch -p

  • git 补充知识

    • 保存当前的工作现场

      • 使用git stash保存当前的工作现场,那么就可以切换到其他分支进行工作,或者在当前分支上完成其他紧急的工作,比如修订一个bug测试提交。

        • 1 在通过git add 提交完代码到缓存区以后 输入git stash 保存现场,完成以后通过创建其他分支或者跳转其他分支解决对应的工作

        • 2 解决完对应的工作后跳转到之前的工作分支中在通过 git stash pop 还原现场

    • 查看隐藏分支 git branch -a

2.Node

  • 什么是Node

    • Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境

  • Node.js(难道是类似于jQuery的js文件)

  • chrome浏览器的JS引擎(V8引擎)

  • javascript组成

    • ECMAScript 基本语法

    • DOM

    • BOM

  • node 只解析ES,像aler()之类的就不能使用了

    • 加上谷歌V8对js的解析速度大大提高

    • 提供了一些系统级API,比如对文件的操作

    • 其实就是一个js运行环境

  • 安装Node

    • 不要安装在中文路径

    • nvm Node Version Manager(版本管理)

    • nrm Node Registry Manager(路径管理)

    • npm Node Package Manager (依赖包管理)www.npmjs.com npm下载地址

  • 常用nvm命令

    • nvm ls 查看node下载的版本

    • nvm install 4.6.0 下载名为4.6.0的版本

    • nvm use 4.6.0 切换4.6.0版本

  • 常用nrm 命令

    • nrm ls查看不同的下载源地址

    • nrm use cnpm 切换到cnpm下载源

  • 常用的npm命令

    • npm init 初始化一个 package.json 文件,如果加上-y就不需要在敲回车了

    • npm install -g bower 全局安装bower

    • npm install jquery --save-dev 本地安装jquery并记录到package.json中

    • npm uninstall 包名 删除包 如果是全局安装就加上-g

3.Bower

  • 什么是bower

    • bower是一个前端的管理工具,主要用来管理前端的包例如:Jquery、BootStrap、Angular等。

    • 有人会有疑问为什么npm也是管理工具我还要学习bower管理工具?

      • 原因很简单,因为就像有迅雷下载你为什么还要用QQ旋风、电驴、快车下载,其实原因都一样因为npm在某些时候不能满足用户需求那么市场上就会出现替代产品。

    • bower网站

    • 如何使用bower进行管理

      • 安装Bower:npm install -g bower

      • 创建包bower.json:bower init

      • 安装各种包文件:bower install < package>,如下载jquery: bower install jquery ,bower install jquery#1.8.0 选择下载1.8.0版本

      • 卸载包文件:bower uninstall < package>

      • 包搜索:bower search <package>

      • 包版本:bower info <package>

      • 修改Bower安装位置:在项目根目录下创建.bowerrc然后添加以下内容`{

        "directory": "vendor"//这里是指定包安装路径,加完以后记得删除这条注释

        }`

4.Gulp

  • 什么是gulp

    • 用自动化构建工具增强你的工作流程!

  • 什么又是自动化构建

    • 当一个项目足够大的时候,我们会采按功能划分给不同的人员开发,进一步各个功能又会划分成不同的模块进行开发,这就会造成一个完整的项目实际上是由许许多多多的“代码版段”组成的;我们开发中又会用到less、sass等一些预处理程序,需要将这些预处理程序进行解析;为了减少请求需要将css、javascript进行合并;为了加速请求需要对html、css、javascript、images进行压缩;这一系列的任务完全靠手功完成几乎是不可能的,需要借助构建工具才可以实现。所谓构建工具是指通过简单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。

  • 不同的构建工具

    • 常见的构建工具包括:Grunt、Gulp、F.I.S(百度出品)

  • gulp的优点

    • 易于使用通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。

    • 构建快速利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。

    • 插件高质Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

    • 易于学习通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。

  • 入门指南

      1. 全局安装 gulp:$ npm install --global gulp-cli

      1. 作为项目的开发依赖(devDependencies)安装:$ npm install --save-dev gulp

      1. 在项目根目录下创建一个名为 gulpfile.js 的文件: ` var gulp = require('gulp'); gulp.task('default', function() {

        // 将你的默认的任务代码放在这}); `

      1. 运行 gulp: $ gulp

  • gulp示例代码· gulp.task('image', function () {

    return gulp.src('./images/*', {base: './'})

    .pipe(imagemin()).pipe(gulp.dest('./dist'));

    }); ·

  • gulp插件库:

    [官网地址](http://gulpjs.com/plugins/)[npm也能找到gulp插件](https://www.npmjs.com/)
  • 常用插件gulp-autoprefixer(css加前缀)`//通过require引用gulpvar gulp = require('gulp');var autuprefixer=require('gulp-autoprefixer');//添加css前缀gulp.task('cssautuprefixer',function () {

    //通过src获取到需要的css文件 //*表示全部匹配 //pipe管道 起到一个承前启后的作用 //dest输出结果 gulp.src('./css/*.css')

    .pipe(autuprefixer())  .pipe(gulp.dest('./dist/css'));

    });`

gulp-uglify(最小化 js 文件) `//最小化jsgulp.task('uglify',function () {

gulp.src('./js/*.js', {base: './'})

.pipe(uglify())   .pipe(gulp.dest('./dist'))

});`gulp-htmlmin(压缩html文件)`//压缩html页面gulp.task('htmlmin',function () {

gulp.src('./*.html', {base: './'}).pipe(htmlmin({    collapseWhitespace: true,    removeComments:true,    minifyJS:true,})).pipe(gulp.dest('./dist'));

});`gulp-imagemin(最小化图像)`//压缩图片gulp.task('imagemin',function () {

gulp.src(['./images/*.jpg','./images/*.png'], {base: './'})    .pipe(imagemin())    .pipe(gulp.dest('./dist'))

});

转载于:https://www.cnblogs.com/bici/p/6050423.html

你可能感兴趣的文章
Groovy入门 | 基础语法
查看>>
oracle database 10.2.0.4 升级到 10.2.0.5
查看>>
11g RAC 更改归档模式 ,归档文件存放在ASM 磁盘组
查看>>
Zabbix安装部署
查看>>
我的友情链接
查看>>
C#获取当前系统信息的类
查看>>
ZooKeeper3.4.6学习笔记(二)简单介绍
查看>>
zabbix6
查看>>
品味、追求、卓越
查看>>
将excel的列索引转换为相应字母。
查看>>
CensOS 6.5 Bind域名解析服务基本配置介绍
查看>>
eclipse 使用tomcat插件及部署tomcat项目
查看>>
Ajax学习笔记-购物车
查看>>
JQuery学习笔记-JQuery的CSS DOM操作
查看>>
AngularJS 字符串-ng-bind
查看>>
关于质数的数学算法
查看>>
bootstrap-水平表单
查看>>
vsftpd详解及实例配置
查看>>
正式学习 React(三)番外篇 reactjs性能优化之shouldComponentUpdate
查看>>
openindiana通过源码安装软件方法
查看>>