首页 > 代码库 > gulp使用学习记录

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.   
  15. gulp.task("scripts",function(){  
  16.    gulp.src("src/js/*.js")  
  17.       .pipe(jshint())  
  18.       .pipe(customerReporter);  
  19. })

 

 执行命令: gulp scripts

2.

 

gulp使用学习记录