寫在前面

最近在學習web前端，剛好學習到gulp構建工具，就順便寫一寫筆記，當做一次簡單的練手。由於經驗缺乏，本文可能在某些地方做得不那麼細緻和準確，還望大家指正。

gulp介紹

關於gulp構建工具就不多加贅述了，不熟悉的小夥伴可以自行google或者檢視gulp的官網

gulp使用

gulp作為一款可以和grunt抗衡（目前可能已經超過）的構建工具，不僅在前端，對於後端自動化構建也起了很大作用，本文著重介紹gulp在web前端構建的使用。本文參考自gulp中文的API和github倉庫的doc文件 。gulp的API少而簡單，利於快速學習。gulp是基於node和npm

gulp安裝

在安裝了node的基礎上，安裝gulp

1.全域性安裝gulp

> npm install -g gulp

2.專案根目錄下新建package.json檔案，package.json檔案主要是管理專案的依賴和專案的版本資訊等。

> npm init

3.為專案安裝gulp包，作為開發依賴儲存

> npm install --save-dev gulp

4.檢視版本號

> gulp -v

gulp入門

對於gulp入門，我們只需要知道幾個基本的API就行了，下面逐一介紹這幾個基本的API。

gulp.task(name,[,deps],fn)    

gulp.run(tasks.....)   

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

gulp.src(glob)                           

gulp.dest(path[,options])     

作為演示，本文將由簡單入手，結合例項，演示gulp自動化構建的魅力。根據官方文件，使用gulp必須先在專案根目錄下新建gulpfile.js檔案。然後在檔案中引入gulp，引入方式和node的引入是一樣的。

var gulp = require('gulp');

1. 首先是定義任務task()

既然是自動化構建，自然首先我們需要知道它是怎麼跑起來的，gulp是基於一系列的任務構建自動化的。見如下的API，我們使用task便可以建立任務。

gulp.task(name,[,deps],fn)

關於其中的引數介紹，請自己查閱文件。使用task，我們可以開始寫gulp的構建程式了。

var gulp = require('gulp');
gulp.task('default',function() {
    console.log('hello, gulp');
});

在CLI下執行gulp

> gulp

我們將看到列印的結果。這個的default指的是預設執行的任務，也就是當我們執行gulp命令是，如果gulp後面不加其他引數，那麼就預設執行default，當然，我們也可以為該任務起名為task1，通過以下命令執行gulpfile

> gulp task1

繼續這個API的介紹，一個任務A的執行可以依賴其他任務，而且，當執行任務A的時候，會先執行完所有的依賴任務之後，再執行任務A。例如：

gulp.task('default',['task1', 'task2'], function() {
    console.log('hello, gulp');
});
gulp.task('task1', function() {
    console.log('task1');
});
gulp.task('task2', function() {
    console.log('task2');
});

這段程式碼的執行結果是執行完['task1','task2']後再執行default,需要注意的是，這個的['task1','task2'] 的執行並不是序列執行，而是非同步執行。如果我們要實現序列執行，可以寫成如下這樣：

gulp.task('default',['task1'], function() {
    console.log('hello, gulp');
});
gulp.task('task1', ['task2'], function() {
    console.log('task1');
});
gulp.task('task2', function() {
    console.log('task2');
});

那麼，default在執行前需要先執行task1，而task1又依賴task2，所以task2先執行，後task1執行，最後執行default，這樣就實現了序列，而實際上，實現任務的序列執行如果這樣寫的話是很麻煩的，gulp的序列化是可以藉助gulp-run-sequence 外掛的。

2.第二個要介紹的是run()，顧名思義，我們把上面的程式碼改一改。

var gulp = require('gulp');

gulp.task('default', function() {
    gulp.run('task1');
    gulp.run('task2');
    console.log('hello, gulp');
});
gulp.task('task1', function() {
    console.log('task1');
});
gulp.task('task2', function() {
    console.log('task2');
});

這樣的執行結果是：實現了序列輸出，但提示了我們run() has been deprecated(被棄用了的意思？)。顯然就是說，雖然run是用來執行任務，但這個API已經被拋棄使用了，建議我們以後也不要使用它，應該使用任務依賴的形式，在一個任務裡執行另一些任務。

[01:17:40] Using gulpfile F:\前端開發\js-jq-bs-test\gulpfile.js
[01:17:40] Starting 'default'...
gulp.run() has been deprecated. Use task dependencies or 
gulp.watch task triggering instead.
[01:17:40] Starting 'task1'...
task1
[01:17:40] Finished 'task1' after 322 μs
[01:17:40] Starting 'task2'...
task2
[01:17:40] Finished 'task2' after 463 μs
hello, gulp
[01:17:40] Finished 'default' after

3. 第三個要介紹的是src()

src(path)中的引數path 表示要被處理的檔案的路徑，可以是正則匹配，也可以是多個檔案以陣列的形式出現。在專案根目錄下新建一個index.html，同時在使用src()時都是配合其他API或方法，其中常見的是pipe(mid)操作，它是一個類管道的操作，引數mid表示經由處理的外掛，還有dest(destPath)API,表示將管道的流最終放置到何處。因此，我們可以寫出下面的簡單使用。

var gulp = require('gulp');

gulp.task('default', function() {
    gulp.run(['task1','task2']);;
    console.log('hello, gulp');
});
gulp.task('task1', function() {
    gulp.src('./index.html')
    /*中間可以經由更多的外掛處理*/
    .pipe(gulp.dest('./dest/'));
});
gulp.task('task2', function() {
    console.log('task2');
});

這段程式碼所做的事情，無非就是將index.html拷貝到dest目錄下，當然這算是最簡單的應用了。所以到目前為止，我們已經介紹了4個gulp的API，最後一個是watch(),一個很重要的API！

4. watch()實現監聽檔案改動

我們在除錯前端的時候，很討厭一次改動就要重新整理一次瀏覽器，這樣的操作是很費時間的，而gulp的watchAPI就解決了這樣的問題，使我們能夠專注於程式碼而不需要動手做其他重複多餘的操作。接著上面的index.html，試想如果我們改動了該檔案，那麼我們可能就需要重新整理瀏覽器來看一下改動後的效果，而實際上，使用watch來監聽這樣的改動，從而做出指定的動作（自動重新整理瀏覽器或者其他）。

var gulp = require('gulp');

gulp.task('default',['task1', 'watch'], function() {
    console.log('hello, gulp');
});
gulp.task('task1', function() {
    gulp.src('./index.html')
    /*這個可以經由更多的外掛處理*/
    .pipe(gulp.dest('./dest/'));
});
gulp.task('watch', function() {
    gulp.watch('./index.html',['task1'])
});

執行這段程式碼，我們會發現執行停住 了，且停在看watch任務，沒錯，此時gulp已經開始監聽index.html的變化，一旦變化，它就執行執行的task1 任務。這裡的task1 也可以是某個回撥函式callback.

var gulp = require('gulp');

gulp.task('default',['task1', 'watch'], function() {
    console.log('hello, gulp');
});
gulp.task('task1', function() {
    gulp.src('./index.html')
    /*這個可以經由更多的外掛處理*/
    .pipe(gulp.dest('./dest/'));
});
gulp.task('watch', function() {
    gulp.watch('./index.html',function() {
        console.log('changed!');
        gulp.run('task1');//過期的API，不建議使用
    })
});

小結

好了，上面的API如果會使用了，就算是已經在gulp上入門了吧，其他更復雜的任務實現，需要一些優秀的gulp外掛來幫助完成，在下一篇文章，我們接著聊聊。