gulp使用学习记录

Posted 2020-09-08

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.