用gulp建立自动工具，完成软件的编译、测试、打包和发布流程

 

安装 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 (老版本用法稍繁琐)

 附录： 常用命令npm，gulp