用gulp做一个略完整的前端打包工作

 

我们的官网要改版，会从以前的单一产品变成系列产品的官网，也就是现在的官网会是之后官网的一个子模块。

趁着这个机会，正好重新梳理了一下结构。加上罪恶之主管的一些要求，具体的需求如下：

分模块，每个模块都有独立的页面和静态文件，并将所有静态文件打在一个文件夹下，

一些常用变量可以进行替换，并可进行简单的页面动态生成，

生产环境打包与线上环境打包分开进行，

静态文件进行压缩合并，加md5以及cdn，

wap的静态文件与web端分离，wap的页面文件没有的继承web端的页面文件，有的要用它本身。

打包由grunt换成gulp。

 

整体的路径要像这样：

 

好了，那我们开始，首先当然是要安装gulp

npm install gulp --save-dev

然后你需要在你的环境里加一个gulpfile.js的文件。

然后我们为了高大上一点，给弄个简易的手册出来：

直接console.log输出就好了···

1. // 说明
2.  
3. gulp.task('help',function(){
4.  
5. console.log(' gulp build 文件打包');
6.  
7. console.log(' gulp watch 文件监控打包');
8.  
9. console.log(' gulp help gulp参数说明');
10.  
11. console.log(' gulp server 测试server');
12.  
13. console.log(' gulp -p 生产环境（默认生产环境）');
14.  
15. console.log(' gulp -d 开发环境');
16.  
17. console.log(' gulp -m <module> 部分模块打包（默认全部打包）');
18.  
19. });
20.  
21. /* 默认 */
22.  
23. gulp.task('default',function(){
24.  
25. gulp.start('help');
26.  
27. });

 

 

然后在你的控制台输入 gulp help或者 gulp build 就可以看到效果啦

然后我们要建立我们的build任务啦~

首先我们需要接收参数判断是开发打包还是生产打包。这里需要一个插件-- yargs,以及我们以后需要用到的工具类的插件：lodash（用于操作数组，当然它不仅仅是有这样的用处）和 path（用于写路径），用npm像上面那样加到你的环境中，

并且在你的gulpfile文件中声明它们：

1. /* 载入工具 */
2.  
3. var argv =require('yargs').argv,
4.  
5. _ =require('lodash'),
6.  
7. path =require('path');

 

 

记得之后载入的插件都需要这样声明。

我们新建一个叫build的task

//创建任务

1. gulp.task('build',function(){
2.  
4.  
5. });

 

 

在里面获取一下控制台输入的参数：

var evr = argv.p || !argv.d; //生产环境为true，开发环境为false，默认为true

var mod = argv.m || 'all';//模块明，默认为全部

 

这样你在控制台输入 gulp build -p 或者 gulp build -p -m t1这样就可以在里面获得参数啦。

 

然后我们需要进行一些打包的配置，先在写一个叫FileConfig的js文件，在里面写我们需要的文件配置信息：

1. "use strict";
2.  
3. var path =require('path');
4.  
5. /* 环境信息 */
6.  
7. var source ='source',
8.  
9. develop ='develop',
10.  
11. production ='production';
12.  
14.  
15. /* src路径 */
16.  
17. var src ={
18.  
19. tpl:'tpl/**',
20.  
21. css:'styles/**/*.less',
22.  
23. js:'lib/**/*.js',
24.  
25. html:'/**.html',
26.  
27. img:'images/**'
28.  
29. }
30.  
31. /* 模块信息 */
32.  
33. var modules ={
34.  
35. "t1":{
36.  
37. src:'t1',
38.  
39. dest:'t1',
40.  
41. name:'t1',
42.  
43. css_files:'styles/app.less'
44.  
45. },
46.  
47. "t2":{
48.  
49. src:'t2',
50.  
51. dest:'t2',
52.  
53. name:'t2'
54.  
55. },
56.  
57. "index":{
58.  
59. src:'index',
60.  
61. dest:'index',
62.  
63. name:'index'
64.  
65. },
66.  
67. "common":{
68.  
69. src:'common',
70.  
71. dest:'common',
72.  
73. name:'common'
74.  
75. }
76.  
77. };

 

 

然后在下面写个方法：

var FileConfig  = function () {

};

为了省事儿，直接在exports的时候就new了它···

module.exports = new FileConfig();

之后我们的一些配置信息全部从FileConfig这个方法里取，比如要模块信息的话：

FileConfig.prototype.modules = function () {

return modules;

};

之后的具体实现就不再啰嗦啦。

然后我们回到gulpfile.js文件下，声明他，之后会用到。

然后我们就要对html，css，js，img进行处理啦，这里会用到很多插件，一次性的列举出来，用法我在后面的注释中写了：

