fuakgq
Last Updated: February 25, 2016
·
594
· vincicat
21ab59e08eb5acd3487ff5b32b2bff99

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-fssrc())
  • dest(): 指定輸出directory,可以有option (同vinyl-fsdest())
  • 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的三頁文件(123)足夠入門。掌握了輸入和輸出之後你會發現gulp的task好寫到不行⋯⋯

最後,推薦的plugin:

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