gulp初探

gulp是個和grunt性質相近的js build tool (要用node.js)，主要是用js (gulpfile.js)寫不同的task去針對一堆檔案做各種不同的事情。以下為在generator-gulp-webapp中compile coffeescript的task: ($.coffee為gulp loader載入的gulp-coffee plugin)

gulp.task('coffee', function() {
  return gulp.src('app/scripts/*.coffee')
    .pipe($.coffee({bare: true}).on('error', $.util.log))
    .pipe(gulp.dest('.tmp/scripts'))
    .pipe($.size())
});

*翻譯蒟蒻：把app/scripts/下的.coffee都抓進來送入pipe，先送 $.cofee()(gulp-coffee)，然後再把compile好的js檔吐到 .tmp/scripts，然後把結果交結 $.size (gulp-size)報告輸出檔案大小

沒有謎一般的config，task()就只有乾淨利落的in and out (src() 與 dest())，和一步步的pipe()。不用自己寫plugin只需知道這四個function和什麼是glob就夠 XD :

• task(): 每個gulp的task，必要的是名字和執行function，但也可以包含其他task。*gulp的task都可以獨立在command line上執行。
• src(): 指定要抓什麼進pipe的glob (file pattern)，可以有options (同vinyl-fs的src())
• dest(): 指定輸出directory，可以有option (同vinyl-fs的dest())
• pipe(): 吃一個callback function⋯⋯根本就是vinyl-fs的pipe()，用來餵file stream給callback function的

(因為gulp用vinyl-fs整個project就沒多少code、又因為vinyl用node.js的file module及path module也是沒多少code...)

有用yeoman的人可以從generator-gulp-webapp入手，那個gulpfile加上官方github的三頁文件(1、2、3)足夠入門。掌握了輸入和輸出之後你會發現gulp的task好寫到不行⋯⋯

最後，推薦的plugin:

• gulp-loader: 載入gulp plugin的好工具，大多數yeoman generator已有
• gulp-rename: 可以進行path (node.js path)操作的plugin，加加減減dirname、改名改extension no problem~
• gulp-debug: 對pipe除錯的好工具