1. // 载入外挂
2.  
3. var gulp =require('gulp'),
4.  
5. browserify =require('browserify'),//这里用不上，管理js依赖的
6.  
7. source =require('vinyl-source-stream'),//同样这里用不上，和上面那个一起的
8.  
9. uglify =require('gulp-uglify'),//混淆js
10.  
11. clean =require('gulp-clean'),//清理文件
12.  
13. notify =require('gulp-notify'),//加控制台文字描述用的
14.  
15. buffer =require('vinyl-buffer'),
16.  
17. less =require('gulp-less'),//转换less用的
18.  
19. autoprefixer =require('gulp-autoprefixer'),//增加私有变量前缀
20.  
21. minifycss =require('gulp-minify-css'),//压缩
22.  
23. concat =require('gulp-concat'),//合并
24.  
25. fileinclude =require('gulp-file-include'),// include 文件用
26.  
27. template=require('gulp-template'),//替换变量以及动态html用
28.  
29. rename =require('gulp-rename'),//重命名
30.  
31. webserver =require('gulp-webserver'),//一个简单的server，用python的SimpleHttpServer会锁文件夹
32.  
33. imagemin =require('gulp-imagemin'),//图片压缩
34.  
35. gulpif =require('gulp-if'),//if判断，用来区别生产环境还是开发环境的
36.  
37. rev =require('gulp-rev'),//加MD5后缀
38.  
39. revReplace =require('gulp-rev-replace'),//替换引用的加了md5后缀的文件名，修改过，用来加cdn前缀
40.  
41. addsrc =require('gulp-add-src'),//pipeline中途添加文件夹，这里没有用到
42.  
43. del=require('del'),//也是个删除···
44.  
45. vinylPaths =require('vinyl-paths'),//操作pipe中文件路径的，加md5的时候用到了
46.  
47. runSequence =require('run-sequence');//控制task顺序

 

 

好啦，为了省事儿，写个对象字面量的方法集：

1. /* 打包方法 */
2.  
3. var teemoGulp ={
4.  
5. /* html打包 */
6.  
7. buildHtml :function(){},
8.  
9. /* css 打包 */
10.  
11. buildCss :function(){},
12.  
13. /* js打包 */
14.  
15. buildJs :function(){},
16.  
17. /* img打包 */
18.  
19. buildImg:function(){},
20.  
21. /* md5打包 */
22.  
23. buildMd5:function(){}
24.  
25. }

 

 

然后我们先说简单的，js打包，只需要初始路径和打包后路径就好啦：

1. /* js打包 */
2.  
3. buildJs :function(){
4.  
5. var src = arguments[0],dest = arguments[1], flag = arguments[2]
6.  
7. return gulp.src(src)
8.  
9. .pipe(gulp.dest(dest))
10.  
12.  
13. .pipe(uglify())
14.  
15. .pipe(rename({ suffix:'.min'}))
16.  
17. .pipe(gulp.dest(dest));
18.  
19. }

 

 

其中flag是之前的这个var evr = argv.p || !argv.d; //生产环境为true，开发环境为false，默认为true，这个比较简单，先把原始文件拷贝一份，在混淆压缩加.min后缀存一份。

img打包也很简单

1. /* img打包 */
2.  
3. buildImg:function(){
4.  
5. var src = arguments[0],dest = arguments[1], flag = arguments[2]
6.  
7. return gulp.src(src)
8.  
9. .pipe(gulpif(flag, imagemin()))
10.  
11. .pipe(gulp.dest(dest));
12.  
13. },

 

 

这里注意一下用到了 gulpif  根据环境来判定是否需要做 图片的压缩操作，因为这项操作比较费时间，开发环境下就不进行了。

 

css打包和html打包需要用到一些存好的变量，比如，如果我们需要每个页面的keywords是一样的：

<meta name="keywords" content="<%- keywords  %>"> 

我们就需要给这些变量一个配置的地方，这个和fileconfig是一样的，就不再说了。然后替换这些变量我们要用到 gulp-template,他继承了lodash的template的用法，也就是说，他可以识别js代码以及lodash的一些用法。

而当我们想增加一些文件时，就要用到gulp-file-include，或者你直接改lodash，让他支持html代码也可以，不过我不赞成这样做。

他的用法类似这样：

@@include('t1/tpl/menu.html')

整体的html打包代码是这样：

1. /* html打包 */
2.  
3. buildHtml :function(){
4.  
5. var src = arguments[0],dest = arguments[1], flag = arguments[2], options = arguments[3];
6.  
7. return gulp.src(src)
8.  
9. .pipe(fileinclude({
10.  
11. basepath:basePath.source
12.  
13. }))
14.  
15. .pipe(template(options,{
16.  
17. //interpolate: /\{-([\s\S]+?)-\}/g
18.  
19. }))
20.  
21. .pipe(gulp.dest(dest))
22.  
23. },

 

 

