标签：ref name key base 打包 文件压缩 生产环境 根据 控制
前言
之前一直在用gulp。后面也引入的webpack，两个构建工具都在使用。回头看看自己写的配置文件，觉得还是有必要记录一下。
一、gulp 和grunt的区别
Grunt主要是以文件为媒介来运行它的工作流的，比如在Grunt中执行完一项任务后，会把结果写入到一个临时文件中，然后可以在这个临时文件内容的基础上执行其它任务，执行完成后又把结果写入到临时文件中，然后又以这个为基础继续执行其它任务...就这样反复下去。而在Gulp中，使用的是Nodejs中的stream(流)，首先获取到需要的stream，然后可以通过stream的pipe()方法把流导入到你想要的地方，比如Gulp的插件中，经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中。所以Gulp是以stream为媒介的，它不需要频繁的生成临时文件，这也是Gulp的速度比Grunt快的一个原因。
二、gulp和webpack
gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
总得来说：gulp与webpack上是互补的，还是可替换的，取决于你项目的需求
三、主要几个方法
gulp.task(name, fn)这个你应经见过了
gulp.run(tasks...)尽可能多的并行运行多个task
gulp.watch(glob, fn)当glob内容发生改变时，执行fn
gulp.src(glob) 返回一个可读的stream,(获取我们想要处理的文件流)
gulp.dest(glob)返回一个可写的stream（把文件写入到指定为文件夹）
比如：
gulp.src(‘script/*‘) //有通配符出现的那部分路径为 *
//假设匹配到的文件为script/inex.js
.pipe(gulp.dest(‘dist‘)); //则最后生成的文件路径为 dist/index.js
四、常用模块
var gulp = require(‘gulp‘),
fs = require(‘fs‘),//文件读取
clean = require(‘gulp-clean‘),//避免在在多次构建（rev）的时候出现多个版本号
watch = require(‘gulp-watch‘),
connect = require(‘gulp-connect‘),//启动一个web服务器。
uglify = require(‘gulp-uglify‘), //js压缩
miniCss = require(‘gulp-minify-css‘),//css压缩
jshint = require(‘gulp-jshint‘);//js检查
less = require(‘gulp-less‘),//编译less
rev = require(‘gulp-rev‘),//增加版本号，根据静态资源内容，生成md5签名，，给打包的文件加上MD5签名同时生成一个json用来保存文件名路径对应关系。
revCollector = require(‘gulp-rev-collector‘);//revCollector 就是根据文件名对应关系，遍历所有html，替换文件命名
spritesmith=require(‘gulp.spritesmith‘); //制作雪碧图
五、举例demo
给页面引用js的路径加上版本号，处理缓存问题，形如：
//任务处理文件的路径
var src = {
js:[
fs.realpathSync(‘../src/js‘) + ‘/**/*.js‘
],
css: [
fs.realpathSync(‘../src/css‘) + ‘/**/*.less‘
],
img: [
‘../src/img/**‘
],
base:‘../src/‘
},
dist = {
jscss:[
fs.realpathSync(‘../src/js‘) + ‘/**/*.js‘,
fs.realpathSync(‘../src/css‘) + ‘/**/*.css‘
]
},
output = ‘../dist‘;
//js任务
gulp.task(‘js‘,function(){
return gulp.src(src.js, {base: src.base })
.pipe( gulpif(isRelease, uglify()) ) //如果执行的压缩
.pipe(rev())//设置hash key
.pipe(gulp.dest(output))
.pipe(rev.manifest())//设置hash key json 文件原名
.pipe(gulp.dest(‘./rev/‘))
});
//rev任务
gulp.task(‘rev‘, function(){
return gulp.src([‘./rev/*.json‘,‘../html/*.html‘])//参数[0]是js和css任务生成的文件名对应关系的json 参数[1]所有html文件
.pipe(revCollector({
replaceReved:true,
}))
.pipe(gulp.dest(‘../html/‘));
});
制作雪碧图
var gulp=require(‘gulp‘),
spritesmith=require(‘gulp.spritesmith‘);
gulp.task(‘sprite‘,function(){
gulp.src(‘./src/image/*.png‘)
.pipe(spritesmith({
imgName:‘sprite.png‘,
cssName:‘css/index.css‘,
padding:5,
algorithm:‘binary-tree‘
}))
.pipe(gulp.dest(‘dist/‘)) //输出目录
})
gulp.task("default", ["sprite"]);
参考
标签：ref name key base 打包 文件压缩 生产环境 根据 控制
原文地址：http://www.cnblogs.com/leaf930814/p/7226799.html
