Node.js前端自動化工具：gulp

前端自動化工具 -- gulp 使用簡介

gulp是基於流的前端自動化構建工具。

 

以前也談到了 grunt的用法，grunt其實就是配置+配置的形式。

而gulp呢，是基於stream流的形式，也就是前一個函數（工廠）製造出結果，提供後者使用。

一樣的，也是包括基本用法和各插件的使用。

 

1、環境配置

gulp是基於nodejs的，因此沒有 nodejs 環境的要先去安裝好

而後給系統配上gulp環境

npm install -g gulp

再到某一工程目錄下

跟grunt通常，也是須要package.json包依賴文件和一個入口文件 gulpfile.js(其餘名字識別不了）

而後就相似的先裝上gulp

    
    
    
    

     
     
     
     

       npm install gulp --save-dev 
     
    
    
    
    

最基本的使用方式是這樣：(使用jshint插件校驗js代碼）

    
    
    
    

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

     
     
     
     
gulp.task('myTask',
     
     
     
     function(){
     
     
     
     
    
     
     
     
     return gulp.src('main.js')
     
     
     
     
              .pipe(jshint({undef: 
     
     
     
     true}));
     
     
     
     
 });
     
     
     
     

    
    
    
    

而後命令行使用：gulp myTask 便可運行此程序。

 

2、基本用法--插件使用

gulp所支持的插件也是不少的，使用方式跟基本的nodejs差很少。

下面統一介紹幾個常見的 插件，更詳細用法能夠到對應官方站點查看API

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

使用它們，就要先install,能夠直接在package.json中直接配置devDependencies依賴項，而後再統一 npm install

或者一個一個地安裝，依賴項會自動創建。好比安裝壓縮css的依賴包：

    
    
    
    

     
     
     
     

       npm install gulp-minify-css --save-dev 
     
    
    
    
    

這裏直接把因此依賴全支持上，由於都要用到。

 

而後進入 gulpfile.js文件，先直接require

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');

而後，新建一個任務：

gulp.task('styles', function(){ 
     return sass('static/style/test.scss',{style: 'expanded'})
        .pipe(autoprefixer('last 2 version','safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('static/style'))
        .pipe(rename({suffix:'.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('./build/static'))
        .pipe(notify({message: 'style done!'}));
        
});

解釋一下，其實就是 將sass文件編譯成css，以流的形式pipe結果，再加css前綴，修改後綴爲.min.css，並做資源壓縮，最後成功後返回done的消息

命令行鍵入 gulp styles 成功的話看到done信息，相應css文件也順利產生。

本來打算直接用src的形式，沒料到會出錯，難道是 gulp-ruby-sass 不支持這種寫法？

 

再試一下 js的

gulp.task('scripts', function(){ 
     return gulp.src('./static/**/*.js')
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest('./static/script'))
        .pipe(rename({suffix:'.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('./build/static'))
        .pipe(notify({message: 'script done!'}));
        
});

固然，如今有兩個任務了，直接gulp [task]未免太麻煩

命令行 gulp默認執行的是default的任務

因此能夠這麼玩：

    
    
    
    

     
     
     
     

       gulp.task('default',['watch'], 
      function(){  
      
    gulp.start('styles','scripts'); 
      
}); 
     
    
    
    
    

解釋一下，第一個參數是任務1（不必定非得default)，第二個參數也是任務（這個任務能夠爲空，表明着任務一依賴它（們），任務一執行完才輪到它，固然了，其實我如今這個順序好像有點..）

這個watch是一個監聽的任務，下頭會講到

而後gulp.start 再執行上述的那兩個任務。

這樣一來，命令行直接gulp就能執行這仨任務了，還能實時監聽改變哦~

這個watch的監放任務：

    
    
    
    

     
     
     
     

       gulp.task('watch', 
      function(){  
      
    gulp.watch('./static/style/test.scss',['styles']); 
      
    livereload.listen(); 
      
    gulp.watch('./build/static/test.min.css').on('change',livereload.changed); 
      
}); 
     
    
    
    
    

解析：第二行是指監聽那個scss文件，若是有改動就執行styles的那個任務

         第三行是開啓瀏覽器端的監聽模式

         第四行是監聽某個css文件，好比我html文件引用了這個文件，它變化時瀏覽器就會自動刷新。

ps: 不過默認狀況下可能仍是沒法監聽的，有兩種方法：

      裝上 liveReload 插件(好比chrome上）

      給html代碼添加上：參考 

    
    
    
    

     
     
     
     

       <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> 
     
    
    
    
    

      若是是遠程機子，非本地的，例如： 參考

    
    
    
    

     
     
     
     

       <script src="http://192.168.0.1:35729/livereload.js?snipver=1"></script> 
     
    
    
    
    

 

ok 整個運行一下吧！

shenmegui .. console.log都識別不了，無論了..忽略

不過爲何jshint出錯了還會繼續下面的操做呢？看了還得截斷一下才行

 

還有圖片的壓縮imagemin插件

 .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))  

以及clean插件的使用等：

    
    
    
    

     
     
     
     

       gulp.task('clean',  
      function(cb) {     del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb) }); 
     
    
    
    
    

 

固然，gulp任務的執行是異步的，也就是說，任務之間的執行沒有前後之分，若想保證執行順序

只好定義依賴關係（如上述參數二的依賴）

或者使用Promise對象實現，回調函數的使用，參考 

 

更多的操做還需到各自插件API查看

總之，gulp比grunt簡潔了許多，但由於是基於流的形式，難免又會帶來「一些麻煩」。

 

（轉自） http://www.cnblogs.com/imwtr/p/4668834.html