開始使用Gulp

開始使用Gulp

接觸gulp不多，感觸卻多。不過一句話：省了好多麻煩。如果你也是做web前端的，並且也想更加便捷高效的去完成自己的專案，那麼可以嘗試使用一下gulp。

什麼是Gulp

首先看看gulp的定義： gulp是一個基於流的自動化構建工具。大家都明白什麼是自動化 (就是懶人不用動手了唄)，構建工具就是說這是一個工具，並且是用來構建工程用的 。那麼什麼是基於流呢？如果知道unix的管道命令的人就會知道，把上一個操作的輸出當做下一個操作的輸入，形成一個連貫的過程。打個比方就好像是一個生產汽車的自動化車間，可能首先是生產出一個輪子，向下傳遞，然後下一道工序是加上車架，然後再下一道工序是噴漆等等。而這個流程線就是所謂的流了。
好吧！管他什麼流呢！反正是自動化的肯定就是能幫我們省很多事的 (不過流這樣的方式的確很便捷、高效)。

Gulp的安裝

gulp是很簡單的 ( 對於已有npm和基礎的nodejs經驗的同學)

$ npm install -g gulp

gulp實際上就和nodejs模組一樣，安裝方式相同，接下來你會發現，實際上這就是一個模組嘛！
在這裡我們通過npm init 初始化一個專案。
然後在你的工程目錄的根目錄下建立一個gulpfile.js （檔名可不能變啊） ，寫入如下內容:

var gulp = require('gulp'); // 引入gulp模組
gulp.task('mytask', function () {   
    /* 這裡宣告一個task，也就是gulp任務 */

    // do something here
    console.log('task run');
});

然後我們可以在命令列 (處於gulpfile.js同一目錄下) 中使用gulp mytask 這樣的命令執行一個gulp任務 ( 這裡的mytask就是我們宣告的任務 ) 。好吧！直到這裡感覺就好像是前面宣告了一個事件，然後在這裡用一個命令觸發了那個事件那麼簡單。而這個“事件”裡面就是需要自動化處理的內容了。
關於gulp本身我們需要知道幾個東西

• gulp.src() #原始檔案路徑
• gulp.dest() #檔案匯出的目標路徑
• gulp.task() #gulp任務
• gulp.watch() #監控檔案變動

具體API請參考： http://www.gulpjs.com.cn/docs/api/

Gulp外掛

gulp任務執行後，就會執行一些操作。大多數時候gulp的操作能力是來自gulp外掛，我們需要什麼樣的操作就引入什麼樣的外掛，然後在gulp任務中按照我們的意願來組織。
外掛的引入方式也就是nodejs 模組的引入方式，用require即可。外掛的安裝方式也是用npm安裝。

gulp-less

這個外掛是用來編譯less檔案的。
安裝此外掛:

npm install gulp-less

gulpfile.js中寫入

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('style', function() {
  return gulp.src('./main.less')
    .pipe(less())
    .pipe(gulp.dest('./dist/'));

});

在根目錄下建立 main.less 這個檔案並寫入一定的less程式碼。然後我們用gulp style 執行一下這個style任務。發現我們的main.less 檔案編譯成了一個css檔案，並且檔案自動生成在我們設定的 ./dist/目錄下，檔名為 main.css 。

gulp-autoprefixer

autoprefixer可以自動為css中的某些程式碼新增如 -moz- 、 -webkit- 等字首，保證其相容性。autoprefixer會參考Can I Use 網站的資料來判定哪些屬性需要新增，又該新增什麼樣的字首。
安裝外掛方法不變

npm install gulp-autoprefixer

我們在上一段程式碼的基礎上做出改進
gulpfile.js :

var gulp = require('gulp');
var less = require('gulp-less');

// 匯入autoprefixer模組
var autoprefixer = require('gulp-autoprefixer');

gulp.task('style', function() {
  return gulp.src('./main.less')
    .pipe(less())

    //  這裡加一節pipe，做一個autoprefixer操作
    .pipe(autoprefixer())
    .pipe(gulp.dest('./dist/'));

});

這樣一來，我們一個gulp style 後發現，這個main.less 檔案除了自動編譯了之外，還自動新增了一些必要的字首，經過這兩道工序後匯出到目標資料夾中。
這就是所謂流式的操作了，要加工一個東西就一套工序加工完，而不是加工了一道工序，放回去，然後再取出來再加工，不覺得麻煩啊！直接全部加工好了再放回去不就省事兒多了嘛！省去好多拿和放的過程 (在gulp中指與磁碟的讀寫，不用頻繁的讀寫磁碟，自然速度會有所提升)

gulp-minifycss

這是壓縮css檔案的一個gulp外掛
安裝 :

npm install gulp-minifycss

繼續在上面的程式碼的基礎上更改，繼續我們的流式操作。
gulpfile.js :

var gulp = require('gulp');
var less = require('gulp-less');
var autoprefixer = require('gulp-autoprefixer');

// 匯入minifycss模組
var minifycss = require('gulp-minifycss');

gulp.task('style', function() {
  return gulp.src('./main.less')
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(gulp.dest('./dist/'))

    //  這裡加一節pipe，做一個minifycss操作
    .pipe(minifycss())
    .pipe(gulp.dest('./dist/'));    
});

這樣的話我們編譯後生成的css檔案又多了一道壓縮的過程，使得最終的css檔案大小更小。

結語

好吧！這就是gulp的使用範例，其實還是很簡單的，自己需要什麼樣的構建操作就找相應的gulp外掛，然後通過同樣簡單的方式就可以插入到我們的構建流當中，自動構建好我們的專案。

參考與擴充套件

gulp中文網 : http://www.gulpjs.com.cn/
gulp plugin search (gulp外掛搜尋): http://gulpjs.com/plugins/
Gulp不完全入門教學 （推薦） : http://www.ido321.com/1622.html
use-gulp (推薦， 東西很全): https://github.com/Platform-CUF/use-gulp
gulp入門教學 ： http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/

本文永久更新連結地址：http://www.linuxidc.com/Linux/2016-12/138941.htm