Gulp主要有四個指令,用這些指令就可以完成大部份工作。
- gulp.task(name, fn) 定義一個任務名稱,接下來指定任務的工作內容
- gulp.run(task) 運行指定的任務
- gulp.src(glob) 檔案來源
- gulp.dest(folder) 檔案的存檔路徑
而在上回的範例裡,已經呈現了主要的三個。
//gulpfile.js
var gulp = require('gulp'),
coffee = require('gulp-coffee');
gulp.task('coffee', function() { //'coffee'是排程名稱,可自定
gulp.src('./app/coffeescripts/*.coffee') //來源檔案
.pipe(coffee()) //編譯
.pipe(gulp.dest('./app/assets/js')) //輸出位置
});
而這篇會介紹如何用gulp將一個任務串接,並且監視它。
以下是今年coscup Appleboy所分享的簡報(他的投影片真得很精彩),先前就有聽過Gulp、Grunt等等技術,但是實際要運用也是需要參考許多文章,而其中許多都是 Appleboy的資料。
另外這邊有介紹Gulp與Grunt兩者在任務流程上的不同,Gulp在處理上,是不斷的編譯、編譯、編譯,最後直接寫入檔案,這篇就來介紹,Gulp是如何串接這些任務。
來源:http://www.slideshare.net/appleboy/automating-your-workflow-with-gulp
Js ugly
在上次的範例中,我們有準備兩個coffee
原始檔,這次就要將這兩個原始檔合併壓縮。
回到terminal中輸入以下指令。
npm install gulp-uglify gulp-concat --save-dev
gulp-uglify
是用來壓縮js以及去除變數,gulp-concat
則是用來合併多隻檔案。所有的流程都會用’.pipe’來進行串接,結果就會像下面的程式碼,編譯coffee、合併成一隻js、壓縮、輸出。
//gulp
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
coffee = require('gulp-coffee');
gulp.task('coffee', function() { //‘coffee'是排程名稱,可自定
gulp.src('./app/coffeescripts/*.coffee') //來源檔案
.pipe(coffee()) //編譯
.pipe(concat('main.js')) //合併成一隻
.pipe(uglify()) //壓縮、醜化
.pipe(gulp.dest('./app/assets/js')) //輸出位置
});
gulp.task('default', ['coffee']);//預設動作 執行gulp
接下來回到terminal執行gulp
,應該會發現/app/assets/js
內的js被合併成一隻main.js
,到這邊也算達到預期的效果,但是每次不斷執行相同動作也是挺麻煩der~。所以我們要另外寫個任務,不斷地監測檔案是否修改,只要有修改檔案,就自動編譯。
Gulp watch
透過gulp.watch
,可以監聽指定的資料夾,而被監聽的資料夾只要有檔案變更,就會直行指定的任務。
//gulp
gulp.task('watch', function () { //自定一個watch的排程名稱
gulp.watch('./app/coffeescripts/*.coffee', ['coffee']); //監聽路徑,以及檔案變更後所執行的任務
});
gulp.task('default', ['coffee','watch']);
參考以上的原始碼,只要在terminal輸入gulp
,就會自動監聽。
只要每次修改,就會如上一樣,不斷地執行coffee這個任務,如果要中斷目前的監聽,就在Terminal內按下Ctrl
+ C
。
到目前為止的gulpfile.js
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
coffee = require('gulp-coffee');
gulp.task('coffee', function() { //‘coffee'是排程名稱,可自定
gulp.src('./app/coffeescripts/*.coffee') //來源檔案
.pipe(coffee()) //編譯
.pipe(concat('main.js')) //合併成一隻
.pipe(uglify()) //壓縮、醜化
.pipe(gulp.dest('./app/assets/js')) //輸出位置
});
gulp.task('watch', function () { //自定一個watch的排程名稱
gulp.watch('./app/coffeescripts/*.coffee', ['coffee']); //監聽路徑,以及檔案變更後所執行的任務
});
gulp.task('default', ['coffee','watch']);
以目前的範例結果大概會像這樣。
| app /
| - coffeescripts /
| - a.coffee
| - b.coffee
| - js/
| - jquery-1.11.0.min.js
| - sass/
| - all.sass
| - assets/
| js /
| - main.js
| - index.html
| node_modules /
| - 各式node module….
| - gulpfile.js
| - package.json