前端自動化之神器 — 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及其插件：

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

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

//圖片的無損壓縮
gulp.task('imagemin',function() {
    return gulp.src('./dist/images/*.')
            .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
            .pipe(gulp.dest('./dist/images'));
});

//js的壓縮合并
gulp.task('uglify', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});
//sass的編譯壓縮
gulp.task('sass',function() {
    return sass('./dist/css/*.scss',{
                style:'compressed',
                loadPath:[
                    'common/vars',
                    'mixins/mixin',
                    'mixins/css3',
                    'common/reset',
                    'common/com-class',
                    'placeholders/placeholder'
                ]
            })
            .pipe(gulp.dest('./dist/min'));
});
//實時監聽任務
gulp.task('watch',function() {
    gulp.watch('./dist/css/*.scss',['sass']);
    gulp.watch('./dist/react/main4.js',['uglify']);
})</pre> 
 
是不是很酷！各插件詳細配置，請自行github，同學們加油！
 </div>