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([執行內容]);的方式，就不用每個步驟都創建管道再走管道了，感受瞬間很方便，有木有