官网构建优化流程(6) - 把原先的grunt换成gulp构建

前言

通过 官网构建优化流程(2) - 旧版grunt打包构建流程 可以知道grunt打包构建的流程。
本篇主要是把之前官网的grunt构建换成扩展更好,可读性更强,速度更快的gulp构建。
目录结构如下:

1
当然还有一个就是 gulpfile.js 这边截图没有看到,其实这个文件很简单,就是引用上面的 gulp 目录, 其实就是 require gulp/index.js 这个文件。
具体 gulpfile.js :

1
2
'use strict';
require('./gulp');

没错,就是这么简单,所以接下来就分析 gulp 目录下的 gulp/index.js。

分析任务

index.js

直接看头文件 gulp/index.js

1
2
3
4
5
6
7
8
9
10
11
'use strict';
var fs = require('fs');
var config = require('./config');
var task = fs.readdirSync('./gulp/tasks/');
var moment = require('moment');
// 初始化版本号和对应的配置文件
global.buildVersion = moment().format("YYYYMMDDHHmm");
global.config = config(global.buildVersion);
task.forEach(function (task) {
require('./tasks/' + task);
});

主要确认了一个当前打包的版本号,一个是打包过程中,所用的一些配置文件,即 config.js

config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
'use strict';
module.exports = function(version) {
var config = {
"version": version,
"workDir": "workspace",
"jsDir": "js",
"cssDir": "css",
"lessDir": "less",
"imgDir": "img",
"langDir": "lang",
"tplDir": "tpl",
"htmlDir": "html",
"delFileList": ['build', 'build_gzip', ".tmp"],
"supportLangs": {
"en": {
"code": "en"
},
"ja": {
"code": "ja"
},
"it": {
"code": "it"
},
"de": {
"code": "de"
},
"pt-br": {
"code": "pt-BR"
},
"es-es": {
"code": "es-ES"
},
"fr": {
"code": "fr"
},
"zh-cn": {
"code": "zh-CN"
},
"pt-pt": {
"code": "pt-PT"
},
"ru": {
"code": "ru"
}
},
"htmlFiles": [
"html/legal/eula.html",
"html/index.html",
<!-- .... 这边省略了一堆的 html 文件 ... -->
"html/get.html"
],
"apiVersion": "p14",
"static_base_url": "//www.xxx.com"
};
config.buildDir = 'build/';
config.buildVersionDir = config.buildDir + version + "/";
// 匹配正则
var allDirs = [config.jsDir, config.cssDir, config.imgDir, config.langDir, config.tplDir];
config.REG_EXP_RESOURCE = new RegExp("(url\\(|['\"])(\\.{0,2}\/)+.*?((" + allDirs.join("|") + ")\/(.*?\\.(png|jpg|gif|css|js|ico|html|json)))(['\")])", 'g');
return config;
};

主要是一些目录和文件的配置, 即各个目录的位置。 而接下来的 gulp/tasks 目录下的各个文件就是一些gulp的任务。
其中一般打包的执行任务就是下面几个:

不同环境打包任务

测试环境模式

test.js => gulp d 即测试环境模式

1
2
3
4
5
6
7
8
'use strict';
var gulp = require('gulp');
var run_seq = require("run-sequence");
// 开发模式
gulp.task('d', cb => {
global.config.static_base_url = global.config.static_base_url.replace('//', '//test-');
run_seq("build", "zip", cb);
});

测试环境模式,并且上传到测试服务器并解压到对应目录

test_upload.js => gulp du 即测试环境模式,并且上传到测试服务器并解压到对应目录

1
2
3
4
5
'use strict';
var gulp = require('gulp');
var seq = require("gulp-sequence");
// 开发模式, 并上传到服务器并解压
gulp.task('du', seq("d", "upload", "shell"));

正式环境模式

