我的gulp使用

gulp作为流行的前端自动化构建工具，通过管道流的思想使我们更容易把控整个前端开发流程。本文简单记录一下我自己的gulp配置文件和自己学习和使用中收集的一部分资源，主要目的是为了自己在以后的开发过程中使用到gulp时，可以方便的查找一些基本配置和第三方插件。

如果想学习gulp的相关内容可以从下面第一小节关于gulp的一些资源bolg中查看一些网上的教程，如果你对gulp和webpack有疑问，想了解他们的区别也可以看一下这篇Gulp和Webpack对比

关于gulp的一些资源bolg

1. Gulp中文网
2. gulp详细入门教程
3. 深入理解gulp自动化
4. gulp插件大全

暂时只有这么多，gulp只在一个项目中使用过，遇到问题通过这几篇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 相关模块
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');


//启动server
gulp.task('webserver',function(){
  gulp.src('./')
  .pipe(webserver({
    host:'localhost',
    port:80,
    //浏览器自动刷新
    livereload:true,
    //显示文件目录
    directoryListing:{
      enable: true,
      path:'./'
    },
    //mock数据
    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路径使用相对路径，绝对路径前台无法获取数据
            res.end(data);
          });
          return;
        case '/web/getUser':
          //....
          return;
      }
      next();
    }
  }));
});

//css 预处理
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规范的不编译
        },
        {
          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/'));
});
//合并成一个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,//是否美化属性值 默认：true 像这样：
    //-webkit-transform: rotate(45deg);
    //        transform: rotate(45deg);
    remove:true//是否去掉不必要的前缀 默认：true
  }))
  .pipe(gulp.dest('.build/ver/styles'))
});

// 版本号控制
gulp.task('ver',function(){
  gulp.src(cssDistFiles)
  .pipe(rev())//产生MD5码
  .pipe(gulp.dest('./build/prd/styles/'))
  .pipe(rev.manifest())//产生版本信息的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 任务，执行任务队列
 * arg1[String]
 *
 */
 //侦测 文件变化，执行相应的任务
 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('所有任务队列执行完毕');
})

常用插件

gulp-webserver: server服务
gulp-sass: sass预编译
gulp-less: less预编译
gulp-autoprefixer: css厂商前缀
gulp-minify-css: css压缩
gulp-webpack: webpack插件
vingl-named: 文件名索引查找插件
gulp-uglify: JS压缩
gulp-rev: MD5码
gulp-rev-collector: 版本控制
gulp-sequence: 序列执行gulptask(v3.9使用，v4.0则不需要了)
gulp-connect/gulp-connect-proxy: server代理

这里有一个gulp插件常用大汇总

小结

gulp用的不多，持续更新中相关资源和配置信息。