学习东西的时候，注意这三点
what gulp
什么是gulp
是目前最流行的自动化工具，可以自动完成一系列重复的操作。
how gulp
gulp有什么用
gulp 可以快速的自动实现代码编译、优化、检查、合并、压缩，图片体积优化，文件和文件夹的操作等。gulp 提高了前端开发人员的工作效率。
why gulp
gulp和grunt
听说jQuery使用的是 grunt。grunt 的github星星比 glup的星星要少。
gulp 的实现方式比grunt 要好，更先进一些。
安装
需要先安装 node.js
node.js 对前端开发的作用真是很大，ＲＮ也和Node的基础有一定的关系。
安装 node.js 的过程中会自动安装 npm(node package manager)。
npm 是一个比较常用的安装各种开发包的工具。
node -v检查版本，自己以前已经安装过了。
npm -v检查版本，安装了node，npm 就自动安装了
npm install -g gulp-g 是 global 指的是全局作用域中安装。
gulp -v检查安装了成功没有，成功安装gulp会显示一个版本号。
使用
ＭａｃＯＳ系统上使用命令
`npm config set registry http://registry.npm.taobao.org/
设置为 淘宝源 镜像。
npm config ls 命令来查看有没有成功
registry = "https://registry.npm.taobao.org/" 显示这个就是成功了
开始使用
到一个自己的指定文件路径下使用命令：
npm init来新建npm的配置文件: package.json 文件。
npm install gulp --save将gulp包安装到当前文件夹下使用，--save会将gulp的版本写进package.json文件中，下次可以直接
npm install将所有的项目依赖的包全部下载。iOS开发中的cocoapod起到相同的作用。
现在多了node_modules的文件夹，安装的gulp就在这个文件夹下。
新建一个文件名为规定写死的文件gulpfile.js文件。
上代码
gulp API
task
在gulpfile.js文件中写代码。
const gulp = require('gulp');
node 引入包使用的代码是 require.
node ５以后的版本都支持 es6的写法了，可以直接使用 const 来定义常量。
const gulp = require('gulp');
gulp.task('hello', function () {
console.log('hello world');
})
webstorm中可以直接右击，执行任务
image.png
gulp hello在当前目录下使用这个命令也可以执行这个 任务。
文件拷贝
gulp.src('src/index.html')
.pipe(gulp.dest('dist/'));
});
src函数第一个参数，是根据gulpfile.js文件的路径为基准的。
上面这个代码的作用是定义一个名字为 dest的任务，作用是把，
gulpfile.js文件所在目录，'src'文件夹下的index.html文件拷贝到dist文件夹下，没有这个dist文件夹会自动生成。
gulp.src(globs[, options]) ,可以让指定使用gulp 来操作那个文件
globs是一个类似正则的匹配方式。
globs的语法介绍。
基本语法
| 匹配符 | 说明 |
|---|---|
| * | 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾 |
| ** | 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。 |
| ? | 匹配文件路径中的一个字符(不会匹配路径分隔符) |
| [...] | 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法 |
| ?(pattern|pattern|pattern) | 匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)? |
| !(pattern|pattern|pattern) | 匹配任何与括号中给定的任一模式都不匹配 |
| +(pattern|pattern|pattern) | 匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+ |
| *(pattern|pattern|pattern) | 匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)* |
| @(pattern|pattern|pattern) | 匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern) |
https://github.com/isaacs/node-glob 官方匹配语法。
src的第一个参数可以是单个globs，也可以是以globs为单项的数组
文件路径匹配示例
client/
a.js
bob.js
bad.js
The following expression matches a.js and bad.js:
gulp.src(['client/.js', '!client/b.js', 'client/bad.js'])
gulp 插件
gulp 现在有四个ａｐｉ，一些功能需要插件来帮助完成。
我们有一些需求，可以使用搜索引擎来收缩gulp 插件，查看插件的
github,写一个基本demo来上手。
常用插件：
gulp-less
gulp-jade
gulp-concat
gulp-uglify
这个网页上有常用插件的基本介绍，很实用
https://zhuanlan.zhihu.com/p/25243171
热更新插件
gulp-connect 插件，可以实现启动本地目录在浏览器中查看效果，并且可以实现 热更新，这样编写代码的时候就可以实时查看自己的代码的编写的效果就可以大大的提高开发效率。
下面这个关于gulp-connect的文章很好，推荐
https://segmentfault.com/a/1190000005025517
gulp.task('connectDev', function () {
connect.server({
name: 'Dev App',
// root: ['common_html', 'doctor_html','patient_html',],
port: 8023,
livereload: true
});
});
livereload: true 参数加上，实现热更新， 还能设 root：文件夹， 也能设host, 想深入学习推荐去看官方资料。
使用gulp.watch 函数进行监听文件的改变事需要注意。
gulp.watch('./common_html/sass/**', ['sass']);
后面的这个 sass 任务函数的实现中
要加一个这个
.pipe(connect.reload());// 不加这个 可能就没有热更新了
另外你修改的文件的路径要注意看下，不要改错了。
一般情况下，出现问题就是代码有问题。
在确保代码没问题的情况下，要看下你当前修改的文件你可能修改的是发布文件夹下的，不是开发文件夹下的。
使用命令行来传递参数
可以做到 生产环境 和开发 环境 执行两中 操作，不用更改 gulpfile.js文件。 赞。
http://jarvys.github.io/2014/06/01/minimist-js/
https://www.jianshu.com/p/231b931ab389
https://www.gulpjs.com.cn/docs/recipes/pass-arguments-from-cli/
条件控制
https://www.npmjs.com/package/gulp-if
网友评论