Gulp Task and Gulp Pipe

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