前端自動化構建工具——gulp

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

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對象實現，回調函數的使用，參考