gulp作為流行的前端自動(dòng)化構(gòu)建工具，通過管道流的思想使我們更容易把控整個(gè)前端開發(fā)流程。本文簡單記錄一下我自己的gulp配置文件和自己學(xué)習(xí)和使用中收集的一部分資源，主要目的是為了自己在以后的開發(fā)過程中使用到gulp時(shí)，可以方便的查找一些基本配置和第三方插件。

如果想學(xué)習(xí)gulp的相關(guān)內(nèi)容可以從下面第一小節(jié)關(guān)于gulp的一些資源bolg中查看一些網(wǎng)上的教程，如果你對(duì)gulp和webpack有疑問，想了解他們的區(qū)別也可以看一下這篇Gulp和Webpack對(duì)比

關(guān)于gulp的一些資源bolg

1. Gulp中文網(wǎng)
2. gulp詳細(xì)入門教程
3. 深入理解gulp自動(dòng)化
4. gulp插件大全

暫時(shí)只有這么多，gulp只在一個(gè)項(xiàng)目中使用過，遇到問題通過這幾篇bolg也差不多都能解決。

gulp配置文件

//引入 gulp 工具
var gulp = require('gulp');
//引入 gulp-webserver 模塊
var webserver = require('gulp-webserver');
//引入 sass 模塊
var sass = require('gulp-sass');
//引入 minify 模塊
var minifyCSS = require('gulp-minify-css');
// 引入js 相關(guān)模塊
var named = require('vinyl-named');
var webpack = require('gulp-webpack');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
//引入 fs url模塊
var fs = require('fs');
var url = require('url');
//引入 rev revCollector 模塊
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
var revAppend = require('gulp-rev-append');
//引入 sequence 模塊
var sequence = require('gulp-sequence');
//引入 css前綴 模塊
var autoprefixer = require('gulp-autoprefixer');


//啟動(dòng)server
gulp.task('webserver',function(){
  gulp.src('./')
  .pipe(webserver({
    host:'localhost',
    port:80,
    //瀏覽器自動(dòng)刷新
    livereload:true,
    //顯示文件目錄
    directoryListing:{
      enable: true,
      path:'./'
    },
    //mock數(shù)據(jù)
    middleware:function(req,res,next){
      var urlObj = url.parse(req.url,true);
      switch (urlObj.pathname) {
        case '/pro/getPro':
          res.setHeader('Content-Type','application/json;charaset=utf-8');
          fs.readFile('./mock/list.json',function(err,data){
            //上面list.json路徑使用相對(duì)路徑，絕對(duì)路徑前臺(tái)無法獲取數(shù)據(jù)
            res.end(data);
          });
          return;
        case '/web/getUser':
          //....
          return;
      }
      next();
    }
  }));
});

//css 預(yù)處理
var cssFiles = [
  './src/styles/usage/page/index.scss'
]
gulp.task('sass',function(){
  gulp.src(cssFiles)
  .pipe(sass().on('error',sass.logError))
  // .pipe(minifyCSS())//壓縮css
  .pipe(gulp.dest('./build/prd/styles/'));
});

//js 模塊化，合并壓縮
var jsFiles = [
  './src/scripts/app.js'
];
gulp.task('packjs',function(){
  gulp.src(jsFiles)
  .pipe(named())
  .pipe(webpack({
    output:{//定義輸出文件名
      filename:'[name].js'//此處[name]通過named()獲取的
    },
    module:{
      loaders:[{
          test: /\.js$/,
          loader:'imports?define=>false'//不符合commandJS規(guī)范的不編譯
        },
        {
          test:/\.string$/,
          loader:'string'
        }
      ]
    }
  }))
  // .pipe(uglify().on('error',function(err){//壓縮js文件
  //   console.log('\x07',err.lineNumber,err.message);
  //   return this.end();
  // }))
  .pipe(gulp.dest('./build/prd/scripts/'));
});
//合并成一個(gè)js文件
gulp.task('concat',function(){
  gulp.src(jsFiles)
  .pipe(concat('all.js'))//合并后的文件名
  .pipe(gulp.dest('./build/prd/scripts/'));
});


