前端自動化之神器 — Gulp

Nodejs不僅把Javascript帶到了服務端，也在前端掀起了自動化的浪潮，推動了前端工作的歷史性巨變，今天和大家一起學習前端自動化的神器---Gulp;

說起自動化，自然少不了Grunt，這位前輩目前社區完善，擁有幾千個現成插件，install下來參考文檔即可配置使用（參見： 前端自動化之利劍——Grunt ）；而Gulp的出現，希望取其精華并取代Grunt，成為最流行的Javascript構建工具，Gulp采用代碼優于配置的策略，讓簡單的事繼續簡單，讓復雜的事變得可管理；

與Grunt的不同：

• 流：Gulp是一個基于流的構建系統，使用代碼優于配置的策略。
• 插件：Gulp的插件更純粹，單一的功能，并堅持一個插件只做一件事。
• 代碼優于配置：維護Gulp更像是寫代碼，而且Gulp遵循CommonJS規范，因此跟寫Node程序沒有差別。
• 沒有產生中間文件

使用Gulp的優勢就是利用流的方式進行文件的處理，通過管道將多個任務和操作連接起來，因此只有一次I/O的過程，流程更清晰，更純粹。Gulp去除了中間文件，只將最后的輸出寫入磁盤，整個過程因此變得更快。

下面在根目錄下新建一個Gulpfile.js，我們將完成以下任務：

• 圖片的無損壓縮
• Sass文件的編譯壓縮
• JS文件的壓縮合并
• 對以上任務的實時監聽

cmd進入項目根目錄，安裝所需要的Gulp及其插件：

1 npm install gulp gulp-imagemin gulp-ruby-sass gulp-uglify gulp-cache gulp-watch --save-dev

Gulp遵循Commonjs規范，所以你可以像寫Nodejs程序一樣把插件們require進來；

1 var gulp=require('gulp'); 
2 var imagemin=require('gulp-imagemin');
3 var cache=require('gulp-cache'); 
4 var uglify=require('gulp-uglify'); 
5 var sass=require('gulp-ruby-sass'); 
6 var watch=require('gulp-watch');

接著完成我們要完成的任務：

 1 //圖片的無損壓縮
 2 gulp.task('imagemin',function() {
 3     return gulp.src('./dist/images/**.*')
 4             .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
 5             .pipe(gulp.dest('./dist/images'));
 6 });
 7 
 8 //js的壓縮合并
 9 gulp.task('uglify', function() {
10     gulp.src('./js/*.js')
11         .pipe(concat('all.js'))
12         .pipe(gulp.dest('./dist'))
13         .pipe(rename('all.min.js'))
14         .pipe(uglify())
15         .pipe(gulp.dest('./dist'));
16 });
17 
18 //sass的編譯壓縮
19 gulp.task('sass',function() {
20     return sass('./dist/css/*.scss',{
21                 style:'compressed',
22                 loadPath:[
23                     'common/vars',
24                     'mixins/mixin',
25                     'mixins/css3',
26                     'common/reset',
27                     'common/com-class',
28                     'placeholders/placeholder'
29                 ]
30             })
31             .pipe(gulp.dest('./dist/min'));
32 });
33 
34 //實時監聽任務
35 gulp.task('watch',function() {
36     gulp.watch('./dist/css/*.scss',['sass']);
37     gulp.watch('./dist/react/main4.js',['uglify']);
38 })

是不是很酷！各插件詳細配置，請自行github，同學們加油！