gulp

前言

　　之前一直在用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());
});

 参考

《项目部署缓存解决方案》

gulp.spritesmith