template默认的包裹变量的标示是 <%-%>当然你可以用 interpolate去配置这些。

好啦，方法我们写好了，下面是引用他们，我们需要在写一个方法，

1. var build = funciton (){
2.  
3. }

 

 

然后获取参数信息，并进行必要的配置，让他们可以按照我们想要的方式输出。

1. var evr = options.evr,mod = options.mod;
2.  
3. if(!modules[mod]) mod ='all';
4.  
5. /* 路径初始化 */
6.  
7. fileConfig.init(evr);
8.  
9. gulp.task('clean',function(){
10.  
11. if(mod ==='all'){
12.  
13. var clean_path = path.join( evr&& basePath.production || basePath.develop,'/');
14.  
15. return gulp.src([clean_path],{read:false})
16.  
17. .pipe(clean());
18.  
19. }
20.  
21. });
22.  
23. /* 获取要build的模块 */
24.  
25. var parts =[];
26.  
27. if(mod ==='all'){
28.  
29. parts = modules;
30.  
31. }else{
32.  
33. parts = _.pick(modules,mod);
34.  
35. }

 

 

之后我们循环遍历modules，建立相应的task

1. /* 分别对模块进行建立 */
2.  
3. var list =[];
4.  
5. for(var key in parts){
6.  
7. (function(key){//闭个包
8.  
9. var options = fileConfig.getModule(parts[key]);
10.  
11. /* js建立 */
12.  
13. gulp.task(key+'_js',function(){
14.  
15. return teemoGulp.buildJs(options.js.src,options.js.dest,evr);
16.  
17. });
18.  
20.  
21. /* css建立 */
22.  
23. gulp.task(key+'_css',function(){
24.  
25. return teemoGulp.buildCss(options.css.src,options.css.dest,evr, teemoConfig, options.css.filename);
26.  
27. });
28.  
30.  
31. /* html建立 */
32.  
33. gulp.task(key+'_html',function(){
34.  
35. return teemoGulp.buildHtml(options.html.src,options.html.dest,evr, teemoConfig);
36.  
37. });
38.  
40.  
41. /* img建立 */
42.  
43. gulp.task(key+'_img',function(){
44.  
45. return teemoGulp.buildImg(options.img.src,options.img.dest,evr);
46.  
47. });
48.  
50.  
51. /* 模块建立 */
52.  
53. gulp.task(key+'_module',function(cb){
54.  
55. runSequence(
56.  
57. [key+'_html',key+'_css',key+'_js',key+'_img'],
58.  
59. cb
60.  
61. );
62.  
63. });
64.  
65. })(key);
66.  
67. list.push(key+'_module');
68.  
69. }

 

 

 

这里用到了runSequence，它制定了task的执行顺序，因为如果不这样做，gulp默认是尽可能的并发执行，就有可能出现 clean没执行完，后续就开始执行的结果，这里注意吧task的回调放在runSequence的最后，保证内部的task执行完，再执行完本身。

当然如果比较简单的，你可以用task的第二个参数来控制task的执行顺序，这里不啰嗦啦。

然后把list返还给你最初的 build

1. var list =Build({
2.  
3. evr: evr,
4.  
5. mod: mod
6.  
7. });
8.  
9. var md5 = evr&&'md5'||[];
10.  
11. runSequence(
12.  
13. 'clean',list,'md5',cb
14.  
15. );

 

 

然后顺序执行即可。

之后到了md5的阶段，md5打包用rev插件即可，但是他默认的md5码是10个，你可以去修改gulp-rev\node_modules\rev-hash路径下的index.js文件，或者干脆做个变量在你的filegulp里配置，单我觉得没必要，就偷懒这里改一下啦。我喜欢用16位

在之后需要把这些加了md5的文件名字换给你引用这些文件的地方，就用到了 rev-replace。

rev在改路径时候会生成一个映射表，你用rev.manifest()即可储存在相应的目录里，然后rev-replace用这个文件替换掉你目标文件的路径即可。

至于cdn，也可以用revReplace里的prefix属性去加前缀，不过他只支持字符串，如果我们是有多个cdn域名的话，返回给他的可能是一个方法，所以这里我们需要改一下rep-replace文件。

找到gulp-rev-replace下的index.js文件。

在第36行加一句

var prefix = typeof options.prefix === 'function' ? options['prefix'](path.basename(file.path)) : options.prefix;

用prefix替换掉一下用到options.prefix的地方。你需要在第60行左右做同样的事情：

 

