gulp徹底開發指南 => 快來換掉你的Grunt吧

    最近一直在構建Angular應用,經過bower管理前端包依賴,而後經過gulp和它配合.發現gulp相比於grunt真的很輕,如今個人項目中已經取代了grunt.這裏把個人一些實踐記錄下來和你們分享一下.

    gulp定位和grunt同樣也是前端構建工具,和grunt相比它更突出一個流的概念,它全部的任務執行都是one by one的感受,官網的自定義就是:

gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.

    首先我感受它重量級較grunt輕了不少,上手相對簡單,同時處理上也能知足咱們的需求.這裏經過一個真實項目的配置文件說明一下該怎麼用gulp.

  (1) 安裝(須要npm)

    全局安裝gulp

npm install -g gulp

    局部安裝在你的項目

npm install --save-dev gulp

    兩種安裝方式隨意,沒什麼好說的.

  (2) 運行

    在目錄下建立一個"gulpfile.js"文件,經過gulp命令運行便可.

  (3) gulpfile.js文件

    這是一個完整的例子,已經運用在我項目中,已經加了註釋,看完整個文件你對於gulp應該就已經瞭解並可使用了.

var gulp = require('gulp');

// 引入組件
var less = require('gulp-less'),            // less
    minifycss = require('gulp-minify-css'), // CSS壓縮
    uglify = require('gulp-uglify'),        // js壓縮
    concat = require('gulp-concat'),        // 合併文件
    rename = require('gulp-rename'),        // 重命名
    clean = require('gulp-clean');          //清空文件夾

// less解析
gulp.task('build-less', function(){
  gulp.src('./javis/static/less/lib/s-production.less')
    .pipe(less())
    .pipe(gulp.dest('./javis/static/build/css/lib/'))

  gulp.src('./javis/static/less/lib/s-skins.less')
    .pipe(less())
    .pipe(gulp.dest('./javis/static/build/css/lib/'))

  gulp.src('./javis/static/less/lib/s/s.less')
    .pipe(less())
    .pipe(gulp.dest('./javis/static/build/css/lib/'))

  gulp.src('./javis/static/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('./javis/static/build/css/'))
});

// 合併、壓縮、重命名css
gulp.task('stylesheets',['build-less'], function() {
    // 注意這裏經過數組的方式寫入兩個地址,仔細看第一個地址是css目錄下的所有css文件,第二個地址是css目錄下的areaMap.css文件,可是它前面加了!,這個和.gitignore的寫法相似,就是排除掉這個文件.
  gulp.src(['./javis/static/build/css/*.css','!./javis/static/build/css/areaMap.css'])
    .pipe(concat('all.css'))
    .pipe(gulp.dest('./javis/static/build/css/'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('./javis/static/build/css'));
});

// 合併，壓縮js文件
gulp.task('javascripts', function() {
  gulp.src('./javis/static/js/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./javis/static/build/js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('./javis/static/build/js'));
});

// 清空圖片、樣式、js
gulp.task('clean', function() {
  return gulp.src(['./javis/static/build/css/all.css','./javis/static/build/css/all.min.css'], {read: false})
    .pipe(clean({force: true}));
});

// 將bower的庫文件對應到指定位置
gulp.task('buildlib',function(){

  gulp.src('./bower_components/angular/angular.min.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  gulp.src('./bower_components/angular/angular.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  gulp.src('./bower_components/bootstrap/dist/js/bootstrap.min.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  gulp.src('./bower_components/jquery/dist/jquery.min.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  gulp.src('./bower_components/angular-route/angular-route.min.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  gulp.src('./bower_components/angular-animate/angular-animate.min.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  gulp.src('./bower_components/angular-bootstrap/ui-bootstrap.min.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  gulp.src('./bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  //--------------------------css-------------------------------------

  gulp.src('./javis/static/less/fonts/*')
      .pipe(gulp.dest('./javis/static/build/css/fonts/'))

  gulp.src('./bower_components/bootstrap/fonts/*')
      .pipe(gulp.dest('./javis/static/build/css/fonts/'))

  gulp.src('./bower_components/bootstrap/dist/css/bootstrap.min.css')
      .pipe(gulp.dest('./javis/static/build/css/lib'))

});

// 定義develop任務在平常開發中使用
gulp.task('develop',function(){
  gulp.run('buildlib','build-less','javascripts','stylesheets');

  gulp.watch('./javis/static/less/*.less', ['build-less']);
});

// 定義一個prod任務做爲發佈或者運行時使用
gulp.task('prod',function(){
  gulp.run('buildlib','build-less','stylesheets','javascripts');

  // 監聽.less文件,一旦有變化,馬上調用build-less任務執行
  gulp.watch('./javis/static/less/*.less', ['build-less']);
});

// gulp命令默認啓動的就是default認爲,這裏將clean任務做爲依賴,也就是先執行一次clean任務,流程再繼續.
gulp.task('default',['clean'], function() {
  gulp.run('develop');
});

    我的感受若是使用過grunt那麼看這個徹底沒難度,即便什麼都沒用過也大概能知道是什麼意思.

    上面經過gulp實現了less解析,js和css文件的合併,壓縮,重命名,以及文件監聽,清理等.注意一下上面require進來的插件須要你本身手動npm安裝一下,具體的插件都有哪些以及對應安裝能夠看一下官網的plugin板塊,很簡單也很詳細.這裏僅列出一些經常使用的.

gulp-ruby-sass: 支持sass
gulp-minify-css: 壓縮css
gulp-jshint: 檢查js
gulp-uglify: 壓縮js
gulp-concat: 合併文件
gulp-rename: 重命名文件
gulp-htmlmin: 壓縮html
gulp-clean: 清空文件夾

    最後附上官網:http://gulpjs.com/

    若是發現任何問題,歡迎留言給我.