gulp_安裝和使用

         gulp前端構建工具，其功能和grunt一樣但執行起來比grunt快。gulp和grunt的區別是，gulp書寫方式跟nodejs相同，操作的是二進位制流，而grunt書寫方式一個json又一個json，相對會慢一些。

下面具體講gulp的安裝和使用；

1、首先確保你已經正確安裝了nodejs環境。然後以全域性方式安裝gulp：

npm install  -global  gulp-cli                                                                                                    sudo npm install -global gulp-cli

注意：sudo是以管理員身份執行命令，一般會要求輸入電腦密碼

2、安裝完成後，你可以使用下面的命令檢視gulp的版本號以確保gulp已經被正確安裝。

gulp -v

3、全域性安裝gulp後，還需要在每個要使用gulp的專案中都單獨安裝一次。把目錄切換到你的專案資料夾中，然後在命令列中執行

cd                                                                                                                                            npm install --save-dev gulp

注意：① 、--save-dev 來更新package.json檔案中“devDependencies”值；②、mac如果不知道如何把目錄切換到你的專案資料夾時，可以將把檔案拖到命令視窗中（會自動生成路徑）

4、首先，我們自己需要弄清楚專案需要哪些任務。根據專案需求安裝需要的模組

npm install  gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache   --save-dev

注意：如果以上命令提示許可權錯誤，需要新增 sudo 再次嘗試。

5、建立gulpfile.js檔案，放到你的專案目錄中。然後在gulpfile.js檔案中定義我們的任務了。下面是一個最簡單的gulpfile.js檔案內容示例；

// 引入 gulp

var gulp = require('gulp');

// 引入元件

var jshint = require('gulp-jshint');  //用來檢查js程式碼

var sass = require('gulp-sass');

var concat = require('gulp-concat');   //合併檔案

var uglify = require('gulp-uglify');

var rename = require('gulp-rename');

// 檢查指令碼

gulp.task('uglify:js',function(){

       gulp.src('src/js/*.js')

      .pipe(uglify())

      .pipe(concat('main.min.js'))

      .pipe(gulp.dest('build/js'))

});

gulp.task('uglify:img',function(){

       gulp.src('src/img/*.gif')

      .pipe(imagemin())

      .pipe(gulp.dest('build/img'))

});

gulp.task('uglify:html',function(){

        gulp.src('src/new.html')

       .pipe(htmlmin({  collapseWhitespace:true  }))

       .pipe(gulp.dest('build/new.html'))

});

// 編譯Sass

gulp.task('sass', function() {

          gulp.src('./scss/*.scss')

          .pipe(sass())

         .pipe(gulp.dest('./css'));

});

// 合併，壓縮檔案

gulp.task('scripts', function() {

          gulp.src('./js/*.js')

         .pipe(concat('all.js'))

         .pipe(gulp.dest('./dist'))

         .pipe(rename('all.min.js'))

         .pipe(uglify())

          .pipe(gulp.dest('./dist'));

});

// 監聽檔案變化

gulp.watch('src/new.html',['uglify:html']);

gulp.watch('./js/*.js', function(){gulp.run('lint', 'sass', 'scripts');});

//註冊預設任務

gulp.task('default',['uglify:css','uglify:js','uglify:img','uglify:html']);

注意：gulp只有五個方法： task ， run ， watch ， src ，和 dest

gulp     官網：http://gulpjs.com/         

 外掛：http://gulpjs.com/plugins