使用Gulp來加速你的開發

Gulp與Grunt同樣，也是一個自動任務運行器。它充分借鑑了Unix操做系統的管道（pipe）思想，在操做上，它要比Grunt簡單。

安裝

Gulp須要全局安裝，而後再在項目的開發目錄中安裝爲本地模塊。先進入項目目錄，運行下面的命令。

bashnpm install -g gulp
npm install --save-dev gulp

gulpfile.js

項目根目錄中的gulpfile.js，是Gulp的配置文件。它大概是下面的樣子。

javascriptvar gulp = require('gulp');
gulp.task('default', function () {
});

舉個栗子，咱們要實現js的壓縮。

javascriptvar gulp = require('gulp'),
   uglify = require('gulp-uglify');

gulp.task('minify', function () {
   gulp.src('js/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('app.min'))
});

上面代碼中使用了gulp-uglify模塊。在此以前，須要先安裝這個模塊。
記住在安裝以前先 運行 npm init 來生成package.json，若是已經有了就不須要這一步了。

bashnpm install --save-dev gulp-uglify

Tips： --save-dev 會將 gulp-uglify 自動添加到package.json的devDependencies中；

gulpfile.js加載gulp和gulp-uglify模塊以後，使用gulp模塊的task方法指定任務。task方法有兩個參數，第一個是任務名，第二個是任務函數。在任務函數中，使用gulp模塊的src方法，指定所要處理的文件，而後使用pipe方法，將上一步的輸出轉爲當前的輸入，進行鏈式處理。

在上面代碼中，使用兩次pipe方法，也就是說作了兩種處理。第一種處理是使用gulp-uglify模塊，壓縮源碼；第二種處理是使用gulp模塊的dest方法，將上一步的輸出寫入本地文件，這裏是app.min.js（代碼中省略了後綴名js）。

從上面的例子中能夠看到，gulp充分使用了「管道」思想，就是一個數據流（stream）：src方法讀入文件產生數據流，dest方法將數據流寫入文件，中間是一些中間步驟，每一步都對數據流進行一些處理。

gulp.src()

gulp模塊的src方法，用於產生數據流。它的參數表示所要處理的文件，通常有如下幾種形式。

• js/app.js：指定確切的文件名。
• js/*.js：某個目錄全部後綴名爲js的文件。
• js/**/*.js：某個目錄及其全部子目錄中的全部後綴名爲js的文件。
• !js/app.js：除了js/app.js之外的全部文件。
• *.+(js|css)：匹配項目根目錄下，全部後綴名爲js或css的文件。

src方法的參數還能夠是一個數組，用來指定多個成員。

javascript
gulp.src(['js/**/*.js', 'css/**/*.css'])

gulp.task()

gulp模塊的task方法，用於定義具體的任務。它的第一個參數是任務名，第二個參數是任務函數。下面是一個很是簡單的任務函數。

javascript
gulp.task('test', function () {
   console.log('就測試下。');
});

task方法還能夠指定按順序運行的一組任務。

javascript
gulp.task('build', ['css', 'js', 'templates']);

上面代碼先指定build任務，它按次序由css、js、templates三個任務所組成。注意，因爲每一個任務都是異步調用，因此沒有辦法保證js任務的開始運行的時間，正是css任務運行結束。

若是但願各個任務嚴格按次序運行，能夠把前一個任務寫成後一個任務的依賴模塊。

javascript
gulp.task('css', ['templates'], function () {
   // Deal with CSS here
});

上面代碼代表，css任務依賴templates任務，因此css必定會在templates運行完成後再運行。

若是一個任務的名字爲default，就代表它是「默認任務」，在命令行直接輸入gulp命令，就會運行該任務。

javascript
gulp.task('default', function () {
   // Your default task
});

gulp.watch()

gulp模塊的watch方法，用於指定須要監視的文件。一旦這些文件發生變更，就運行指定任務。

javascript
gulp.task('watch', function () {
   gulp.watch('templates/*.tmpl.html', ['build']);
});

上面代碼指定，一旦templates目錄中的模板文件發生變化，就運行build任務。

watch方法也能夠用回調函數，代替指定的任務。

javascript
gulp.watch('templates/*.html', function (event) {
   console.log('Event type: ' + event.type); 
   console.log('Event path: ' + event.path); 
});

另外一種寫法是watch方法所監控的文件發生變化時（修改、增長、刪除文件），會觸發change事件。能夠對change事件指定回調函數。

javascript
var watcher = gulp.watch('templates/*.html', ['build']);

watcher.on('change', function (event) {
   console.log('Event type: ' + event.type);
   console.log('Event path: ' + event.path);
});

除了change事件，watch方法還可能觸發如下事件。

• end：回調函數運行完畢時觸發。
• error：發生錯誤時觸發。
• ready：當開始監聽文件時觸發。
• nomatch：沒有匹配的監聽文件時觸發。

watcher對象還包含其餘一些方法。

• watcher.end()：中止watcher對象，不會再調用任務或回調函數。
• watcher.files()：返回watcher對象監視的文件。
• watcher.add(glob)：增長所要監視的文件，它還能夠附件第二個參數，表示回調函數。
• watcher.remove(filepath)：從watcher對象中移走一個監視的文件。

gulp實現自動刷新 - gulp-livereload

gulp-livereload模塊用於自動刷新瀏覽器，反映出源碼的最新變化。它除了模塊之外，還須要在瀏覽器中安裝插件，用來配合源碼變化。

javascript
var gulp = require('gulp'),
    livereload = require('gulp-livereload');

gulp.task('watch', function () {
    livereload.listen();
    gulp.watch(['./asset/**/*.*','./templates/**/*.*'], function (file) {
        livereload.changed(file.path);
    });
});

上面代碼監視asset和templates下的任何文件，一旦有變化，就自動刷新瀏覽器。
Tips: 調試css 很方遍，由於刷新css 不須要刷新這個頁面，只須要從新加載css便可，趕忙雙屏幕，三屏幕搞起來；代碼敲得飛起。

還有不少實用的插件 能夠到 NpmJs.org 去找。