[JavaScript] gulp自动化打包及静态文件自动添加版本号 | IT知识库
-& 正文阅读
[JavaScript]gulp自动化打包及静态文件自动添加版本号
gulp自动化打包及静态文件自动添加版本号
前端自动化打包发布已是一种常态，尤其在移动端，测试过程中静态资源的缓存是件很头疼的事情，有时候明明处理的bug测试还是存在，其实就是缓存惹的祸，手机不比pc浏览器，清理缓存还是有点麻烦的。所以自动化实现静态资源的版本更新才是正道。实际开发过程中，我们常用到的功能包括：1、目标路径的清除；2、静态资源复制到目标路径；3、css文件的合并与压缩；4、js文件的合并与压缩；5、根据文件的变化添加版本号；第1、2、3、4几个功能倒是很好解决，今天主要说说gulp实现静态资源自动添加版本号；搜了不少资料，发现都不是想要的，我希望实现的效果是：
&script type="text/javascript" src="../../scripts/app_common.js?v=51921f3"&&/script&但是大部分插件实现的效果类似下面，而且看起来很麻烦
&script type="text/javascript" src="../../scripts/app_common-51921f3.js"&&/script&这样会导致一个问题，每次都会生成新的文件，而且必须同时修改html的引用。下面说说我的解决方案：这是目录结构，不同的结构可能在处理上会有些不同。
用到的gulp插件是：gulp-asset-rev先下载插件： npm install --save-dev&gulp-asset-revExample:
var gulp = require('gulp');
var assetRev = require('gulp-asset-rev');
gulp.task('rev',['revCss'],function() {
gulp.src("./test/test.html")
.pipe(assetRev())
.pipe(gulp.dest('./dest'));
gulp.task('revCss',function () {
return gulp.src('./test/styles/test.css')
.pipe(assetRev())
.pipe(gulp.dest('./dest/styles/'))
gulp.task('default',['rev']);使用前：
&html lang="en"&
&meta charset="utf-8"/&
&title&&/title&
&link rel="stylesheet" href="./styles/test.css" type="text/css" /&
&img src="./images/test.png" /&
&script src="./scripts/test.js" type="text/javascript"&&/script&
&/html&使用后：
&html lang="en"&
&meta charset="utf-8"/&
&title&&/title&
&link rel="stylesheet" href="./styles/test_0ede2cf.css" type="text/css" /&
&img src="./images/test_25cf2b4.png" /&
&script src="./scripts/test_8ced4e6.js" type="text/javascript"&&/script&
&/html&很显然它把整个文件名都给改了，不符合我们之前只在文件后面添加版本号参数的需求。我们可以在源文件中做点手脚。找到node_modules --& gulp-assets-rev --&index.js 修改为如下代码：
var verStr = (options.verConnecter || "") + md5;
src=src+"?v="+verS实际上MD5人家都已经算好了，最后只是拼凑了显示方式，所以我们可以按照自己的需求去组合就行了。so easy~完整配置如下：package.json
"name": "StagingFinancial",
"version": "0.0.1",
"description": "Pages for Staging Financial App",
"devDependencies": {
"browser-sync": "*",
"del": "*",
"gulp": "*",
"gulp-asset-rev": "*",
"gulp-concat": "*",
"gulp-if": "*",
"gulp-jshint": "*",
"gulp-load-plugins": "*",
"gulp-minify-css": "^*",
"gulp-minify-html": "*",
"gulp-sass": "*",
"gulp-size": "*",
"gulp-sourcemaps": "*",
"gulp-uglify": "*",
"gulp-useref": "*",
"run-sequence": "*"
"engines": {
"node": "&=0.10.0"
"private": true
}都是些常用的插件，gulp总共就5个API接口，但是插件是异常强大，可根据需求自己配置。
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var del = require('del');
var runSequence = require('run-sequence');
var assetRev = require('gulp-asset-rev');
function gulpScripts(app_name) {
return gulp.src([app_name + '/**/*.js']) //源文件下的所有js
.pipe(assetRev())
//配置版本号
.pipe($.uglify())
//进行压缩，如果需要合并也可加上合并的代码
.pipe(gulp.dest(app_name + "_dist"));//复制到目标文件路径
function gulpStyles(app_name) {
return gulp.src([app_name + '/**/*.css'])
.pipe(assetRev())
.pipe($.minifyCss())
.pipe(gulp.dest(app_name + "_dist"));
function gulpImages(app_name) {
return gulp.src([app_name + '/**/images/*'])
.pipe(gulp.dest(app_name + "_dist"));
//复制所有图片到目标文件夹
function gulpRevHtml(app_name) {
gulp.src([app_name + '/*.html', app_name + '/**/*.html'])
//源文件下面是所有html
.pipe(assetRev())
//配置引用的js和css文件，需要的话也可以用minifyHtml压缩html文件
.pipe(gulp.dest(app_name + '_dist'));
//打包到目标文件夹路径下面
gulp.task('app_scripts', function(){
gulpScripts("app");
gulp.task('app_styles', function(){
gulpStyles("app");
gulp.task('app_images',function(){
gulpImages("app");
gulp.task('app_rev', ['app_styles', 'app_scripts'], function(){
gulpRevHtml("app");
gulp.task('clean', del.bind(null, ['app_dist'], {
force: true
gulp.task("beike", function() {
runSequence('clean', ["app_images", "app_rev"]);
});因为同一个目录下有别的项目，所以这里写成了函数，输入不同名称打包到不同目标文件。结果就是：
打包后引用的静态资源文件分别如下，如果修改了某个文件，参数会发生变化，如果没有修改，则不发生变化：
&link rel="stylesheet" type="text/css" href="../../styles/common.css?v=a8aacfb"&
&script type="text/javascript" src="../../scripts/app_common.js?v=51921f3"&&/script&
background:url(../images/none.png?v=8f204d4)
加: 23:40:46&
更: 09:32:26&
&&网站联系: qq: email:&&&12352 阅读
请务必理解如下章节后阅读此章节：
压缩 js 代码可降低 js 文件大小，提高页面打开速度。在不利用 gulp 时我们需要通过各种工具手动完成压缩工作。
所有的 gulp 代码编写都可以看做是将规律转化为代码的过程。
找到 js/ 目录下的所有 js 文件，压缩它们，将压缩后的文件存放在 dist/js/ 目录下。
建议：你可以只阅读下面的代码与注释或同时阅读代码解释
gulp 的所有配置代码都写在 gulpfile.js 文件。
一、新建一个 gulpfile.js 文件
└── gulpfile.js
二、在 gulpfile.js 中编写代码
// 获取 gulp
var gulp = require('gulp')
require() 是 node （CommonJS）中获取模块的语法。
在 gulp 中你只需要理解 require() 可以获取模块。
三、获取 gulp-uglify 组件
// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify')
四、创建压缩任务
// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
// 1. 找到文件
gulp.src('js/*.js')
// 2. 压缩文件
.pipe(uglify())
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
gulp.task(name, fn) - 定义任务，第一个参数是任务名，第二个参数是任务内容。
gulp.src(path) - 选择文件，传入参数是文件路径。
gulp.dest(path) - 输出文件
gulp.pipe() - 管道，你可以暂时将 pipe 理解为将操作加入执行队列
五、跳转至 gulpfile.js 所在目录
打开命令行使用 cd 命令跳转至 gulpfile.js 文件所在目录。
例如我的 gulpfile.js 文件保存在 C:\gulp-book\demo\chapter2\gulpfile.js。
那么就需要在命令行输入
cd C:\gulp-book\demo\chapter2
Mac 用户可使用 cd Documents/gulp-book/demo/chapter2/ 跳转
六、使用命令行运行 script 任务
在控制台输入 gulp 任务名 可运行任务，此处我们输入 gulp script 回车。
注意：输入 gulp script 后命令行将会提示错误信息
// 在命令行输入
gulp script
Error: Cannot find module 'gulp-uglify'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
Cannot find module 'gulp-uglify' 没有找到 gulp-uglify 模块。
七、安装 gulp-uglify 模块
因为我们并没有安装 gulp-uglify 模块到本地，所以找不到此模块。
使用 npm 安装 gulp-uglify 到本地
npm install gulp-uglify
安装成功后你会看到如下信息：
gulp-uglify@1.1.0 node_modules/gulp-uglify
├── deepmerge@0.2.7
├── uglify-js@2.4.16 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.1.34, optimist@0.3.7)
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)
└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, object-assign@2.0.0, lodash._reinterpolate@3.0.0, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, chalk@1.0.0, lodash.template@3.3.2, vinyl@0.4.6, multipipe@0.1.2, dateformat@1.0.11)
chapter2 $
在你的文件夹中会新增一个 node_modules 文件夹，这里面存放着 npm 安装的模块。
目录结构：
├── gulpfile.js
└── node_modules
└── gulp-uglify
接着输入 gulp script 执行任务
gulp script
[13:34:57] Using gulpfile ~/Documents/code/gulp-book/demo/chapter2/gulpfile.js
[13:34:57] Starting 'script'...
[13:34:57] Finished 'script' after 6.13 ms
八、编写 js 文件
我们发现 gulp 没有进行任何压缩操作。因为没有js这个目录，也没有 js 目录下的 .js 后缀文件。
创建 a.js 文件，并编写如下内容
function demo (msg) {
alert('--------\r\n' + msg + '\r\n--------')
demo('Hi')
目录结构：
├── gulpfile.js
└── a.js
└── node_modules
└── gulp-uglify
接着在命令行输入 gulp script 执行任务
gulp 会在命令行当前目录下创建 dist/js/ 文件夹，并创建压缩后的 a.js 文件。
目录结构：
├── gulpfile.js
└── a.js
└── a.js
└── node_modules
└── gulp-uglify
function demo(n){alert(&--------\r\n&+n+&\r\n--------&)}demo(&Hi&);
九、检测代码修改自动执行任务
js/a.js一旦有修改 就必须重新在命令行输入 gulp script ，这很麻烦。
可以使用 gulp.watch(src, fn) 检测指定目录下文件的修改后执行任务。
在 gulpfile.js 中编写如下代码：
// 监听文件修改，当文件被修改则执行 script 任务
gulp.watch('js/*.js', ['script']);
但是没有命令可以运行 gulp.watch()，需要将 gulp.watch() 包含在一个任务中。
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 script 任务
gulp.watch('js/*.js', ['script'])
接在在命令行输入 gulp auto，自动监听 js/*.js 文件的修改后压缩js。
$gulp auto
[21:09:45] Using gulpfile ~/Documents/code/gulp-book/demo/chapter2/gulpfile.js
[21:09:45] Starting 'auto'...
[21:09:45] Finished 'auto' after 9.19 ms
此时修改 js/a.js 中的代码并保存。命令行将会出现提示，表示检测到文件修改并压缩文件。
[21:11:01] Starting 'script'...
[21:11:01] Finished 'script' after 2.85 ms
至此，我们完成了 gulp 压缩 js 文件的自动化代码编写。
注意：使用 gulp.watch 后你的命令行会进入“运行”状态，此时你不可以在命令行进行其他操作。可通过 Ctrl + C 停止 gulp。(Mac 中使用 control + C)
Mac 下使用 control + C 停止 gulp
十、使用 gulp.task('default', fn) 定义默认任务
增加如下代码
gulp.task('default', ['script', 'auto']);
此时你可以在命令行直接输入 gulp +回车，运行 script 和 auto 任务。
最终代码如下：
// 获取 gulp
var gulp = require('gulp')
// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify')
// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
// 1. 找到文件
gulp.src('js/*.js')
// 2. 压缩文件
.pipe(uglify())
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 script 任务
gulp.watch('js/*.js', ['script'])
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['script', 'auto'])
去除注释后，你会发现只需要 11 行代码就可以让 gulp 自动监听 js 文件的修改后压缩代码。但是还有还有一些性能问题和缺少容错性，将在后面的章节详细说明。
你可以访问
以查看更多用法。用gulp做一个略完整的前端打包工作~ - 推酷
用gulp做一个略完整的前端打包工作~
我们的官网要改版，会从以前的单一产品变成系列产品的官网，也就是现在的官网会是之后官网的一个子模块。
趁着这个机会，正好重新梳理了一下结构。加上罪恶之主管的一些要求，具体的需求如下：
分模块，每个模块都有独立的页面和静态文件，并将所有静态文件打在一个文件夹下，
一些常用变量可以进行替换，并可进行简单的页面动态生成，
生产环境打包与线上环境打包分开进行，
静态文件进行压缩合并，加md5以及cdn，
wap的静态文件与web端分离，wap的页面文件没有的继承web端的页面文件，有的要用它本身。
打包由grunt换成gulp。
整体的路径要像这样：
好了，那我们开始，首先当然是要安装gulp
npm install gulp --save-dev
然后你需要在你的环境里加一个gulpfile.js的文件。
然后我们为了高大上一点，给弄个简易的手册出来：
直接console.log输出就好了&&&
gulp.task('help',function () {
console.log(' gulp build
文件打包');
console.log(' gulp watch
文件监控打包');
console.log(' gulp help
gulp参数说明');
console.log(' gulp server
测试server');
console.log(' gulp -p
生产环境（默认生产环境）');
console.log(' gulp -d
开发环境');
console.log(' gulp -m &module&
部分模块打包（默认全部打包）');
/* 默认 */
gulp.task('default',function () {
gulp.start('help');
然后在你的控制台输入 gulp help或者 gulp build 就可以看到效果啦
然后我们要建立我们的build任务啦~
首先我们需要接收参数判断是开发打包还是生产打包。这里需要一个插件-- yargs,以及我们以后需要用到的工具类的插件：lodash（用于操作数组，当然它不仅仅是有这样的用处）和 path（用于写路径），用npm像上面那样加到你的环境中，
并且在你的gulpfile文件中声明它们：
/* 载入工具 */
var argv = require('yargs').argv,
_ = require('lodash'),
path = require('path');
记得之后载入的插件都需要这样声明。
我们新建一个叫build的task
//创建任务
gulp.task('build', function() {
在里面获取一下控制台输入的参数：
var evr = argv.p || !argv.d; //生产环境为true，开发环境为false，默认为true
var mod = argv.m || 'all';//模块明，默认为全部
这样你在控制台输入 gulp build -p 或者 gulp build -p -m t1这样就可以在里面获得参数啦。
然后我们需要进行一些打包的配置，先在写一个叫FileConfig的js文件，在里面写我们需要的文件配置信息：
&use strict&;
var path = require('path');
/* 环境信息 */
var source = 'source',
develop = 'develop',
production = 'production';
/* src路径 */
var src = {
tpl: 'tpl/**',
css: 'styles/**/*.less',
js: 'lib/**/*.js',
html: '/**.html',
img: 'images/**'
/* 模块信息 */
var modules = {
src: 't1',
dest: 't1',
name: 't1',
css_files: 'styles/app.less'
dest: 't2',
name: 't2'
&index&: {
src:'index',
dest: 'index',
name: 'index'
&common&: {
src:'common',
dest: 'common',
name: 'common'
然后在下面写个方法：
var FileConfig &= function () {
为了省事儿，直接在exports的时候就new了它&&&
module.exports = new FileConfig();
之后我们的一些配置信息全部从FileConfig这个方法里取，比如要模块信息的话：
FileConfig.prototype.modules = function () {
之后的具体实现就不再啰嗦啦。
然后我们回到gulpfile.js文件下，声明他，之后会用到。
然后我们就要对html，css，js，img进行处理啦，这里会用到很多插件，一次性的列举出来，用法我在后面的注释中写了：
// 载入外挂
var gulp = require('gulp'),
browserify = require('browserify'),//这里用不上，管理js依赖的
source = require('vinyl-source-stream'),//同样这里用不上，和上面那个一起的
uglify = require('gulp-uglify'),//混淆js
clean = require('gulp-clean'),//清理文件
notify = require('gulp-notify'),//加控制台文字描述用的
buffer = require('vinyl-buffer'),
less = require('gulp-less'),//转换less用的
autoprefixer = require('gulp-autoprefixer'),//增加私有变量前缀
minifycss = require('gulp-minify-css'),//压缩
concat = require('gulp-concat'),//合并
fileinclude = require('gulp-file-include'),// include 文件用
template = require('gulp-template'),//替换变量以及动态html用
rename = require('gulp-rename'),//重命名
webserver = require('gulp-webserver'),//一个简单的server，用python的SimpleHttpServer会锁文件夹
imagemin = require('gulp-imagemin'),//图片压缩
= require('gulp-if'),//if判断，用来区别生产环境还是开发环境的
= require('gulp-rev'),//加MD5后缀
revReplace = require('gulp-rev-replace'),//替换引用的加了md5后缀的文件名，修改过，用来加cdn前缀
addsrc = require('gulp-add-src'),//pipeline中途添加文件夹，这里没有用到
del = require('del'),//也是个删除&&&
vinylPaths = require('vinyl-paths'),//操作pipe中文件路径的，加md5的时候用到了
runSequence = require('run-sequence');//控制task顺序
好啦，为了省事儿，写个对象字面量的方法集：
/* 打包方法 */
var teemoGulp = {
/* html打包 */
buildHtml : function () {},
/* css 打包 */
buildCss : function () {},
/* js打包 */
buildJs : function () {},
/* img打包 */
buildImg: function () {},
/* md5打包 */
buildMd5: function () {}
然后我们先说简单的，js打包，只需要初始路径和打包后路径就好啦：
/* js打包 */
buildJs : function () {
var src = arguments[0],dest = arguments[1], flag = arguments[2]
return gulp.src(src)
.pipe(gulp.dest(dest))
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(dest));
其中flag是之前的这个var evr = argv.p || !argv.d; //生产环境为true，开发环境为false，默认为true，这个比较简单，先把原始文件拷贝一份，在混淆压缩加.min后缀存一份。
img打包也很简单
/* img打包 */
buildImg: function () {
var src = arguments[0],dest = arguments[1], flag = arguments[2]
return gulp.src(src)
.pipe(gulpif(flag, imagemin()))
.pipe(gulp.dest(dest));
这里注意一下用到了 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打包代码是这样：
/* html打包 */
buildHtml : function () {
var src = arguments[0],dest = arguments[1], flag = arguments[2], options = arguments[3];
return gulp.src(src)
.pipe(fileinclude({
basepath:basePath.source
.pipe(template(options,{
//interpolate: /\{-([\s\S]+?)-\}/g
.pipe(gulp.dest(dest))
template默认的包裹变量的标示是 &%-%&当然你可以用 interpolate去配置这些。
好啦，方法我们写好了，下面是引用他们，我们需要在写一个方法，
var build = funciton () {
然后获取参数信息，并进行必要的配置，让他们可以按照我们想要的方式输出。
var evr = options.evr,mod = options.
if(!modules[mod]) mod = 'all';
/* 路径初始化 */
fileConfig.init(evr);
gulp.task('clean', function() {
if(mod === 'all') {
var clean_path = path.join( evr&& basePath.production || basePath.develop, '/');
return gulp.src([clean_path], {read:false})
.pipe(clean());
/* 获取要build的模块 */
var parts = [];
if(mod === 'all') {
parts = _.pick(modules,mod);
之后我们循环遍历modules，建立相应的task
/* 分别对模块进行建立 */
var list = [];
for( var key in parts){
(function (key) {//闭个包
var options = fileConfig.getModule(parts[key]);
/* js建立 */
gulp.task(key+'_js',function () {
return teemoGulp.buildJs(options.js.src,options.js.dest,evr);
/* css建立 */
gulp.task(key+'_css',function () {
return teemoGulp.buildCss(options.css.src,options.css.dest,evr, teemoConfig, options.css.filename);
/* html建立 */
gulp.task(key+'_html',function () {
return teemoGulp.buildHtml(options.html.src,options.html.dest,evr, teemoConfig);
/* img建立 */
gulp.task(key+'_img',function () {
return teemoGulp.buildImg(options.img.src,options.img.dest,evr);
/* 模块建立 */
gulp.task(key+'_module',function(cb) {
runSequence(
[key+'_html',key+'_css',key+'_js',key+'_img'],
list.push(key+'_module');
这里用到了runSequence，它制定了task的执行顺序，因为如果不这样做，gulp默认是尽可能的并发执行，就有可能出现 clean没执行完，后续就开始执行的结果，这里注意吧task的回调放在runSequence的最后，保证内部的task执行完，再执行完本身。
当然如果比较简单的，你可以用task的第二个参数来控制task的执行顺序，这里不啰嗦啦。
然后把list返还给你最初的 build
var list = Build({
var md5 = evr&& 'md5' || [];
runSequence(
'clean',list, 'md5',cb
然后顺序执行即可。
之后到了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替换掉一下用到options.prefix的地方。你需要在第60行左右做同样的事情：
if (options.manifest) {
// Read manifest file for the list of renames.
options.manifest.on('data', function (file) {
var manifest = JSON.parse(file.contents.toString());
Object.keys(manifest).forEach(function (srcFile) {
var prefix = typeof options.prefix === 'function' ? options['prefix'](path.basename(srcFile)) : options. //这句是加的
renames.push({
unreved: canonicalizeUri(srcFile),
reved: prefix + canonicalizeUri(manifest[srcFile]),
prefix: prefix //这句也是后加的
options.manifest.on('end', replaceContents);
replaceContents();
而且你会发现在之后替换的时候也用到了这个，所以你要他当局部变量传进renames里去。想上面写的那样，因为下面一句用到了他：
if (rename.prefix) {
contents = contents.split('/' + rename.prefix).join(rename.prefix + '/'); //这句也改了
它这替换方式也挺丧良心的&&&
这样，我们就可以往里面传方法了~
网上找个算cdn域名的方法：
/*生成hash
hashFnv32a : function(str, asString, seed) {
/*jshint bitwise:false */
hval = (seed === undefined) ? 0x811c9dc5 :
for (i = 0, l = str. i & i++) {
hval ^= str.charCodeAt(i);
hval += (hval && 1) + (hval && 4) + (hval && 7) + (hval && 8) + (hval && 24);
if( asString ){
// Convert to 8 digit hex string
return (&0000000& + (hval &&& 0).toString(16)).substr(-8);
return hval &&& 0;
然后我们就可以进行md5加cdn的打包操作了：
/* md5打包 */
buildMd5: function () {
var vp = vinylPaths();
return gulp.src(path.join(basePath.production, '/**/{images,lib,styles}/**/*.*'))
.pipe(rev())
.pipe(gulp.dest(basePath.production))
.pipe(rev.manifest())
.pipe(gulp.dest(basePath.production))
.on('end',function () {
var manifest = gulp.src(path.join(basePath.production, &/rev-manifest.json&));
gulp.src(path.join(basePath.production, '/**/*.{css,html}'))
.pipe(revReplace({
manifest: manifest,
prefix: function (f) {
var cdns = [&s1&,&s2&,&s3&,&s4&];
var fileHashCode = teemoGulp.hashFnv32a(f);
if(fileHashCode &0 ){
fileHashCode = 0;
var cdn = cdns[fileHashCode % cdns.length];
return 'http://'+cdn+'./w/'
.pipe(gulp.dest(basePath.production))
.on('end',function () {
del(vp.paths);
del(path.join(basePath.production, &/rev-manifest.json&));
这样，整个的打包就完成了啦，压缩混淆合并加md5加cdn就全都搞定了。
至于加wap的文件夹，就在做一遍之前的操作即可，记得html要在做一遍覆盖操作，也就是三遍。
需要注意的是你改过的插件需要自己存到特定的包管理的地方去，或者存到自己的github上也行，配好ssh就能下。
最后你需要一个 测试的server，这个很好配：
/* server */
gulp.task('server', function() {
var evr = argv.p || !argv.d;
gulp.src(evr?basePath.production:basePath.develop)
.pipe(webserver({
livereload: true,
directoryListing: true,
open: true
不过如果你要测试cdn的话，就只能自己配nginx了，gulp-server上倒是能配代理，不过我没用过，应该也好用。
这样，所有的工作就完成了，这样做还是很方便的，比如，主管要求生产环境和开发环境的路径上要在家 一层路径，那么我们直接修改fileConfig里面的配置就可以：
/* 环境信息 */
var source = 'source',
develop = 'build/develop',
production = 'build/production';
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致