前端构建工具——Gulp
Gulp
- 前端构建工具
- 基于node.js
- 流式
安装
全局安装：
npm install -g gulp
项目目录中安装：
nmp install --save-dev gulp
编辑package.json文件，
或者执行
npm init
生成package.json，然后执行
npm install
重要模块方法
gulp和插件安装完毕后，
在目录中创建配置文件gulpfile.js。
gulp.src()
指定数据源文件，产生数据流。参数是文件，可以是数组
gulp.src(["js/**/*.js",[!js/**/*.min.js]])
gulp.dest()
将管道的输出写入文件，同事将这些输出继续输出，因此可以多次调用dest方法，将输出写入多个目录。目录不存在则新建。
gulp.task()
用于任务定义。第一个参数是任务名称，第二个参数是任务函数，指定任务具体的操作。
task方法还可以指定按顺序运行的一组任务，例如：
gulp.task("build",["css","js","imgs"]);
上例中，定义一个任务build，执行三个子任务“css”、“js”、“imgs”。这些任务不是同时进行的，不能认为“js”任务结束时“css”任务已经结束。
如果需要确保一个任务在另一个任务结束后执行，可将函数和任务组合结合起来指定依赖关系。例如：
gulp.task("css",["greet"], function(){
//
});
上例中，定义“css”任务，执行前检查greet任务是否执行完毕，完毕在调用第三个参数定义的函数。
default tasks
执行gulp任务是在命令行中输入：
gulp + taskName
如果不加taskName，就会报“Task ‘default’ is not in your gulpfile”，找不着默认任务。最好在配置文件末，写上默认任务，执行起来比较方便。例如：
gulp.task("scripts",function(){
//...
});
...
gulp.task("default", ["scripts"]);
插件
| 常用操作 | 插件名称 |
|---|---|
| 文件合并 | concat |
| 文件拷贝 | copy |
| 文件替换 | replace |
| JS压缩 | uglify |
| 语法检查 | jshint |
| 图片压缩 | imagemin |
| CSS压缩 | cssmin |
压缩JS gulp-uglify
举个栗子：
var gulp = require("gulp"),
uglify = require("gulp-uglify");
gulp.task("uglify",function(){
gulp.src(["src/common/*.js"])
.pipe(uglify({
mangle: false
}))
.pipe(gulp.dest("min/common"))
});
上例中，将src/common/目录下的js进行压缩，压缩文件放到min/common/目录中，参数“mangle:false”的作用是压缩过程跳过函数名使其不被压缩。
合并 gulp-concat
例子：
var gulp = require("gulp"),
concat = require("gulp-concat"),
uglify = require("gulp-uglify");
gulp.task("scripts",function(){
gulp.src(["src/common/reqData.js","src/common/util.js"])
.pipe(uglify())
.pipe(concat("base.min.js",{
newLine: "\r\n\r\n"
}))
.pipe(gulp.dest("min/common"))
});
上例中，将src/common/目录下reqData.js和util.js压缩后合并成一个文件base.min.js，参数的作用是在两个文件之间添加两个换行。
Stream
类似于*nix将几乎所有的设备抽象为文件一样，Node将文件访问、输入输出、http连接等几乎所有I/O都抽象成了Stream。
Linux中管道的概念
通过管道将stdout导入到stdin。command1的正确输出（stand output）作为command2的输入，然后command2的输出作为command3的输入，command1、2的输出不会显示，command3的运行结果会输出。
与Grunt比较
比Grunt配置少、速度快
-
Stream
Gulp基于node.js的Stream机制。每个插件不能单独使用，依靠组合发挥作用，就像一条流水线，上一道工序的产出交给下一道工序，效率高。
Grunt基于文件，很多操作都要需要生成一些中间文件，这些文件在任务完成后就没用了，需要删掉。文件操作时间消耗多，还有无用文件产生。 -
配置和运行在一起
变量的声明和使用挨在一起最方便。但是Gruntfile中，配置task和调用一般都离得很远，尤其是配置文件比较大的时候。 -
插件配置语法基本相同
Grunt的很多插件的配置规则有一定差别，有的看起来还有些怪异。Gulp插件配置规则基本都一样。（插件方法调用，第一个参数是文件，第二个是配置json。） -
每个插件只专注于做一件事情
Gulp中每个插件单一职责，每个插件的配置就比较简单。
Grunt中每个插件要配置一坨。
