前端构建工具——Gulp

Gulp

logo

前端构建工具
基于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: "

"
    }))
    .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的运行结果会输出。

gulp翻译

与Grunt比较

与Grunt对比

比Grunt配置少、速度快

Stream
Gulp基于node.js的Stream机制。每个插件不能单独使用，依靠组合发挥作用，就像一条流水线，上一道工序的产出交给下一道工序，效率高。
Grunt基于文件，很多操作都要需要生成一些中间文件，这些文件在任务完成后就没用了，需要删掉。文件操作时间消耗多，还有无用文件产生。
配置和运行在一起
变量的声明和使用挨在一起最方便。但是Gruntfile中，配置task和调用一般都离得很远，尤其是配置文件比较大的时候。
插件配置语法基本相同
Grunt的很多插件的配置规则有一定差别，有的看起来还有些怪异。Gulp插件配置规则基本都一样。（插件方法调用，第一个参数是文件，第二个是配置json。）
每个插件只专注于做一件事情
Gulp中每个插件单一职责，每个插件的配置就比较简单。
Grunt中每个插件要配置一坨。