gulp基础教程ReeoosBlog

gulp基础教程ReeoosBlog
在发现这个东西之前，前端构建我一直在用grunt，有一天同学给我说用gulp吧，比grunt更好用，于是乎我决定研究一番，看看这货到底是个什么好东西。

Gulp vs Grunt
先来说说grunt，在使用grunt之前，首先要有一个Gruntfile.js 文件，我目前项目中的大概是这么个样子：
1 2 3 4 5 6 7 8 9
10
11
12
13
14
15
16
17
18
19 'use strict';
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), cssmin: {
minify: {
expand: true,
cwd: 'css/',
src: ['*.css', '!*.min.css'],
dest: 'css/',
ext: '.min.css'
},
my_target: {
files: [{
expand: true,
cwd: '../style/',
src: ['*.css', '!*.min.css'],
dest: '../build/style/'
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63 }]
}
},
copy: {
main: {
files: [
{
expand: true,
cwd: '../views/',
src: ['**'],
dest: '../build/views/'
}, {
expand: true,
cwd: '../img/',
src: ['**'],
dest: '../build/img/'
}, {
expand: true,
cwd: '../',
src: ['main.html'],
dest: '../build/'
}, {
expand: true,
cwd: '../',
src: ['*.txt'],
dest: '../build/'
}
]
}
},
uglify: {
buildall: {
//当'minify'任务运行时Grunt将自动在"lib/"下搜索"**/*.js", 然后构建适当的src-dest文件映射，因此你不需要在文件添加或者移除时更新Gruntfile
files: [{
expand: true, //启用动态扩展
cwd: '../config/', //批匹配相对lib目录的src来源
src: '**/*.js', //实际的匹配模式
dest: '../build/config/' //目标路径前缀
}, {
expand: true, //启用动态扩展
cwd: '../js/controllers/', //批匹配相对lib目录的src来源
64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 src: '**/*.js', //实际的匹配模式
dest: '../build/js/controllers/' //目标路径前缀
}, {
expand: true, //启用动态扩展
cwd: '../js/directive/', //批匹配相对lib 目录的src 来源 src: '**/*.js', //实际的匹配模式
dest: '../build/js/directive/' //目标路径前缀
}, {
expand: true, //启用动态扩展
cwd: '../js/filter/', //批匹配相对lib 目录的src 来源 src: '**/*.js', //实际的匹配模式
dest: '../build/js/filter/' //目标路径前缀
}, {
expand: true, //启用动态扩展
cwd: '../js/service/', //批匹配相对lib 目录的src 来源 src: '**/*.js', //实际的匹配模式
dest: '../build/js/service/' //目标路径前缀
}]
},
builda: {
files: {
'../build/js/app.js': ['../js/app.js'],
'../build/js/libs/bridge.1.1.0.js':
['../js/libs/bridge.1.1.0.js']
}
},
release: {
files: {
'../build/js/libs/libs.min.js':
['../js/libs/zepto.20140520.js', '../js/libs/angular.min.js', '../js/libs/*.js', '!../js/libs/bridge.1.1.0.js', '!../js/libs/libs.min.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-jshint'); //检查js 语法错误
grunt.loadNpmTasks('grunt-contrib-concat'); //合并文件
grunt.loadNpmTasks('grunt-contrib-uglify'); //压缩代码
grunt.loadNpmTasks('grunt-contrib-cssmin'); //css 压缩
grunt.registerTask('default', ['copy', 'cssmin', 'uglify']);
};
再来看gulp 的，gulp 需要一个gulpfile.js 文件，我目前项目中的是这个样子：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 var gulp = require('gulp'),//gulp 基础库
concat = require('gulp-concat'),//合并文件
cssmin = require('gulp-minify-css'),//压缩css
htmlmin = require("gulp-htmlmin"),//压缩html
jsmin = require('gulp-uglify'),//压缩js
rename = require('gulp-rename'),//重命名文件
clean = require("gulp-clean"),//清理目录
replace = require('gulp-replace'),//文本替换
processhtml = require('gulp-processhtml'),//处理html 文件 addsrc = require('gulp-add-src'),//添加额外的文件流
option = {
buildPath: "../dist"//构建目录
};
//构建目录清理
gulp.task("clean", function (done) {
//return cache.clearAll(done);
return gulp.src(option.buildPath, {
read: false
})
.pipe(clean({force: true}));
})
gulp.task("imgcopy", function () {//图片拷贝
gulp.src("../img/**/*")
.pipe(gulp.dest(option.buildPath + '/img/'))
})
//js 文件压缩
gulp.task('jsmin', function () {
gulp.src(["../js/**/**/*.js",'!../js/libs/*.js'])
.pipe(jsmin())
.pipe(gulp.dest(option.buildPath+ "/js/"))
});
//需要合并和压缩的文件
gulp.task('concat', function () {
gulp.src(['../js/libs/angular.min.js','../js/libs/*.js', '!../js/libs/bridge*.js'])
.pipe(concat('libs.min.js'))
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 .pipe(jsmin())
.pipe(addsrc('../js/libs/bridge*.js'))
.pipe(jsmin())
.pipe(gulp.dest(option.buildPath + "/js/libs/"))
});
gulp.task("processhtml", function () {
var date = new Date().getTime();
gulp.src('../main.html')
.pipe(replace(/_VERSION_/gi, date))
.pipe(processhtml())
.pipe(htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest(option.buildPath + '/'))
})
//压缩css
gulp.task("cssmin", function () {
gulp.src("../style/*.css")
.pipe(cssmin())
.pipe(gulp.dest(option.buildPath + '/style'))
})
//压缩html 文件
gulp.task("htmlmin", function () {
gulp.src('../views/**/*.html')
.pipe(htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest(option.buildPath + '/views'))
})
// 默认任务 清空图片、样式、js 并重建 运行语句 gulp
gulp.task('default', ['clean'], function () {
gulp.start('jsmin', 'cssmin', 'processhtml',
"htmlmin",
'imgcopy', 'concat');
});
Grunt 处理任务的流程：
gulp处理任务：
写Gruntfile.js的时候，你要按照别人定好的规则来写配置文件，每个任务的配置文件规则（JSON格式）可能都不尽相同，而写gulpfile.js的时候，你只需要了解4个gulp的方法就可以了，即使你要写配置文件（比如项目的构建目录是哪里，css文件的目录又是哪个，你可以写个JSON来标明），那这个配置文件的格式也是掌握在你自己的手里，想怎么写就怎么写，根本不用关心具体的格式，只要声明完格式，待会自己用到的时候记得就好了。

grunt是基于配置文件来做构建的，而gulp采用的是代码优于配置的策略，一个是写配置文件，一个是写代码，个人还是比较倾向于后者。

此外，使用grunt的I/O过程中会产生一些中间态的临时文件，A 任务处理完会生成一个临时文件，B任务会读取这个临时文件，继续做自己的操作，然后再生成一个临时文件，给C任务用，以此类推，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。

而使用gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。

构建速度也要比grunt快，但是如果构建的项目很小，可能差距就体现不出来了。

Gulp为什么快
• 使用
orchestrator 任务系统,最大限度的并发运行多个任务. • 每个plugin 只做一件事,做好一件事, 提升处理速度
• 流式处理,极少的文件
IO Gulp.js 的核心设计
gulp 官网上的简介是The streaming build system ，
核心的词是streaming （流动式），Gulp.js 的精髓在于对Node.js 中Streams API 的利用，
所以想要理解Gulp.js ，我们必须理解Streams ，streaming 其实就是Streams 的设计思想，
但是像我这种对Node.js 只是一知半解的就只说到这里了，有兴趣的可以自行google 。

gulp 快速上手
1. 首先确保你已经正确安装了nodejs 环境。

然后以全局方式安装gulp ：
1 $ npm install -g gulp
2. 全局安装gulp 后，还需要在每个要使用gulp 的项目中都单独安装一次。

把目录切换到你的项目文件夹中，然后在命令行中执行：
1 $ npm install gulp
3. 如果想在安装的时候把gulp 写进项目package.json 文件的依赖中，则可以加上–save-dev ：
1 $ npm install --save-dev gulp
4. 在项目根目录创建gulpfile.js 文件
1 2 3 4 5 var gulp = require('gulp');
gulp.task('default', function() {
console.log('hello world');
});
5. 运行gulp
1 $ gulp
6. 默认任务将被运行，向控制台输出hello world 。

7.如果需要运行单个任务, 使用 gulp taskname命令。

Gulp api速览
使用gulp，仅需知道4个API即可：gulp.task(),gulp.src(),gulp.dest(),gulp.watch()，所以很容易就能掌握。

gulp.src(globs[, options])
gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息，本文暂不对文件流进行展开，你只需简单的理解可以用这个方法来读取你需要操作的文件就行了，globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。

当有多个匹配模式时，该参数可以为一个数组。

options为可选参数。

通常情况下我们不需要用到，暂不考虑。

文件匹配模式
Gulp内部使用了node-glob模块来实现其文件匹配功能。

我们可以使用下面这些特殊的字符来匹配我们想要的文件：
•* 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
•** 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。

如果出现在末尾，也能匹配文件。

•匹配文件路径中的一个字符(不会匹配路径分隔符)
•[...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法!(pattern|pattern|pattern)匹配任何与括号中给定的任一模式都不匹配的
•(pattern|pattern|pattern)匹配括号中给定的任一模式0次或1次，类似于js正则中的(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)
文件匹配列子：
• * 能匹配 reeoo.js,reeoo.css,reeoo,reeoo/,但不能匹配reeoo/reeoo.js
• *.*能匹配 reeoo.js,reeoo.css,reeoo.html
• */*/*.js
能匹配 r/e/o.js,a/b/c.js,不能匹配a/b.js,a/b/c/d.js • **能匹配 reeoo,reeoo/reeoo.js,reeoo/reeoo/reeoo.js,reeoo/reeoo/reeoo,r eeoo/reeoo/reeoo/reeoo.co,能用来匹配所有的目录和文件
• **/*.js 能匹配 reeoo.js,reeoo/reeoo.js,reeoo/reeoo/reeoo.js,reeoo/reeoo/reeoo /reeoo.js
• reeoo/**/co 能匹配 reeoo/co,reeoo/ooo/co,reeoo/a/b/co,reeoo/d/g/h/j/k/co
• reeoo/**b/co 能匹配 reeoo/b/co,reeoo/sb/co,但不能匹配reeoo/x/sb/co,因为只有单**单独出现才能匹配多级目录
• .js 能匹配 reeoo.js,reeoo1.js,reeoo2.js
• reeoo??能匹配 reeoo.co,reeooco,但不能匹配
reeooco/,因为它不会匹配路径分隔符
• [reo].js 只能匹配 r.js,e.js,o.js,不会匹配re.js,reo.js 等,整个中括号只代表一个字符
• [^reo].js 能匹配 a.js,b.js,c.js 等,不能匹配r.js,e.js,o.js
当有多种匹配模式时可以使用数组
1 2 //使用数组的方式来匹配多种文件
gulp.src(['js/*.js','css/*.css','*.html'])
使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上!即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式
gulp.src([*.js,'!r*.js'])匹配所有js文件，但排除掉以r开头的js文件
gulp.src(['!r*.js',*.js])不会排除任何文件，因为排除模式不能出现在数组的第一个元素中
此外，还可以使用展开模式。

展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果。

展开的例子如下：
•r{e,o}c会展开为 rec,roc
•r{e,}o会展开为 reo,ro
•r{0..3}o会展开为 r0o,r1do,r2o,r3o
gulp.dest(path[,options])
gulp.dest()方法是用来写文件的，path为写入文件的路径,options为一个可选的参数对象，通常我们不需要用到，暂不考虑。

要想使用好gulp.dest()这个方法，就要理解给它传入的路径参数与最终生成的文件的关系。

gulp的使用流程一般是这样子的：首先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到gulp 的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中，这里首先需要弄清楚的一点是，我们给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名，例如：
1 var gulp = require('gulp');
2 3 4 gulp.src('script/jquery.js')
.pipe(gulp.dest('dist/foo.js'));
//最终生成的文件路径为 dist/foo.js/jquery.js,而不是dist/foo.js
要想改变文件名，可以使用插件gulp-rename
下面说说生成的文件路径与我们给gulp.dest()方法传入的路径参数之间的关系。

gulp.dest(path)生成的文件路径是我们传入的path 参数后面再加上gulp.src()中有通配符开始出现的那部分路径。

例如：
1 2 3 4 5 var gulp = reruire('gulp'); //有通配符开始出现的那部分路径为 **/*.js gulp.src('script/**/*.js') .pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/**/*.js //如果 **/*.js 匹配到的文件为 jquery/jquery.js ,则生成的文件路径为 dist/jquery/jquery.js
再举更多一点的例子
1 2 3 4 gulp.src('script/avalon/avalon.js') //没有通配符出现的情况
.pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/avalon.js
//有通配符开始出现的那部分路径为 **/underscore.js
1 2 3 4 5 6 7 gulp.src('script/**/underscore.js')
//假设匹配到的文件为script/util/underscore.js
.pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/util/underscore.js
gulp.src('script/*') //有通配符出现的那部分路径为 *
//假设匹配到的文件为script/zepto.js
.pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/zepto.js
通过指定gulp.src()方法配置参数中的base 属性，我们可以更灵活的来改变gulp.dest()生成的文件路径。

当我们没有在gulp.src()方法中配置base 属性时，base 的默认值为通配符开始出现之前那部分路径，例如：
1 gulp.src('app/src/**/*.css') //此时base 的值为 app/src
上面我们说的gulp.dest()所生成的文件路径的规则，其实也可以理解成，用我们给gulp.dest()传入的路径替换掉gulp.src()中的base 路径，最终得到生成文件的路径。

1 2 3 gulp.src('app/src/**/*.css') //此时base 的值为app/src,也就是说它的base 路径为app/src
//设该模式匹配到了文件 app/src/css/normal.css
.pipe(gulp.dest('dist')) //用dist 替换掉base 路径，最终得到 dist/css/normal.css
所以改变base 路径后，gulp.dest()生成的文件路径也会改变 1 2 3 gulp.src(script/lib/*.js) //没有配置base 参数，此时默认的base 路径为script/lib //假设匹配到的文件为script/lib/jquery.js .pipe(gulp.dest('build')) //生成的文件路径为 build/jquery.js 1 2 3 gulp.src(script/lib/*.js, {base:'script'}) //配置了base 参数，此时base 路径为script
//假设匹配到的文件为script/lib/jquery.js
.pipe(gulp.dest('build')) //此时生成的文件路径为 build/lib/jquery.js
用gulp.dest()把文件流写入文件后，文件流仍然可以继续使用。

gulp.task(name[, deps], fn)
gulp.task 方法用来定义任务，
name 为任务名，
deps 是当前定义的任务需要依赖的其他任务，
为一个数组。

当前定义的任务会在所有依赖的任务执行完毕后才开始执行。

如果没有依赖，则可省略这个参数，
fn 为任务函数，我们把任务要执行的代码都写在里面。

该参数也是可选的。

gulp.watch(glob[, opts], tasks)
gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。

glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob 相同。

opts 为一个可选的配置对象，通常不需要用到，暂不考虑。

tasks 为文件变化后要执行的任务，为一个数组，
1 gulp.task('uglify',function(){
2 3 4 5 6 7 //do something
});
gulp.task('reload',function(){
//do something
});
gulp.watch('js/**/*.js', ['uglify','reload']);
gulp.watch()还有另外一种使用方式：
1 gulp.watch(glob[, opts, cb])
glob 和opts 参数与第一种用法相同
cb 参数为一个函数。

每当监视的文件发生变化时，就会调用这个函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息，type 属性为变化的类型，可以是added,changed,deleted ；path 属性为发生变化的文件的路径
1 2 3 4 gulp.watch('js/**/*.js', function(event){ console.log(event.type); //变化类型 added 为新增,deleted 为删除，changed 为改变 console.log(event.path); //变化的文件的路径 });
常用的gulp 插件介绍
js 文件压缩
使用gulp-uglify
安装：npm install --save-dev gulp-uglify
用来压缩js 文件，使用的是uglify 引擎
1 2 3 4 5 6 7 8 var gulp = require('gulp'),
uglify = require("gulp-uglify");
gulp.task('minify-js', function () {
gulp.src('js/*.js') // 要压缩的js 文件
.pipe(uglify())
.pipe(gulp.dest('dist/js')); //压缩后的路径
});
重命名文件
使用gulp-rename
安装：npm install --save-dev gulp-rename
用来重命名文件流中的文件。

用gulp.dest()方法写入文件时，文件名使用的是文件流中的文件名，如果要想改变文件名，那可以在之前用gulp-rename 插件来改变文件流中的文件名。

1 2 3 4 5 6 7 8 9 10 var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require("gulp-uglify");
gulp.task('rename', function () {
gulp.src('js/jquery.js')
.pipe(uglify()) //压缩
.pipe(rename('jquery.min.js')) //会将jquery.js
重命名为jquery.min.js
.pipe(gulp.dest('js'));
});
压缩css 文件
使用gulp-minify-css
安装：npm install --save-dev gulp-minify-css
要压缩css 文件时可以使用该插件
1 2 3 4 5 6 7 8 var gulp = require('gulp'),
minifyCss = require("gulp-minify-css");
gulp.task('minify-css', function () {
gulp.src('css/*.css') // 要压缩的css 文件
.pipe(minifyCss()) //压缩css
.pipe(gulp.dest('dist/css'));
});
html 文件压缩
使用gulp-minify-html
安装：npm install --save-dev gulp-minify-html
用来压缩html 文件
1 2 3 4 5 var gulp = require('gulp'),
minifyHtml = require("gulp-minify-html");
gulp.task('minify-html', function () {
gulp.src('html/*.html') // 要压缩的html 文件
6 7 8 .pipe(minifyHtml()) //压缩
.pipe(gulp.dest('dist/html'));
});
文件合并
使用gulp-concat
安装：npm install --save-dev gulp-concat
用来把多个文件合并为一个文件,我们可以用它来合并js 或css 文件等，这样就能减少页面的http 请求数了
1 2 3 4 5 6 7 8 var gulp = require('gulp'),
concat = require("gulp-concat");
gulp.task('concat', function () {
gulp.src('js/*.js') //要合并的文件
.pipe(concat('all.js')) // 合并匹配到的js 文件并命名为 "all.js" .pipe(gulp.dest('dist/js'));
});
自动刷新
可以结合browser-sync 做多终端自动刷新，详见BrowserSync 前端测试利器
处理html
使用gulp-processhtml
安装：npm install --save-dev gulp-processhtml
在构建时处理按你设想的修改html 文件，比如说你构建之前你有N 个脚本需要引入到html 页面中，构建之后可能这N 个文件被合并成了一个，这时候引入的地方也需要做相应的调整，那么差个插件就能派上用场了。

插件使用
1 2 3 4 5 gulp.task("processhtml", function () {
gulp.src('../main.html')
.pipe(processhtml())
.pipe(gulp.dest(option.buildPath + '/'))
})
main.html 构建之前的代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/> <link rel="stylesheet" href="style/base.css?/>
<link rel="stylesheet" href="style/index.css?/>
</head>
<body>
<ui-view></ui-view>
</body>
<!-- build:js js/libs/libs.min.js --> <!--process-html 插件需要用到这个注释-- >
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular.touch.min.js"></script>
<script src="js/libs/zepto.20140520.js"></script>
<script src="js/libs/angular.ui.bootstrap.js"></script> <script src="js/libs/angular-sanitize.min.js"></script> <script src="js/libs/angular-ui-route.min.js"></script> <script src="js/libs/fastclick.0.6.7.min.js"></script>
<script src="js/libs/carous.min.js"></script>
<!-- /build --> <!--process-html 插件需要用到这个注释--> </html>
main.html 构建之后
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/> <link rel="stylesheet" href="style/base.css?/>
<link rel="stylesheet" href="style/index.css?/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/libs/libs.min.js"></script> <!--注意这里的变化-->
</html>
字符串替换
使用gulp-replace
安装：npm install --save-dev gulp-replace
可以替换html 或者txt 等文件内的字符串为你想要的。

比如我每次构建的时候都需要去修改引用的文件的版本号，就可以使用这个插件
1 2 3 4 5 6 gulp.task("replace", function () {
var date = new Date().getTime();
gulp.src('../main.html')
.pipe(replace(/_VERSION_/gi, date))
.pipe(gulp.dest(option.buildPath + '/'))
})
main.html 文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html> <html ng-app="app"> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no"/> <link rel="stylesheet" href="style/base.css?v=_VERSION_"/> <link rel="stylesheet" href="style/index.css?v=_VERSION_"/> </head> <body> <ui-view></ui-view> </body> <script src="js/config/config.js?v=_VERSION_"></script> <script src="js/app.js?v=_VERSION_"></script> <script src="js/service/TrackDataService.js?v=_VERSION_"></script> <script src="js/service/APIService.js?v=_VERSION_"></script> <script src="js/service/DService.js?v=_VERSION_"></script> <script src="js/controllers/indexCtrl.js?v=_VERSION_"></script> <script src="js/directive/lazy.js?v=_VERSION_"></script> <script src="js/directive/slider.js?v=_VERSION_"></script> <script src="js/filter/filters.js?v=_VERSION_"></script> </html>
构建之后，_VERSION_被替换为时间戳。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<link rel="stylesheet" href="style/base.css?v=1433405631860"/> <link rel="stylesheet" href="style/index.css?v=1433405631860"/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/config/config.js?v=1433405631860"></script> <script src="js/app.js?v=1433405631860"></script>
<script
src="js/service/TrackDataService.js?v=1433405631860"></script> <script src="js/service/APIService.js?v=1433405631860"></script> <script src="js/service/DService.js?v=1433405631860"></script> <script
src="js/controllers/indexCtrl.js?v=1433405631860"></script> <script src="js/directive/lazy.js?v=1433405631860"></script> <script src="js/directive/slider.js?v=1433405631860"></script> <script src="js/filter/filters.js?v=1433405631860"></script> </html>
gulp 还有很多插件，大家可以去gulp 官网查看
总结
No Need To Grunt, Take A Gulp Of Fresh Air 。

当然，grunt 也并非一无是处，但是现在就是喜欢gulp ，再也回不去了。

最后可以看看我做的gulp 构建的demo ：传送门。