Gulp 自動化的項目構建工具

　　在很多場合都會聽到前端工和 node 程師推薦 Grunt 來實現項目的自動化，自動化可以自動完成 javascript/coffee/sass/less 等文件的的測試、檢查、合併、壓縮、格式化、部署文件生成，並監聽文件在改動後重復指定的這些步驟。

　　得益於 Grunt 基於任務的設計模式，這些步驟可以很好的歸類執行，讓開發效率得到了一次提升，但殺敵 1000，得自損 800 啊，學習曲線有點高，Gruntfile配置任務很難理解，經常容易忘記。

　　Grunt.js 太複雜了，複雜到比使用和配置 Vim 都困難，之前寫過得《前端自動化如何利用grunt優化項目？》，glup比較簡單，配置邏輯便於理解，效率更高、健壯性更好。

　　Gulp構建系統

　　Gulp是一個構建系統，開發者可以使用它在網站開發過程中自動執行常見任務。

　　比如編譯預處理CSS，壓縮JavaScript和刷新瀏覽器，來改進網站開發的過程。　　

　　一、Gulp安裝

　　1.Gulp是基於Node.js構建的，所以要先安裝node.js。

　　2.安裝Gulp的過程十分簡單。首先，需要在全局安裝Gulp包：

npm install -g gulp  //全局安裝

　　3.然後，在項目目錄安裝Gulp：

npm install --save-dev gulp

　　4.查看gulp是否安裝成功

gulp -v

　　二、安裝常用gulp插件

* sass的編譯（gulp-ruby-sass）
* 自動添加css前綴（gulp-autoprefixer）
* 壓縮css（gulp-minify-css）
* js代碼校驗（gulp-jshint）
* 合併js文件（gulp-concat）
* 壓縮js代碼（gulp-uglify）
* 壓縮圖片（gulp-imagemin）
* 自動刷新頁面（gulp-livereload）
* 圖片緩存，只有圖片替換了才壓縮（gulp-cache）
* 更改提醒（gulp-notify）
* 清除文件（del）

　　三、創建配置文件 gulpfile.js

　　在項目的根目錄創建配置文件 gulpfile.js，Gulp 僅有 5 個方法就能組合出你需要的任務流程：task, run, watch, src, dest

//引入gulp插件node模塊
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    //gminifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    concat = require('gulp-concat'),
    livereload = require('gulp-livereload'),
    notify = require('gulp-notify');

//Gulp 僅有 5 個方法就能組合出你需要的任務流程：task, run, watch, src, dest

    //每個gulp.task(name, fn)都是一個任務配置模塊，
    gulp.task('uglify',function(){
    
        //gulp.src(glob)返回了一個可讀的stream，如此行返回了./js/*.js下的全部
        gulp.src('./js/*.js')
            .pipe(uglify())
             //gulp.dest(glob)返回一個可寫的stream，如此行是將文件流寫入到 ./dist/js 裏的對應路徑下            
            .pipe(gulp.dest('./dist/js'))
            .pipe(notify({message:'可以了 ok !'}))
    })
    
    gulp.task('imagemin',function(){
        gulp.src('./image/*.*')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist/image'))
            .pipe(notify({message:'compress ok !'}))
    })
    
    //定義名爲"watch"的任務
    gulp.task('watch',function(){
        gulp.watch('./image/*.*');
        gulp.watch('./js/*.js');
        gulp.watch('./css/*.css');
        gulp.watch('./scss/*.scss');
    })    
    //每個gulpfile.js裏都應當有一個dafault任務，它是缺省任務入口（類似C語言的main()入口），運行gulp的時候實際只是調用該任務（從而來調用其它的任務）
    gulp.task('default',function(){
         //gulp.run(tasks)表示運行對應的任務，這裏表示執行名
        gulp.run('uglify','imagemin');
        //執行'watch'監聽任務
        gulp.run('watch');    
    })　

　　四、運行gulp

　　通過gulp+任務名稱，就可以運行gulp例

gulp watch