gulp使用学习记录

gulp是一个nodejs的streaming构建工具，所谓的streaming大致意思就是把构建流程想成一个个链接的管道（pipe）。

1.什么是src和pipe？如下使用到了src 与 pipe

gulp.src(‘spec/google.spec.js‘)
        .pipe(jasmine());

我们先看一个unix命令：

cat gulpfile.js | wc -l

这是两个独立的命令，cat gulpfile.js用来获取gulpfile.js的文件内容，wc -l用来统计文件中的行数，他们中间用“|”相连。把cat gulpfile.js的输出作为wc -l的输入。这是再常见不过的unix命令

gulp中吸取了这样的想法，上面gulp命令可以想作：

‘spec/google.spec.js‘ | jasmine()

通俗理解,src里放的是要操作的文件，pipe里放的是对文件操作的方法.

2.基本的五个gulp命令

gulp.task(name, fn)这个你已经见过了

gulp.run(tasks...)尽可能多的并行运行多个task

gulp.watch(glob, fn)当glob内容发生改变时，执行fn

gulp.src(glob)返回一个可读的stream

gulp.dest(glob)返回一个可写的stream

其他gulp插件

1.gulp-jshint //语法检查

使用方法：

gulp.task(‘jshint‘,function(){
return gulp.src(‘public/javascript/*.js‘)
.pipe(jshint())
.pipe(jshint.reporter("default"))
//.pipe(jshint.reporter("jshint-default")) //或直接引用，不使用上一行的方式
})

技巧：

如果想查看检查结果的详细的错误信息，可以使用 map-stream 这个插件

检索代码具体错误信息插件的安装命令：cnpm install --save-dev map-stream

1. var map = require("map-stream");
2. var customerReporter = map(function(file,cb){
3. if(!file.jshint.success){
4. //打印出错误信息
5. console.log("jshint fail in:" + file.path);
6. file.jshint.results.forEach(function(err){
7. if(err){
8. console.log(err);
9. console.log("在 "+file.path+" 文件的第"+err.error.line+" 行的第"+err.error.character+" 列发生错误");
10. }
11. });
12. }
13. });
14. gulp.task("scripts",function(){
15. gulp.src("src/js/*.js")
16. .pipe(jshint())
17. .pipe(customerReporter);
18. })

执行命令： gulp scripts

2.