gulp作为流行的前端自动化构建工具，通过管道流的思想使我们更容易把控整个前端开发流程。本文简单记录一下我自己的gulp配置文件和自己学习和使用中收集的一部分资源，主要目的是为了自己在以后的开发过程中使用到gulp时，可以方便的查找一些基本配置和第三方插件。
如果想学习gulp的相关内容可以从下面第一小节关于gulp的一些资源bolg中查看一些网上的教程，如果你对gulp和webpack有疑问，想了解他们的区别也可以看一下这篇Gulp和Webpack对比
关于gulp的一些资源bolg
暂时只有这么多，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用的不多，持续更新中相关资源和配置信息。
