接觸gulp不多，感觸卻多。不過一句話：省了好多麻煩。如果你也是做web前端的，並且也想更加便捷高效的去完成自己的項目，那麼可以嘗試使用一下gulp。
首先看看gulp的定義： gulp是一個基於流的自動化構建工具。大家都明白什麼是自動化 (就是懶人不用動手了呗)，構建工具就是說這是一個工具，並且是用來構建工程用的 。那麼什麼是基於流呢？如果知道unix的管道命令的人就會知道，把上一個操作的輸出當做下一個操作的輸入，形成一個連貫的過程。打個比方就好像是一個生產汽車的自動化車間，可能首先是生產出一個輪子，向下傳遞，然後下一道工序是加上車架，然後再下一道工序是噴漆等等。而這個流程線就是所謂的流了。
好吧！管他什麼流呢！反正是自動化的肯定就是能幫我們省很多事的 (不過流這樣的方式的確很便捷、高效)。
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本身我們需要知道幾個東西
具體API請參考： http://www.gulpjs.com.cn/docs/api/
gulp任務運行後，就會執行一些操作。大多數時候gulp的操作能力是來自gulp插件，我們需要什麼樣的操作就引入什麼樣的插件，然後在gulp任務中按照我們的意願來組織。
插件的引入方式也就是nodejs 模塊的引入方式，用require即可。插件的安裝方式也是用npm安裝。
這個插件是用來編譯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 。
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中指與磁盤的讀寫，不用頻繁的讀寫磁盤，自然速度會有所提升)
這是壓縮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/