1. if(options.manifest){
2.  
3. // Read manifest file for the list of renames.
4.  
5. options.manifest.on('data',function(file){
6.  
7. var manifest = JSON.parse(file.contents.toString());
8.  
9. Object.keys(manifest).forEach(function(srcFile){
10.  
11. var prefix =typeof options.prefix ==='function'? options['prefix'](path.basename(srcFile)): options.prefix;//这句是加的
12.  
13. renames.push({
14.  
15. unreved: canonicalizeUri(srcFile),
16.  
17. reved: prefix + canonicalizeUri(manifest[srcFile]),
18.  
19. prefix: prefix //这句也是后加的
20.  
21. });
22.  
23. });
24.  
25. });
26.  
27. options.manifest.on('end', replaceContents);
28.  
29. }
30.  
31. else{
32.  
33. replaceContents();
34.  
35. }

 

 

 

而且你会发现在之后替换的时候也用到了这个，所以你要他当局部变量传进renames里去。想上面写的那样，因为下面一句用到了他：

1. if(rename.prefix){
2.  
3. contents = contents.split('/'+ rename.prefix).join(rename.prefix +'/');//这句也改了
4.  
5. }

 

 

它这替换方式也挺丧良心的···

这样，我们就可以往里面传方法了~

网上找个算cdn域名的方法：

1. /*生成hash */
2.  
3. hashFnv32a :function(str, asString, seed){
4.  
5. /*jshint bitwise:false */
6.  
7. var i, l,
8.  
9. hval =(seed ===undefined)?0x811c9dc5: seed;
10.  
11.  
12.  
13. for(i =0, l = str.length; i < l; i++){
14.  
15. hval ^= str.charCodeAt(i);
16.  
17. hval +=(hval <<1)+(hval <<4)+(hval <<7)+(hval <<8)+(hval <<24);
18.  
19. }
20.  
21. if( asString ){
22.  
23. // Convert to 8 digit hex string
24.  
25. return("0000000"+(hval >>>0).toString(16)).substr(-8);
26.  
27. }
28.  
29. return hval >>>0;
30.  
31. }

 

 

然后我们就可以进行md5加cdn的打包操作了：

1. /* md5打包 */
2.  
3. buildMd5:function(){
4.  
5. var vp = vinylPaths();
6.  
7. return gulp.src(path.join(basePath.production,'/**/{images,lib,styles}/**/*.*'))
8.  
9. .pipe(vp)
10.  
11. .pipe(rev())
12.  
13. .pipe(gulp.dest(basePath.production))
14.  
15. .pipe(rev.manifest())
16.  
17. .pipe(gulp.dest(basePath.production))
18.  
19. .on('end',function(){
20.  
21. var manifest = gulp.src(path.join(basePath.production,"/rev-manifest.json"));
22.  
23. gulp.src(path.join(basePath.production,'/**/*.{css,html}'))
24.  
25. .pipe(revReplace({
26.  
27. manifest: manifest,
28.  
29. prefix:function(f){
30.  
31. //cdn域名
32.  
33. var cdns =["s1","s2","s3","s4"];
34.  
36.  
37. var fileHashCode = teemoGulp.hashFnv32a(f);
38.  
39. if(fileHashCode <0){
40.  
41. fileHashCode =0;
42.  
43. }
44.  
45. var cdn = cdns[fileHashCode % cdns.length];
46.  
47. return'http://'+cdn+'.tm.sogoucdn.com/w/20141209'
48.  
49. }
50.  
51. }))
52.  
53. .pipe(gulp.dest(basePath.production))
54.  
55. .on('end',function(){
56.  
57. del(vp.paths);
58.  
59. del(path.join(basePath.production,"/rev-manifest.json"));
60.  
61. })
62.  
64.  
65. })
66.  
67. },

 

 

这样，整个的打包就完成了啦，压缩混淆合并加md5加cdn就全都搞定了。

至于加wap的文件夹，就在做一遍之前的操作即可，记得html要在做一遍覆盖操作，也就是三遍。

需要注意的是你改过的插件需要自己存到特定的包管理的地方去，或者存到自己的github上也行，配好ssh就能下。

最后你需要一个 测试的server，这个很好配：

1. /* server */
2.  
3. gulp.task('server',function(){
4.  
5. var evr = argv.p ||!argv.d;
6.  
7. gulp.src(evr?basePath.production:basePath.develop)
8.  
9. .pipe(webserver({
10.  
11. livereload:true,
12.  
13. directoryListing:true,
14.  
15. open:true
16.  
17. }));
18.  
19. });

 

 

不过如果你要测试cdn的话，就只能自己配nginx了，gulp-server上倒是能配代理，不过我没用过，应该也好用。

这样，所有的工作就完成了，这样做还是很方便的，比如，主管要求生产环境和开发环境的路径上要在家 一层路径，那么我们直接修改fileConfig里面的配置就可以：

1. /* 环境信息 */
2.  
3. var source ='source',
4.  
5. develop ='build/develop',
6.  
7. production ='build/production';