gulp学习手记与总结理解

    在上一家公司时，项目构建使用了gulp，不过那个时候我还是一个菜鸟，都是构建好了给我直接写，那个时候去看了官方文档，大概知道了是干什么用的，但没有上过手，现在公司有我独立负责的项目，正好借此机会好好学一学gulp，但现在读官方文档还是觉得不太友好，查了一些资料，弄明白了，来写一写自己的理解：

一、理解

    gulp是一个自动化构建工具，在项目里可以用来自动执行任务，比如合并、压缩js、css。

gulp和grunt对比：gulp是基于nodejs的stream工作流来执行的，而grunt主要是以文件为媒介来运行它的工作流的，比如在grunt中执行完一项任务后，会把结果写入到一个临时文件中，然后可以在这个临时文件内容的基础上执行其它任务，执行完成后又把结果写入到临时文件中，然后又以这个为基础继续执行其它任务...就这样反复下去。

那么stream的好处是什么呢？

    举个例子，当我们需要请求一大段数据，服务器每收到一次请求，就会先把数据读入到内存中，然后再从内存取出返回给客户端，可能需要等待数据被完全读取完才能返回，这样耗费时间长，且放入内存数据过多内存也吃不消，而HTTP请求中的request对象和response对象都是流对象，就可以将数据一点一点读入内存，利用了HTTP 协议的 Transfer-Encoding: chunked 分段传输特性（Transfer-Encoding，是一个 HTTP 头部字段（响应头域），字面意思是「传输编码」。最新的 HTTP 规范里，只定义了一种编码传输：分块编码(chunked)。），读一点传一点，用户体验得到优化，同时不至于对内存造成太多压力。

二、安装gulp

1.安装nodejs

2.全局方式安装gulp

npm install -g gulp

在使用gulp的项目中安装gulp(把gulp写进项目package.json文件的依赖)

npm install --save-dev gulp

在全局安装gulp后，还需要在项目中本地安装一次是为了版本的灵活性

 三、使用gulp

新建gulpfile.js为gulp主文件，一般放在根目录下

在gulpfile.js中定义任务

 

var gulp = require('gulp');
gulp.task('default',function(){
    //默认任务
});
//default是默认任务，还可以写成其他任务名

工作流程：使用gulp.src()方法获取到我们想要处理的文件流（html、css、js和图片等等），通过管道（pipe）方法把流依次传递给各种插件（编译、合并、压缩、重命名等等）进行操作 把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，最后使用gulp.dest()方法把流中的内容写入到文件中。

四、运行gulp

切到存放gulpfail.js的目录，在命令行下运行gulp，只运行gulp默认运行的是默认任务，运行gulp task则表示运行任务名为task的任务。

五、一些简单API

gulp.src(globs[, options]):把文件取到流中，globs表示文件的匹配模式，可以是一种模式，也可以是多种模式。这里存在一个base属性，如果这个属性没有设置就默认为在路径中明确的那部分，比如：gulp.src('src/*.js')能匹配src/路径下的js文件.那么base就为src/

• * 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js
• *.* 能匹配 a.js,style.css,a.b,x.y
• */*/*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js
• ** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件
• **/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js
• a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z
• a/**b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录
• ?.js 能匹配 a.js,b.js,c.js
• a??  a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符
• [xyz].js 只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符
• [^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js

gulp.dest(path[,options]):path表示文件输出的路径，这里要注意的是只能写成路径，不能写成文件名。这里在用gulp.dest(path[,options])输出文件的时候，会用path参数指定的路径替换base,比如

gulp.src('src/*.js')
  .pipe(gulp.dest('dist'));

就会用dist/替换src/，假如匹配到的文件是src/a.js，文件输出后就是dist/a.js