gulp

Posted 2020-09-30 leaf930814

前言

　　之前一直在用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