var cssDistFiles = [
  './build/prd/styles/app.css'
];
var jsDistFiles = [
  './build/prd/scripts/app.js'
];

//css 添加前綴
gulp.task('autoprefixer',function(){
  gulp.src(cssDistFiles)
  .pipe(autoprefixer({
    browsers:['last 2 cersions','Android >= 4.0'],
    cascade: true,//是否美化屬性值 默認(rèn)：true 像這樣：
    //-webkit-transform: rotate(45deg);
    //        transform: rotate(45deg);
    remove:true//是否去掉不必要的前綴 默認(rèn)：true
  }))
  .pipe(gulp.dest('.build/ver/styles'))
});

// 版本號(hào)控制
gulp.task('ver',function(){
  gulp.src(cssDistFiles)
  .pipe(rev())//產(chǎn)生MD5碼
  .pipe(gulp.dest('./build/prd/styles/'))
  .pipe(rev.manifest())//產(chǎn)生版本信息的json文件
  .pipe(gulp.dest('./build/ver/styles/'));
  gulp.src(jsDistFiles)
  .pipe(rev())
  .pipe(gulp.dest('./build/prd/scripts/'))
  .pipe(rev.manifest())
  .pipe(gulp.dest('./build/ver/scripts/'));
})
gulp.task('html',function(){
  gulp.src(['./build/ver/**/*','./build/*.html'])
  .pipe(revCollector())
  .pipe(gulp.dest('./build/'));
})
gulp.task('min',function(callback){
  sequence(['copy-index','ver','html'])(callback);
});

// rev 版本控制
gulp.task('rev-append',function(){
  gulp.src('./build/*.html')
  .pipe(revAppend())
  .pipe(gulp.dest('build/html'));
})

//拷貝 index.html 到 build 文件夾
gulp.task('copy-index',function(){
  gulp.src('./index.html')
  .pipe(gulp.dest('./build/'));
});

//拷貝 images 到 build 文件夾
//
//注意：
//*.{jpg,png}    拷貝文件下的指定后綴的文件
//*.*           拷貝文件下的所有文件
//**/*          拷貝文件下所有文件（包括文件夾）
gulp.task('copy-images',function(){
  gulp.src('./images/**/*')
  .pipe(gulp.dest('./build/images/'));
})

/**
 * 配置 default 任務(wù)，執(zhí)行任務(wù)隊(duì)列
 * arg1[String]
 *
 */
 //偵測(cè) 文件變化，執(zhí)行相應(yīng)的任務(wù)
 gulp.task('watch',function(){
   gulp.watch('./index.html',['copy-index']);
   gulp.watch('./images/**/*',['copy-images']);
   gulp.watch('./src/styles/**/*',['sass','min']);
   gulp.watch('./src/scripts/**/*',['packjs','min']);
 });


gulp.task('default',['watch','webserver'],function(){
  console.log('所有任務(wù)隊(duì)列執(zhí)行完畢');
})

常用插件

gulp-webserver: server服務(wù)
gulp-sass: sass預(yù)編譯
gulp-less: less預(yù)編譯
gulp-autoprefixer: css廠商前綴
gulp-minify-css: css壓縮
gulp-webpack: webpack插件
vingl-named: 文件名索引查找插件
gulp-uglify: JS壓縮
gulp-rev: MD5碼
gulp-rev-collector: 版本控制
gulp-sequence: 序列執(zhí)行g(shù)ulptask(v3.9使用，v4.0則不需要了)
gulp-connect/gulp-connect-proxy: server代理

這里有一個(gè)gulp插件常用大匯總

小結(jié)

gulp用的不多，持續(xù)更新中相關(guān)資源和配置信息。