gulp简单使用小记

npm install --save-dev 写入package.json里

 

 

var gulp = require('gulp');

var less = require('gulp-less');//less解析

var minifycss = require('gulp-minify-css');//css压缩

var uglify = require('gulp-uglify');js压缩

 

 

使用方法：

 

gulp.task('less', function() {

gulp.src('./css/*.css')//压缩的文件

.pipe(less())//执行压缩

.pipe(gulp.dest('./css'));//输出文件夹

});

....

//watch监听任务

gulp.task('watch', function(){

gulp.watch('./css/*.css',['less'] )//gulp的watch监听，文件改动后立即重新执行less任务

})

 

 

gulp.task('default', ['less',...]);//执行以上方法

 

 

单独介绍：

var combiner = require('stream-combiner2');//监控合并时候文件本身的错误

 

默认情况下，在 stream 中发生一个错误的话，它会被直接抛出，除非已经有一个时间监听器监听着 error 时间。 这在处理一个比较长的管道操作的时候会显得比较棘手。

 

gulp.task('test',function(){

//流合并监听的方式 （故意写错了js，能够监听到错误处在哪个文件，和错误的具体位置）

var combined = combiner.obj([

gulp.src('js/*.js'),

uglify(),

gulp.dest('dst/js')

]);

 

combined.on('error',console.error.bind(console));

return combined;

 

});

 

gulp.task('default', ['test']);

 

它会把错误的信息、文件名、行数、列数·、位置、是执行哪个插件出现的错误，错误文件的路径，错误时间等等详细的信息都列出来。

 

 

 

不仅如此，大家有没有发现一个小细节，就是使用了stream-combiner2的方式，在执行uglify的时候没有通过管道。

 

这里我也很奇怪，gulp不是通过binary pipe方式执行的么，这里为什么不需要通过管道了呢?

 

 

看了github上的文档才知道，它会把pipe管道转换成stream流的形式。

 

 

这样的话，每次都使用stream-combiner2的方式，用combiner.obj([执行内容]);的方式，就不用每一个步骤都建立管道再走管道了，感觉瞬间很方便，有木有