gulp-work-flow 前端工做流原來能夠這麼簡單

概述

最近前端一直是一個火熱的話題，前端技術棧也是伴隨着nodejs的出現而更替的飛快，致使大部分前端開發者曾一度迷茫在這各類技術選型上，好比前端自動化工具就有Grunt，Gulp，Webpack，Fis3等等各類解決方案，關於它們的優劣也有不少大牛的深度剖析和看法，相信不少人和筆者同樣，很想緊跟上潮流的步伐卻因亂花漸欲迷人眼而止步當前。

無奈筆者倔強，在屢次拿起放下的糾結以後，終究是尋得一些靈感和啓發，得以駕馭其一二。
話很少說，今天的主題是：使用Gulp打造傳統項目的前端工做流。

可能不少開發者像我同樣依然還服務於傳統的MVC架構的項目，這些項目的特色是html頁面由後臺渲染，前端工程師和後端工程師在一個工程中和（si）諧（bi）的生活着，前端開發簡單而又輕鬆，拼拼頁面，寫寫特效，可能還會用用後端語法渲染下數據。那麼問題來了，我想用sass或者less怎麼辦？我想寫ES6怎麼辦？js文件太大須要壓縮怎麼辦？如今，這些問題將通通能夠解決。

Gulp

gulp是nodejs的一個擴展庫，是一個自動化的構建工具，它的優點是擁有豐富的插件，利用插件咱們能夠實現像sass編譯，ES6轉換爲ES5等各類前端工做。API很少，只有簡單的幾個函數，官方有簡潔友好的中文跟文檔。

• gulp快速入門

• gulpAPI文檔

編譯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') ) //編譯後文件存放目錄
});

是否是很簡單呢，固然咱們還能夠順便作個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) );
});

命令行中執行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的電子書。

ECMAScript 6入門

固然目前的瀏覽器對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) );
});

一樣的，執行對應的gulp命令

gulp js

任務完成後會在目標目錄增長編譯後的js文件

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

實時編譯示例：

以上演示代碼只是部分，不是完整的，僅供參考，若是想快速在本身項目中使用能夠下載本文對應的源碼，歡迎點star，筆者會繼續增長圖片壓縮，雪碧圖處理等新功能，謝謝關注！

gulp-work-flow 前端工做流原來能夠這麼簡單

中秋之際，在此祝你們節日快樂！