前言
之前一直在用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
5.1给页面引用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/'));
});
5.2制作雪碧图
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"]);
5.3 gulp-font-spider
之前有采用第三方字体库，如下：
/*声明 WebFont*/
@font-face {
font-family: 'YourWebFontName';
src: url('../font/YourWebFontName.eot');
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
.home h1, .demo > .test {
font-family: 'YourWebFontName';
}
后面发现体积不是一般的大啊，后面百度找到了一款神器。
简单来说，font-spider的工作原理是这样的： 中文字体文件之所以很大，是因为英语只有26个字母，而中文的汉字有好多好多个，所以文件相对来说就会大很多。font-spider就是从你的css文件的@font-face入手，去查找字体，然后遍历你的html文件，从css和html文件中就可以找到那些你实际上使用的文字，取出这些文字之后，再将他们单独变成字体文件，这样，就去掉了绝大部分其实用不到的文字，体积也会缩小很多很多。
//font任务，从app复制字体到dist
gulp.task('font', function() {
return gulp.src("app/fonts/**/*")
.pipe(plumber())
.pipe(gulp.dest("dist/static/fonts"))
.pipe(browserSync.stream());
});
// fontspider任务，在dist中压缩字体文件并替换。成功后会发现dist/fonts中的字体文件比app/fonts中的小了很多
gulp.task('fontspider', function() {
return gulp.src('dist/*.html') //只要告诉它html文件所在的文件夹就可以了，超方便
.pipe(fontSpider());
});
参考