release.js => gulp r 即正式环境模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
'use strict';
var gulp = require('gulp');
var replace = require("gulp-replace");
var seq = require("gulp-sequence");
// release 版本, 更新服务端接口地址和版本号
gulp.task('release_server_url', cb => {
return gulp.src(`${global.config.buildVersionDir}/${global.config.jsDir}/framework.min.js`)
// release url 修改
.pipe(replace(/(idUrl\s*:\s*['"]*)(.*?)(['"]*[,;\s])/, '$1https://id4.xxx.com/$3'))
.pipe(replace(/(payUrl\s*:\s*['"]*)(.*?)(['"]*[,;\s])/, '$1https://pay.xxx.com/$3'))
.pipe(replace(/(serverUrl\s*:\s*['"]*)(.*?)(['"]*[,;\s])/, '$1https://srv3.xxx.com/$3'))
// api 版本修改
.pipe(replace(/(apiVersion\s*:\s*['"]*)(.*?)(['"]*[,;\s])/, `$1${global.config.apiVersion}$3`))
.pipe(gulp.dest(`${global.config.buildVersionDir}/${global.config.jsDir}`));
});
gulp.task('r', seq("build", "release_server_url", "zip"));

正式环境模式,但是域名有变,即预发布环境

test_release.js => gulp n 即正式环境模式,但是域名有变,即预发布环境(测试服务器上的域名

1
2
3
4
5
6
7
8
'use strict';
var gulp = require('gulp');
var run_seq = require("run-sequence");
// 开发模式
gulp.task('n', cb => {
global.config.static_base_url = global.config.static_base_url.replace('//', '//new-');
run_seq("r", cb);
});

正式环境模式,即预发布环境, 并上传到测试服务器并解压到对应目录

test_release_upload.js => gulp nu 即正式环境模式,即预发布环境, 并上传到测试服务器并解压到对应目录

1
2
3
4
5
'use strict';
var gulp = require('gulp');
var seq = require("gulp-sequence");
// 正式地址的预发布环境, 并上传到服务器并解压
gulp.task('nu', seq("n", "upload", "shell"));

构建完之后的任务

以上这5个任务,除了打包时的处理build任务,之外,还有3个任务是打包后的逻辑

打包目录打成zip包

将打包目录打成zip包, 即 gulp zip

1
2
3
4
5
6
7
8
9
10
'use strict';
var gulp = require('gulp');
var zip = require('gulp-zip');
// 打成zip包
gulp.task('zip', function() {
var task_name = this.seq.slice(-1)[0] === "r" ? "release" : "test";
global.config.zipName = `${global.config.static_base_url.replace(/\//g,"").replace(/\./g,"_")}_${global.config.version}_${task_name}.zip`;
return gulp.src(`${global.config.buildDir}/**`)
.pipe(zip(global.config.zipName))
.pipe(gulp.dest('.'));});

将zip上传到对应的服务器

将打成的zip,上传到对应的服务器 gulp upload

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
'use strict';
var path = require('path');
var fs = require('fs');
var gulp = require('gulp');
var scp = require('gulp-scp2');
// 上传到测试服务器 (支持 test-www 和 new-www)
gulp.task('upload', cb => {
var auth;
if (fs.existsSync(path.join(__dirname, '../scp.auth.js'))) {
auth = require('../scp.auth.js');
}
if (!auth) {
// 要上传到服务器,需要提供 .ssh 文件做身份验证。
console.log('要上传到服务器,需要提供 .ssh 文件做身份验证。');
return;
}
global.config.server_folder_path = `/data/server/wwwroot/${global.config.static_base_url.replace('//', '')}/_history`;
return gulp.src(global.config.zipName)
.pipe(scp({
host: '59.xx.13.xx',
username: auth.username,
privateKey: auth.privateKey,
dest: global.config.server_folder_path
})).on('error', function(err) {
console.log(err);
});
});

将zip包解压缩到指定的目录 shell 任务

最后是将上传到服务器的zip包进行解压缩到指定的目录 shell 任务 gulp shell

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
'use strict';
var gulp = require('gulp');
var path = require('path');
var fs = require('fs');
var SSH2Shell = require ('ssh2shell');
// 上传到测试服务器后,进行一些shell操作,解压这个上传的zip包
gulp.task('shell', cb => {
var auth;
if (fs.existsSync(path.join(__dirname, '../scp.auth.js'))) {
auth = require('../scp.auth.js');
}
if (!auth) {
// 要上传到服务器,需要提供 .ssh 文件做身份验证。
console.log('要上传到服务器,需要提供 .ssh 文件做身份验证。');
return;
}
var host = {
server: {
host: '59.xx.13.xx',
userName: auth.username,
privateKey: auth.privateKey
},
commands: [`cd ${global.config.server_folder_path}`, `unzip -o -d .. ${global.config.zipName}`]
};
//Create a new instance passing in the host object
var SSH = new SSH2Shell(host);
//Use a callback function to process the full session text
var callback = function(sessionText){
console.log(sessionText);
cb();
};
//Start the process
SSH.connect(callback);
});

就执行两个指令,一个是定位到对应目录的history目录,然后解压对应的zip包到上级目录。
其中-o指令是忽略提示直接覆盖文件, -d 是指定要解压后的目录,这里就是上级目录 ..
而且 scp.auth.js 是关于服务器权限的认证文件,大约长这样:

1
2
3
4
5
var fs = require('fs');
module.exports = {
username: 'foo',
privateKey: fs.readFileSync('F:/xxx/id_rsa')
};

真正负责打包的build任务

真正打包的处理任务是 build 任务: tasks/build.js

1
2
3
4
'use strict';
var gulp = require('gulp');
var seq = require("gulp-sequence");
gulp.task('build', seq("clean", "less", "lang", "img", "useref", "tpl", "html", "i18n"));

上面有八个任务,即把打包分成8个步骤:

1 clean 任务,即先清理上次打包的残渣

tasks/clean.js:

1
2
3
4
5
6
7
'use strict';
var gulp = require('gulp');
var del = require('del');
// 清理
gulp.task('clean', cb => {
return del(global.config.delFileList, cb);
});

2 less 任务,即将workspace里面的less编译成css

tasks/less.js:

1
2
3
4
5
6
7
'use strict';
var gulp = require('gulp');
var less = require('gulp-less');
gulp.task('less', () => {
return gulp.src(`${global.config.workDir}/${global.config.lessDir}/*.less`)
.pipe(less())
.pipe(gulp.dest(`${global.config.workDir}/${global.config.cssDir}`));});

3 lang 任务,语言文件处理

即将workspace里面的lang目录放到build/目录里面, tasks/lang.js:

1
2
3
4
5
6
7
8
9
10
11
'use strict';
var gulp = require('gulp');
var uglify = require('gulp-uglify');
// lang 处理, 主要是复制
gulp.task('lang', cb => {
return gulp.src(`${global.config.workDir}/${global.config.langDir}/*.js`)
.pipe(uglify({
compress: { drop_console: true }
}))
.pipe(gulp.dest(`${global.config.buildVersionDir}/${global.config.langDir}`));
});

4 img 任务,图片处理

即将workspace里面的img目录放到build/目录里面, tasks/img.js:

1
2
3
4
5
6
7
'use strict';
var gulp = require('gulp');
// 针对图片进行处理,这边只进行文件迁移
gulp.task('img', function(){
return gulp.src(`${global.config.workDir}/${global.config.imgDir}/**/*`)
.pipe(gulp.dest(`${global.config.buildVersionDir}/${global.config.imgDir}`))
});

5 useref 任务,针对html进行处理

即对html文件引用的js和css进行压缩和合并(相当于grunt打包的usemin,不过更强大), tasks/useref.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
'use strict';
var gulp = require('gulp');
var gulpIf = require('gulp-if');
var minifyCSS = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var autoprefixer = require('gulp-autoprefixer');
var useref = require('gulp-useref');
// 针对html进行处理,即对html文件进行压缩和合并
gulp.task('useref', function(){
return gulp.src(global.config.htmlFiles.map(item => {
return `${global.config.workDir}/${item}`
}), {base: './html'})
.pipe(useref({searchPath: "."}))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', minifyCSS()))
.pipe(gulpIf('*.css', autoprefixer()))
// Uglifies only if it's a Javascript file
.pipe(gulpIf('*.js', uglify()))
// 这时候生成的html文件会在 build/<version>/workspace/html 里面,这个是临时的,后面要去掉
.pipe(gulp.dest(global.config.buildVersionDir))
});

6 tpl 任务,针对模板处理

先把html模板编译成 jst 模板,然后读取js,将jst模板的内容合并到js文件的前面, tasks/tpl.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
'use strict';
var gulp = require('gulp');
var jst = require("gulp-jst");
var uglify = require('gulp-uglify');
var concat_jst = require("gulp-concat-jst");
var seq = require("gulp-sequence");
var del = require('del');

// 这边针对html 模板进行处理,总共分两步
// 第一是将html模板编译成 jst 模板
// 然后读取js,将jst模板的内容合并到js文件的前面

// 第一是将html模板编译成 jst 模板
gulp.task('jst', function(){
return gulp.src(`${global.config.workDir}/${global.config.tplDir}/**/*.html`)
.pipe(jst())
.pipe(gulp.dest(`${global.config.buildDir}/jst`))
});
// 读取js文件,然后将需要的模板放置到js里面
gulp.task('concat_jst', function(){
return gulp.src(`${global.config.buildVersionDir}/${global.config.jsDir}/*.js`)
.pipe(concat_jst({
jst_path: `${global.config.buildDir}/jst/`,
jst_ext: ".js",
pattern: /getTemplate\s*\(\s*[\"']([\w/-]+)[\"']\s*\s*/g,
replace_text: "$1",
replace: function(jst, tmpFile){
return `this["ajst"] = this["ajst"] || {};this["ajst"]["${tmpFile}.html"] = ${jst}`;
}
}))
.pipe(uglify())
.pipe(gulp.dest(`${global.config.buildVersionDir}/${global.config.jsDir}`))
});
// 去掉生成的 jst 的临时文件夹
gulp.task('del_jst', cb => {
return del(`${global.config.buildDir}/jst/`, cb);
});
gulp.task('tpl', seq("jst", "concat_jst", "del_jst"));

7 html 任务,针对html文件进行处理

加上版本号和绝对地址,修改打包后的模板地址,和语言包的路径, tasks/html.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
'use strict';
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var seq = require("gulp-sequence");
var del = require('del');
var replace = require("gulp-replace");

// html 处理
// 之前在执行 useref 任务的时候,有在 build 目录下,生成 build/workspace/html 目录, 第一步先把这个html目录提到 build/<version>
gulp.task('html_move', cb => {
return gulp.src(`${global.config.buildDir}/${global.config.workDir}/${global.config.htmlDir}/**/*.html`)
.pipe(gulp.dest(`${global.config.buildVersionDir}/${global.config.htmlDir}`));
});
// 去掉那个临时目录
gulp.task('del_tmp_html', cb => {
return del(`${global.config.buildDir}/${global.config.workDir}`, cb);
});
// 给提出来的html文件,加上版本号,并设置绝对地址(包括html文件里面的图片,url,等等都要)
gulp.task('html_replace_src_url', cb => {
return gulp.src(`${global.config.buildVersionDir}/${global.config.htmlDir}/**/*.html`)
.pipe(replace(global.config.REG_EXP_RESOURCE, `$1/${global.config.version}/$3$7`))
.pipe(gulp.dest(`${global.config.buildVersionDir}/${global.config.htmlDir}`));
});
// 修改打包后的模板地址,和语言包的路径
gulp.task('html_replace_base_url', cb => {
return gulp.src(`${global.config.buildVersionDir}/${global.config.jsDir}/framework.min.js`)
// 模版地址修改
.pipe(replace(/(util\.setTemplateBaseUrl\(('|")).*?(('|")\))/, `$1/${global.config.version}$3`))
// 语言文件地址修改
.pipe(replace(/(buildLangURl\s*:\s*)('|")(\S*?)('|"),/, `$1$2/${global.config.version}/lang/$4,`))
// 修改资源路径
.pipe(replace(/(resourceUrl\s*:\s*['"]*)(.*?)(['"]*[,;\s])/, `$1/${global.config.version}/$3`))
.pipe(gulp.dest(`${global.config.buildVersionDir}/${global.config.jsDir}`));
});
gulp.task('html', seq("html_move", "del_tmp_html", "html_replace_src_url", "html_replace_base_url"));

8 i18n任务,主要是多语言静态化页面编译

tasks/i18n.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
'use strict';

var gulp = require('gulp');
var path = require("path");
var staticfy = require('gulp-staticfy');
var seq = require("gulp-sequence");
var _ = require("lodash");
var del = require('del');
var replace = require("gulp-replace");
var htmlmin = require("gulp-htmlmin");
// 这边还要有个默认的(默认都把英语加上去)
var langArr = _.keys(global.config.supportLangs);
langArr.indexOf("en") === 0 && langArr.push("en");
var langTaskListMap = {};

// i18n 处理,主要是多语言静态化页面编译

// 首先要把tpl模板拷贝过来
gulp.task('move_tpl', function(){
return gulp.src(`${global.config.workDir}/${global.config.tplDir}/**/*`)
.pipe(gulp.dest(`${global.config.buildVersionDir}/${global.config.tplDir}`))
});
// 批量注册任务
langArr.forEach(lang => {
langTaskListMap[`${lang}-staticfy`] = gulp.task(`${lang}-staticfy`, function() {
// 这边要指定路径,dest才会复制目录结构
// 这边一定要return,不然就会变成异步,而不会同步
return gulp.src(`${global.config.buildVersionDir}/${global.config.htmlDir}/**/*.html`)
.pipe(staticfy({
server_url: path.resolve(global.config.buildDir),
query_string: `lang=${lang}`
}))
// 接下来就是各种替换
// 预编译要跟进对应的语言,对 a 标签的相对路径进行替换
.pipe(replace(/(<a.*?href=['"])(\/.*?)(['"])/gi, `$1/${lang}$2$3`))
// 消除 jsonp 请求产生的 script 标签
.pipe(replace(/<script.*async="".*?<\/script>/g, ''))
// 消除 首页加载Google字体请求产生的link标签
.pipe(replace(/<link.*http:\/\/fonts.googleapis.com.*?>/, ''))
// 清理首页的图片,重设为隐藏
.pipe(replace(/(<img class="item-preload.*)style="display:\s*inline.*"(>)/g, '$1$2'))
// 清理邮件验证页,重设为隐藏
.pipe(replace(/"(item-verify-send)"/, '"$1 i-hide"'))
// signin 重置链接地址
.pipe(replace(/(href=".*signin\/)\?.*(")/, '$1$2'))
// 重置 header 右侧的 item-actions 和 item-profile 的状态
.pipe(replace(/"(item-actions|item-profile)"/, '"$1 i-hide"'))
// 去掉指定的要删除的脚本
.pipe(replace(/<script.*id="removeScript".*?<\/script>/g, ''))
// 去掉自动下载的iframe中的url
.pipe(replace(/(<iframe id="downloadFrame".*?)(src=")(\S+)(".*><\/iframe>)/g, '$1$2$4'))
// 去掉首页 Facebook twitter g+ 的 addthis widget 中间代码
.pipe(replace(/<div.*id="_atssh".*?<\/iframe><\/div>/g, ''))
// 这条规则要特别注意(用于首页清除addthis的样式),很容易请到别的页面,所以尽量不要在页面内加上style标签
.pipe(replace(/<style.*type="text\/css".*?<\/style><\/head>/g, '</head>'))
// 最后把对应的语言文件再加到里面去
.pipe(replace(/<\/head>/, `<script src="/${global.config.version}/lang/${global.config.supportLangs[lang].code || lang}.js"></script></head>`))
.pipe(gulp.dest(`${global.config.buildDir}/${lang}`));
});
});
// 接下来把 英语 的文件复制一份,往上提一份,当做默认路径的语言
gulp.task('copy_and_move_en', function(){
return gulp.src(`${global.config.buildDir}/en/**/*`)
.pipe(gulp.dest(global.config.buildDir))
});
// 预编译之后,把debug模式去掉
gulp.task('change_debug_mode', cb => {
return gulp.src(`${global.config.buildVersionDir}/${global.config.jsDir}/framework.min.js`)
// 模版地址修改
.pipe(replace(/(Airdroid_isDebug\s*:\s*['"]*)(.*?)(['"]*[,;\s])/, '$1false$3'))
.pipe(gulp.dest(`${global.config.buildVersionDir}/${global.config.jsDir}`));
});
// 如果都已经静态化编译成功了,那么就把原来的那一份html目录 和 tpl 目录去掉
gulp.task('del_staticfy_file', cb => {
return del([
`${global.config.buildVersionDir}/${global.config.htmlDir}`,
`${global.config.buildVersionDir}/${global.config.tplDir}`
], cb);
});
// 接下来把html进行一些压缩优化
gulp.task('htmlmin', cb => {
return gulp.src(`${global.config.buildDir}/**/*.html`)
.pipe(htmlmin({
// 去掉空格,压缩一行显示
//collapseWhitespace: true,
// 去掉注释
removeComments: true
}))
.pipe(gulp.dest(global.config.buildDir));
});
// 接下来遍历 html 文件,为资源添加完整的 静态地址,包括图片
gulp.task('release_static_url', cb => {
return gulp.src(`${global.config.buildDir}/**/*.html`)
// $3 匹配的是资源路径
.pipe(replace(global.config.REG_EXP_RESOURCE, `$1${global.config.static_base_url}/${global.config.version}/$3$7`))
// $1 匹配的是引号
// $3 匹配的是资源路径
.pipe(replace(new RegExp(`('|\")(\\.{0,2}\/)+((${global.config.langDir})\/*.*)('|\")`, 'g'), `$1${global.config.static_base_url}/${global.config.version}/$3$1`))
.pipe(gulp.dest(global.config.buildDir));
});

gulp.task('staticfy', seq.apply(null,_.keys(langTaskListMap)));
gulp.task('i18n', seq("move_tpl", "staticfy", "copy_and_move_en", "change_debug_mode", "del_staticfy_file", "htmlmin", "release_static_url"));

总结

所以大概改成 gulp 构建之后就是这样了,后面测试了一下,无论是整个结构还是打包的速度,都比grunt构建还要快,而且更容易维护,因为他是一个一个任务分开的,不像grunt那样全部写在一块。每次看代码,都要找半天。
当然,这个虽然已经可以work了,并且测了一下,可以正常打包,并且会自动上传到服务器,并进行解压覆盖了,看起来非常完美 o( ̄︶ ̄)o

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
[14:25:44] Starting 'd'...
[14:25:44] Starting 'build'...
[14:25:44] Starting 'clean'...
[14:25:45] Finished 'clean' after 306 ms
[14:25:45] Starting 'less'...
[14:25:47] Finished 'less' after 2.5 s
[14:25:47] Starting 'lang'...
[14:25:51] Finished 'lang' after 4.07 s
[14:25:51] Starting 'img'...
[14:25:51] Finished 'img' after 236 ms
[14:25:51] Starting 'font'...
[14:25:51] Finished 'font' after 6.77 ms
[14:25:51] Starting 'useref'...
[14:29:07] Finished 'useref' after 3.25 min
[14:29:07] Starting 'tpl'...
[14:29:07] Starting 'jst'...
[14:29:07] Finished 'jst' after 223 ms
[14:29:07] Starting 'concat_jst'...
[14:29:20] Finished 'concat_jst' after 13 s
[14:29:20] Starting 'del_jst'...
[14:29:20] Finished 'del_jst' after 61 ms
[14:29:20] Finished 'tpl' after 13 s
[14:29:20] Starting 'html'...
[14:29:20] Starting 'html_move'...
[14:29:20] Finished 'html_move' after 54 ms
[14:29:20] Starting 'del_tmp_html'...
[14:29:20] Finished 'del_tmp_html' after 16 ms
[14:29:20] Starting 'html_replace_src_url'...
[14:29:20] Finished 'html_replace_src_url' after 53 ms
[14:29:20] Starting 'html_replace_base_url'...
[14:29:20] Finished 'html_replace_base_url' after 15 ms
[14:29:20] Finished 'html' after 141 ms
[14:29:20] Starting 'i18n'...
[14:29:20] Starting 'move_tpl'...
[14:29:20] Finished 'move_tpl' after 138 ms
[14:29:20] Starting 'staticfy'...
[14:29:20] Starting 'en-staticfy'...
201809131425/html/404.html loading ...
201809131425/html/aboutUs.html loading ...

1
但是这个其实不是最终版本,后面还会遇到一些问题。


系列文章
官网构建优化流程(1) - 简介
官网构建优化流程(2) - 旧版grunt打包构建流程
官网构建优化流程(3) - grunt静态页面预编译插件 grunt-staticfy
官网构建优化流程(4) - gulp 静态页面预编译插件 gulp-staticfy
官网构建优化流程(5) - gulp jst模板联合组件 gulp-concat-js
官网构建优化流程(6) - 把原先的grunt换成gulp构建
官网构建优化流程(7) - 官网的多语言跳转规则
官网构建优化流程(8) - gulp打包构建在ie8会报错
官网构建优化流程(9) - windows 下打zip包到服务器没有执行权限的问题
官网构建优化流程(10) - gulp-staticfy进行多语言预编译的时候,会随机出现乱码
官网构建优化流程(11) - 部署转为用Jenkins自动化部署
官网构建优化流程(12) - 优化加载速度,资源分开存放
官网构建优化流程(13) - 字体文件的跨域问题 和 S3/CloudFront/COS 设置跨域CORS