## 前言 我們經常會手工作一些代碼壓縮，文件目錄拷貝以及整理的工作，還有一些比如編譯以及文件合并，追加前綴等，而這些瑣碎的工作實際已經有一個比較好的前端構建工具gulp可以幫我們批量實現。 ### 前言 在目前的前端構建或者說自動化中，形成了三足鼎立的情況，分別是百度的fis,grunt,gulp.而無論是用戶數還是使用難度，gulp都獨占上風，眾多的github項目選擇了gulp作為構建工具。 ### gulp的優點 * 易于使用，通過代碼優于配置的策略，讓簡單的任務簡單，復雜的任務可管理。比grunt的使用簡單，得到前端開發者的好評。 * 利用 Node.js 流的威力，你可以快速構建項目并減少頻繁的 IO 操作。 * 插件品質高：Gulp 嚴格的插件指南確保插件如你期望的那樣簡潔高質得工作。 * 易于學習：通過較少的api，掌握 Gulp 毫不費力，構建工作盡在掌握：如同一系列流管道。 ### 圖解gulp工作范疇  ### 官網相關鏈接 * gulp官網： http://www.gulpjs.com.cn/ * 入門指南； http://www.gulpjs.com.cn/docs/getting-started/ * api文檔： http://www.gulpjs.com.cn/docs/getting-started/ ### 安裝gulp模塊 * 準備工作：項目模塊初始化 ``` bash $ npm init ``` * 建議全局安裝一次 ``` bash $ npm install -g gulp ``` * 因為不同項目開發時依賴的gulp版本可能是不同的，避免構建工具的向下不兼容問題。建議具體項目依賴安裝，加入依賴之后，模塊的依賴以及對應版本會保存到package.json文件中。 ``` bash $ npm install -g gulp --save-dev ``` * 項目的根目錄如果直接執行gulp命令，需要項目的根目錄下新建gulpfile.js，必須是這個文件名，然后gulp構建的相關的js代碼寫到這個文件中。如果你遇到權限的問題，切換到管理員用戶就可以，不用每次都sudo，`sudo -s` ### gulp Api使用指南 * 作為常識要知道npm模塊分兩類：1 作為核心模塊，可以直接用關鍵字加載請求下載使用 2 文件模塊，按照文件的相對或者絕對地址，請求對應的文件模塊（任何一個npm模塊本質就是一個符合cmd or amd規范的js文件或者文件夾）。 * 通過require語法引入gulp模塊 ``` javascript var gulp =require("gulp"); ``` * gulp.src(globs[, options]) 1. 輸出（Emits）符合所提供的匹配模式（glob）或者匹配模式的數組（array of globs）的文件。 將返回一個 Vinyl files 的 stream 它可以被 piped 到別的插件中。（這里具體的匹配模式可以去github上去看詳細的介紹，連接地址：https://github.com/isaacs/node-glob） 2. 我們最常使用的是文件相對路徑，這里只介紹幾個常用的，*(a|b|c) 匹配零個或多個提供的模式；?(pattern|pattern|pattern) 匹配零個或所提供的模式之一；!(pattern|pattern|pattern) 匹配任何不匹配任何提供的模式; ``` javascript gulp.src('client/templates/*.jade') .pipe(jade()) .pipe(minify()) .pipe(gulp.dest('build/minified_templates')); ``` * gulp.dest(path[, options]) 能被 pipe 進來，并且將會寫文件。并且重新輸出（emits）所有數據，因此你可以將它 pipe 到多個文件夾。如果某文件夾不存在，將會自動創建它。針對多個文件輸出原位置時，只要指定父文件夾路徑即可。 ``` javascript gulp.src('./client/templates/*.jade') .pipe(gulp.dest('./build/minified_templates')); ``` * gulp.task(name[, deps], fn) 使用場景：定義父任務與子任務，比如build任務包括html、css、js、img等多子任務。 ``` javascript gulp.task('task-name',[dep1,dep2],function(){ return gulp.src() .pipe() }) ``` * gulp.watch(glob[, opts, cb]) 使用場景：監聽文件，并且根據文件改變的不同做出不同響應的子任務或者簡單記錄文檔變動日志 ``` javascript #根據檢測執行任務 gulp.watch((["src/less/style.less", "src/less/**/*.less"]), ["less"])； #根據檢測查看更改類型，做日志信息 gulp.watch('src/less/style.less',function(event){ console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); }) #根據檢測,文件改變時執行任務 gulp.watch((["src/less/style.less", "src/less/**/*.less"]).on("change",function(){ })； ``` * gulp的執行機制 gulp默認是吧所有任務并發執行，并不會等待或者按順序執行，在執行完成之后會進入 任務回調。如果需要制定執行順序，給出一個提示，來告知 task 什么時候執行完畢，并且再給出一個提示，來告知一個 task 依賴另一個 task 的完成。 ``` javascript var gulp = require('gulp'); // 返回一個 callback，因此系統可以知道它什么時候完成 gulp.task('one', function(cb) { // 做一些事 -- 異步的或者其他的 cb(err); // 如果 err 不是 null 或 undefined，則會停止執行，且注意，這樣代表執行失敗了 }); // 定義一個所依賴的 task 必須在這個 task 執行之前完成 gulp.task('two', ['one'], function() { // 'one' 完成后 }); gulp.task('default', ['one', 'two']); ``` ## 參考資料 * [gulp插件集合](https://www.npmjs.com/browse/keyword/gulpplugin) * [jsfront-gulp使用資料推薦](https://github.com/jsfront/use-gulp)