摘要：話不多說，今天的主題是使用打造傳統(tǒng)項(xiàng)目的前端工作流。是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將代碼轉(zhuǎn)為代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這意味著，你可以用的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持。

最近前端一直是一個(gè)火熱的話題，前端技術(shù)棧也是伴隨著nodejs的出現(xiàn)而更替的飛快，導(dǎo)致大部分前端開發(fā)者曾一度迷茫在這各種技術(shù)選型上，比如前端自動(dòng)化工具就有Grunt，Gulp，Webpack，F(xiàn)is3等等各種解決方案，關(guān)于它們的優(yōu)劣也有很多大牛的深度剖析和見解，相信很多人和筆者一樣，很想緊跟上潮流的步伐卻因亂花漸欲迷人眼而止步當(dāng)前。

無奈筆者倔強(qiáng)，在多次拿起放下的糾結(jié)之后，終究是尋得一些靈感和啟發(fā)，得以駕馭其一二。
話不多說，今天的主題是：使用Gulp打造傳統(tǒng)項(xiàng)目的前端工作流。

可能很多開發(fā)者像我一樣依然還服務(wù)于傳統(tǒng)的MVC架構(gòu)的項(xiàng)目，這些項(xiàng)目的特點(diǎn)是html頁面由后臺(tái)渲染，前端工程師和后端工程師在一個(gè)工程中和（si）諧（bi）的生活著，前端開發(fā)簡單而又輕松，拼拼頁面，寫寫特效，可能還會(huì)用用后端語法渲染下數(shù)據(jù)。那么問題來了，我想用sass或者less怎么辦？我想寫ES6怎么辦？js文件太大需要壓縮怎么辦？現(xiàn)在，這些問題將統(tǒng)統(tǒng)可以解決。

gulp是nodejs的一個(gè)擴(kuò)展庫，是一個(gè)自動(dòng)化的構(gòu)建工具，它的優(yōu)勢是擁有豐富的插件，利用插件我們可以實(shí)現(xiàn)像sass編譯，ES6轉(zhuǎn)換為ES5等各種前端工作。API不多，只有簡單的幾個(gè)函數(shù)，官方有簡潔友好的中文跟文檔。

gulp快速入門

gulpAPI文檔

sass是一個(gè)css的預(yù)處理器，它由很多很棒的特性比如支持變量，支持文件引入，支持樣式嵌套繼承等等，可以大大提升我們的css書寫效率。
sass依賴ruby環(huán)境，多帶帶安裝sass的話就存在著一個(gè)麻煩的環(huán)境部署問題，好在gulp擁有gulp-sass插件可以幫我們進(jìn)行轉(zhuǎn)換而省去了安裝ruby的繁瑣工作,下邊是筆者的sass編譯任務(wù)

//gulp插件
var gulp = require("gulp"),
    sass = require("gulp-sass");

...
//sass編譯
gulp.task("sass", function(){
    return gulp.src("/**/*.scss")
    .pipe( sass() )                  //編譯sass
    .pipe( gulp.dest("/build/css") ) //編譯后文件存放目錄
});

是不是很簡單呢，當(dāng)然我們還可以順便做個(gè)css壓縮，自動(dòng)添加瀏覽器前綴的功能，開發(fā)的時(shí)候還需要實(shí)時(shí)編譯，所以我們再增加一個(gè)監(jiān)聽插件gulp-watch,完整的css處理任務(wù)如下：

安裝所有g(shù)ulp的插件

npm install --save-dev gulp gulp-sass gulp-autoprefixer gulp-cssnano gulp-rename gulp-watch

編寫gulpfile.js文件

//gulp插件
var gulp = require("gulp"),
    sass = require("gulp-sass"),
    autoprefixer = require("gulp-autoprefixer"),
    cssnano = require("gulp-cssnano"),  //css壓縮
    rename = require("gulp-rename"),
    watch = require("gulp-watch");

...

gulp.task("sass", function(){
    return gulp.src(sasspath)
    .pipe( watch(sasspath))   //監(jiān)聽gulp.watch不能監(jiān)聽新增文件
    .pipe( sass() )  //編譯sass
    .pipe( autoprefixer())  //添加瀏覽器前綴
    .pipe( gulp.dest(disCssPath) )
    .pipe( cssnano() )
    .pipe( rename({suffix: ".min"}))   //rename壓縮后的文件名
    .pipe( gulp.dest(disCssPath) );
});

命令行中執(zhí)行g(shù)ulp命令

gulp sass

任務(wù)完成后在目標(biāo)目錄可以看到編譯后生成的壓縮和未壓縮的樣式文件

├── css
│   ├── index.css
│   ├── index.min.css
│   ├── test.css
│   └── test.min.css

實(shí)時(shí)編譯示例：

ES6指ECMAScript 6，也叫ECMAScript 2015，是JavaScript語言的新一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。它的目標(biāo)，是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。他提出了很多現(xiàn)代編程語言的很多新特性，包括變量，數(shù)組，函數(shù)，對象等等都做了擴(kuò)展，筆者也還在學(xué)習(xí)當(dāng)中，推薦一份阮一峰大大寫的ES6的電子書。

ECMAScript 6入門

當(dāng)然目前的瀏覽器對ES6支持度還不是很完美，所以不能直接交給瀏覽器解析使用。那么新問題來了，我們需要進(jìn)行轉(zhuǎn)碼。

babel是一個(gè)廣泛使用的ES6轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這意味著，你可以用ES6的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持。

上邊電子書中詳細(xì)的講述了如何安裝和使用babel進(jìn)行轉(zhuǎn)碼，但是今天我們依然不講它，gulp有對應(yīng)的插件可以解決，那就是gulp-babel，同樣的，我們還可以順便利用gulp-uglify對編譯后的js文件進(jìn)行壓縮，事情可以依然優(yōu)雅的解決：

安裝babel和對應(yīng)的轉(zhuǎn)碼規(guī)則擴(kuò)展組件

npm install --save-dev  gulp-babel babel-preset-es2015 babel-preset-stage-3

修改gulpfile.js

...

var babel = require("gulp-babel"),
    uglify = require("gulp-uglify");

...

//編譯js
gulp.task("js",function(){
    return gulp.src(jspath)
    .pipe( watch(jspath))
    .pipe(babel({
      presets: ["es2015","stage-3"]
    }))  //babel轉(zhuǎn)碼
    .pipe( gulp.dest(disJsPath) )
    .pipe(uglify())  //壓縮
    .pipe( rename({suffix: ".min"}))
    .pipe( gulp.dest(disJsPath) );
});

同樣的，執(zhí)行對應(yīng)的gulp命令

gulp js

任務(wù)完成后會(huì)在目標(biāo)目錄增加編譯后的js文件

└── js
    ├── index.js
    └── index.min.js

實(shí)時(shí)編譯示例：

以上演示代碼只是部分，不是完整的，僅供參考，如果想快速在自己項(xiàng)目中使用可以下載本文對應(yīng)的源碼，歡迎點(diǎn)star，筆者會(huì)繼續(xù)增加圖片壓縮，雪碧圖處理等新功能，謝謝關(guān)注！

gulp-work-flow 前端工作流原來可以這么簡單

中秋之際，在此祝大家節(jié)日快樂！