因最近開發幾個ionic1項目,默認配置的gulp,對gulp已經非常熟悉,用實例來寫一點教程,如有錯誤歡迎指正。

gulp作為自動化構建工具，雖然與webpack是屬于兩種不同類的工具，原理不同（webpack是模塊化方案工具，gulp是自動化代替手工操作的工具），但都可以用來處理文件的編譯壓縮打包等工作，單純從使用上來說，gulp配置更加方便快捷，代碼更加簡單易上手。

本項目中gulp執行順序:

1.清除www項目

2.html壓縮

3.復制圖標文件

4.Js:ES6編譯=>刪除console(alert,debug)=>壓縮=>合并=>混淆

5.合并壓縮第三方庫

6.圖片:壓縮

7.css:less編譯=>合并=>刪除重復樣式=>添加MD5后綴

一.安裝gulp

1.全局安裝gulp

可先安裝cnpm,用cnpm替代npm,安裝速度快

npm install -g gulp

2.項目中安裝gulp,寫進項目package.json的依賴中

npm install --save-dev gulp

二.gulp主要API

1.gulp.task()定義任務

gulp.task(name,[deps, deps], fn)

name 為任務名,
deps 是當前定義的任務需要依賴的其他任務，為一個數組。當前定義的任務會在所有依賴的任務執行完畢后才開始執行。如果沒有依賴，則可省略這個參數.
fn 為任務函數，我們把任務要執行的代碼都寫在里面。該參數也是可選的。

2.gulp.src()找你需要操作的文件

3.gulp.dest()要生成的文件的位置

4.gulp.watch()用來監視文件的變化，當文件發生變化后，我們可以利用它來執行相應的任務

gulp.watch(同gulp.src()類似的文件路徑, tasks)

tasks為gulp.task()中定義的任務名，為數組

5.pipe()

用于傳遞文件.

三.整個項目的實例如下

在gulpfile.js文件中修改

var gulp = require('gulp'),
  cleanCss = require('gulp-clean-css'),         //壓縮清理css
  rename = require('gulp-rename'),              //重命名,項目中沒有用到
  babel = require('gulp-babel'),                //編譯ES6
  plumber = require('gulp-plumber'),            //捕獲處理任務中的錯誤
  minifyHtml = require('gulp-minify-html'),     //壓縮html
  less = require('gulp-less'),                  //獲取gulp-less模塊
  uglify = require('gulp-uglify'),              //js文件壓縮混淆
  concat = require('gulp-concat'),              //合并文件
  imagemin = require('gulp-imagemin'),          //圖片壓縮
  clean = require('gulp-clean'),                //刪除項目
  rev = require('gulp-rev'),                    //- 對文件名加MD5后綴
  revCollector = require('gulp-rev-collector'), //- 路徑替換
  gulpSequence = require('gulp-sequence'),      //同步執行
  stripDebug = require('gulp-strip-debug');     //刪除console,alert等

  var paths = {
  es6: ['./src/**/*.js', '!./src/common/lib/*.js'],
  vendor: ['./src/common/lib/*.js', '!./src/common/lib/ionic.bundle.js', '!./src/common/lib/less.min.js'],
  less: ['./src/**/*.less'],
  css: ['./src/common/lib/ionic.min.css', './rev/style.min.css'],
  html: ['./src/**/*.html'],
  img: ['./src/**/*.png', './src/**/*.jpg', './src/**/*.gif', ],
  copyFonts: ['./src/common/css/fonts/*'],
};

//發布生產環境用 gulp
gulp.task('default', gulpSequence('clean', 'minify-html', 'copyFonts',
  'babel', 'concatVendor', 'minify-img', 'revCss2'));

//平常只需更新html、css、js,用gulp test
gulp.task('test', gulpSequence('minify-html',
  'babel', 'revCss2'));

// 1.清空
gulp.task('clean', function() {
  return gulp.src(['./www'])
    .pipe(clean());
});

//2.壓縮html
gulp.task('minify-html', function() {
  gulp.src(paths.html) // 要壓縮的html文件
    .pipe(minifyHtml()) //壓縮
    .pipe(gulp.dest('./www'));
});

// 3.復制圖標文件
gulp.task('copyFonts', function() {
  return gulp.src(paths.copyFonts)
    .pipe(gulp.dest('./www/css/fonts'));
});

//4.Js:ES6編譯=>刪除console(alert,debug)=>壓縮=>合并=>混淆
gulp.task('babel', function() {
  return gulp.src(paths.es6)
    .pipe(plumber())
    .pipe(babel({ presets: ['env'] }))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(concat('build.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./www'));
});

//5.合并壓縮第三方庫
gulp.task('concatVendor', function() {
  return gulp.src(paths.vendor)
    .pipe(concat('vendor.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./www'));
});

//6.圖片:壓縮
gulp.task('minify-img', function() {
  gulp.src(paths.img)
    .pipe(imagemin())
    .pipe(gulp.dest('./www'));
});

//7.css:less編譯=>合并=>刪除重復樣式=>添加MD5后綴
gulp.task('less', function() {
  return gulp.src(paths.less)
    .pipe(less())
    .pipe(concat('style.min.css'))
    .pipe(cleanCss({
      level: 2  //level2可合并去重,https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-api
    }))
    .pipe(gulp.dest('./rev'));
});

gulp.task('concatCss', ['less'], function() {
  return gulp.src(paths.css)
    .pipe(concat('style.min.css'))
    .pipe(rev())
    .pipe(gulp.dest('./www/css'))
    .pipe(rev.manifest('rev-css2-manifest.json')) //- 生成一個rev-manifest.json
    .pipe(gulp.dest('./rev'));
});

gulp.task('revCss2', ['concatCss'], function() {
  gulp.src(['./rev/rev-css2-manifest.json', './www/*.html']) //- 讀取 rev-manifest.json 文件以及需要進行css名替換的文件
    .pipe(revCollector({ replaceReved: true })) //- 執行文件內css名的替換
    .pipe(gulp.dest('./www')); //- 替換后的文件輸出的目錄
});


//自動編譯,不喜歡自動編譯,關掉了
// gulp.watch(paths.es6, ['babel']);
// gulp.watch(paths.less, ['less']);
/*gulp.task('watch', ['babel','less'], function() {
  // gulp.watch(paths.sass, ['sass']);
  gulp.watch(paths.es6, ['babel']);
  gulp.watch(paths.less, ['less']);
});*/

四.打包前后對比

生產環境共引入以下文件

<!-- 生產環境 -->
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<script src="vendor.min.js"></script>
<script src="build.min.js"></script>
<script src="cordova.js"></script>

1.css處理:

less文件大小

less編譯成css文件大小

合并壓縮后的css

2.業務代碼js源文件:

業務js文件

業務js文件經gulp處理后

3.第三方庫文件:

第三方庫文件大小

第三方庫合并壓縮后

4.圖片壓縮:21%;

圖片壓縮后

打包前后文件夾對比