安装 gulp:

$ npm install --global gulp

$ npm install --save-dev gulp

缺省的安装目录是%appData%/npm；需要添加到系统的Path中。

 

gulp以task的形式组织任务。

在每一个任务中，从gulp.src（）指定文件源头开始，经过一系列pipe管道处理， 最后结果保存到gulp.dest指定的目录中，（或输出到stream）

任务的顺序用runSequence来组织，把可以并行的的任务放在一个数组里面， 数组之间是串行的

runSequence(['clean'], ['copy-to-one-folder'], ['publish'], callback);

(备注： 加形参callback彻底变成串行)

把需要发布的从多处汇总到一个目录dist/src

gulp.task("copy-to-one-folder", function(){

gulp.src(["c:/labs3/TestLab/NodeServer/routes/**/*"], {base: "c:/labs3/TestLab/"})

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

return gulp.src(["c:/labs3/TestLab/HomeFinder/**/*"], {base:"c:/labs3/TestLab/HomeFinder/"})

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

});

把汇总后的文件zip到 dist/release目录下

如何需要rename文件的名称，

对于单个文件 .pipe(rename("main/text/ciao/goodbye.md"))

对于模式修改：

.pipe(rename(function (path) {

path.dirname += "/ciao";

path.basename += "-goodbye";

path.extname = ".md"

}))

如何需要replace文件中的字符串，（支持正则表达式），(最好以单个文件作为gulp.src源， 以减少计算量)

.pipe(replace('bar', 'foo'))

.pipe(replace(/foo(.{3})/g, '$1foo'))

用if添加， 限定repalce和rename，会更加有效率

如果是 *.html文件， .pipe(gulpif('*.html', do-sth, else-do-sth))

.pipe($.if('*.html', do-sth, else-do-sth))

注意选用 gulp-系列的模块'gulp-replace'不是 'replace'， 这是两个不同的模块！！！

var gulpIgnore = require('gulp-ignore');

.pipe(gulpIgnore.exclude(condition))

加！前缀排除指定的目录

gulp.src(['./*.js', '!./node_modules/**'])

 

文件合并与minify

1) useref以html文件中的标记为参考， 提取其中的文件路径，合并成一个大文件，

并且minify和uglify。 （可以修改文件名称， 文件中的字符串）

gulp.task("concat", function(){

return gulp.src(["c:/labs3/TestLab/Css3Test/index.html"], {base:"c:/labs3/TestLab/Css3Test"})

.pipe(useref())

.pipe($.if('*.html', $.replace('head', 'my head is from $' )))

.pipe(gulpif('*.html', $.replace('div', 'from gulpif' )))

.pipe(gulpif('*.css', $.rename("my-conbinted.css")))

.pipe(gulpif('*.css', minifyCss()))

.pipe(gulp.dest('dist/raw'));

});

最新版本的^3.0.7 (老版本用法稍繁琐)

 附录：