gulp-work-flow 前端工作流原來可以這么簡單
概述
最近前端一直是一個火熱的話題，前端技術棧也是伴隨著nodejs的出現而更替的飛快，導致大部分前端開發者曾一度迷茫在這各種技術選型上，比如前端自動化工具就有Grunt，Gulp，Webpack，Fis3等等各種解決方案，關于它們的優劣也有很多大牛的深度剖析和見解，相信很多人和筆者一樣，很想緊跟上潮流的步伐卻因亂花漸欲迷人眼而止步當前。
無奈筆者倔強，在多次拿起放下的糾結之后，終究是尋得一些靈感和啟發，得以駕馭其一二。
話不多說，今天的主題是：使用Gulp打造傳統項目的前端工作流。
可能很多開發者像我一樣依然還服務于傳統的MVC架構的項目，這些項目的特點是html頁面由后臺渲染，前端工程師和后端工程師在一個工程中和（si）諧（bi）的生活著，前端開發簡單而又輕松，拼拼頁面，寫寫特效，可能還會用用后端語法渲染下數據。那么問題來了，我想用sass或者less怎么辦？我想寫ES6怎么辦？js文件太大需要壓縮怎么辦？現在，這些問題將統統可以解決。
Gulp
gulp是nodejs的一個擴展庫，是一個自動化的構建工具，它的優勢是擁有豐富的插件，利用插件我們可以實現像sass編譯，ES6轉換為ES5等各種前端工作。API不多，只有簡單的幾個函數，官方有簡潔友好的中文跟文檔。
編譯Sass
sass是一個css的預處理器，它由很多很棒的特性比如支持變量，支持文件引入，支持樣式嵌套繼承等等，可以大大提升我們的css書寫效率。
sass依賴ruby環境，單獨安裝sass的話就存在著一個麻煩的環境部署問題，好在gulp擁有 gulp-sass 插件可以幫我們進行轉換而省去了安裝ruby的繁瑣工作,下邊是筆者的sass編譯任務
//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') ) //編譯后文件存放目錄
});</pre>
是不是很簡單呢，當然我們還可以順便做個css壓縮，自動添加瀏覽器前綴的功能，開發的時候還需要實時編譯，所以我們再增加一個監聽插件 gulp-watch ,完整的css處理任務如下：
安裝所有gulp的插件
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)) //監聽gulp.watch不能監聽新增文件
.pipe( sass() ) //編譯sass
.pipe( autoprefixer()) //添加瀏覽器前綴
.pipe( gulp.dest(disCssPath) )
.pipe( cssnano() )
.pipe( rename({suffix: '.min'})) //rename壓縮后的文件名
.pipe( gulp.dest(disCssPath) );
});</pre>
命令行中執行gulp命令
gulp sass
任務完成后在目標目錄可以看到編譯后生成的壓縮和未壓縮的樣式文件
├── css
│ ├── index.css
│ ├── index.min.css
│ ├── test.css
│ └── test.min.css
實時編譯示例：
ES6 -> ES5
ES6指ECMAScript 6，也叫ECMAScript 2015，是JavaScript語言的新一代標準，已經在2015年6月正式發布了。它的目標，是使得JavaScript語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。他提出了很多現代編程語言的很多新特性，包括變量，數組，函數，對象等等都做了擴展，筆者也還在學習當中，推薦一份阮一峰大大寫的ES6的電子書。
當然目前的瀏覽器對ES6支持度還不是很完美，所以不能直接交給瀏覽器解析使用。那么新問題來了，我們需要進行轉碼。
babel是一個廣泛使用的ES6轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。這意味著，你可以用ES6的方式編寫程序，又不用擔心現有環境是否支持。
上邊電子書中詳細的講述了如何安裝和使用babel進行轉碼，但是今天我們依然不講它，gulp有對應的插件可以解決，那就是 gulp-babel ，同樣的，我們還可以順便利用 gulp-uglify 對編譯后的js文件進行壓縮，事情可以依然優雅的解決：
安裝babel和對應的轉碼規則擴展組件
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轉碼
.pipe( gulp.dest(disJsPath) )
.pipe(uglify()) //壓縮
.pipe( rename({suffix: '.min'}))
.pipe( gulp.dest(disJsPath) );
});</pre>
同樣的，執行對應的gulp命令
gulp js
任務完成后會在目標目錄增加編譯后的js文件
└── js
├── index.js
└── index.min.js
實時編譯示例：
