前端自动化打包发布已是一种常态，尤其在移动端，测试过程中静态资源的缓存是件很头疼的事情，有时候明明处理的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-rev
Example:
1 var gulp = require('gulp'); 2 var assetRev = require('gulp-asset-rev'); 3 4 gulp.task('rev',['revCss'],function() { 5 gulp.src("./test/test.html") 6 .pipe(assetRev()) 7 .pipe(gulp.dest('./dest')); 8 }); 9 10 gulp.task('revCss',function () { 11 return gulp.src('./test/styles/test.css') 12 .pipe(assetRev()) 13 .pipe(gulp.dest('./dest/styles/')) 14 }); 15 gulp.task('default',['rev']);
使用前：
1 <html lang="en"> 2 <head> 3 <meta charset="utf-8"/> 4 <title></title> 5 <link rel="stylesheet" href="./styles/test.css" type="text/css" /> 6 </head> 7 <body> 8 <div> 9 <img src="./images/test.png" /> 10 </div> 11 <script src="./scripts/test.js" type="text/javascript"></script> 12 </body> 13 </html>
使用后：
1 <html lang="en"> 2 <head> 3 <meta charset="utf-8"/> 4 <title></title> 5 <link rel="stylesheet" href="./styles/test_0ede2cf.css" type="text/css" /> 6 </head> 7 <body> 8 <div> 9 <img src="./images/test_25cf2b4.png" /> 10 </div> 11 <script src="./scripts/test_8ced4e6.js" type="text/javascript"></script> 12 </body> 13 </html>
很显然它把整个文件名都给改了，不符合我们之前只在文件后面添加版本号参数的需求。我们可以在源文件中做点手脚。
找到node_modules --> gulp-assets-rev -->index.js 修改为如下代码：
1 var verStr = (options.verConnecter || "") + md5; 2 src=src+"?v="+verStr;
实际上MD5人家都已经算好了，最后只是拼凑了显示方式，所以我们可以按照自己的需求去组合就行了。so easy~
完整配置如下：
package.json
1 { 2 "name": "StagingFinancial", 3 "version": "0.0.1", 4 "description": "Pages for Staging Financial App", 5 "devDependencies": { 6 "browser-sync": "*", 7 "del": "*", 8 "gulp": "*", 9 "gulp-asset-rev": "*", 10 "gulp-concat": "*", 11 "gulp-if": "*", 12 "gulp-jshint": "*", 13 "gulp-load-plugins": "*", 14 "gulp-minify-css": "^*", 15 "gulp-minify-html": "*", 16 "gulp-sass": "*", 17 "gulp-size": "*", 18 "gulp-sourcemaps": "*", 19 "gulp-uglify": "*", 20 "gulp-useref": "*", 21 "run-sequence": "*" 22 }, 23 "engines": { 24 "node": ">=0.10.0" 25 }, 26 "private": true 27 }
都是些常用的插件，gulp总共就5个API接口，但是插件是异常强大，可根据需求自己配置。
1 var gulp = require('gulp'); 2 var $ = require('gulp-load-plugins')(); 3 var del = require('del'); 4 var runSequence = require('run-sequence'); 5 var assetRev = require('gulp-asset-rev'); 6 7 function gulpScripts(app_name) { 8 return gulp.src([app_name + '/**/*.js']) //源文件下的所有js 9 .pipe(assetRev()) //配置版本号 10 .pipe($.uglify()) //进行压缩，如果需要合并也可加上合并的代码 11 .pipe(gulp.dest(app_name + "_dist"));//复制到目标文件路径 12 } 13 14 function gulpStyles(app_name) { 15 return gulp.src([app_name + '/**/*.css']) 16 .pipe(assetRev()) 17 .pipe($.minifyCss()) 18 .pipe(gulp.dest(app_name + "_dist")); 19 } 20 21 function gulpImages(app_name) { 22 return gulp.src([app_name + '/**/images/*']) 23 .pipe(gulp.dest(app_name + "_dist")); //复制所有图片到目标文件夹 24 } 25 26 function gulpRevHtml(app_name) { 27 gulp.src([app_name + '/*.html', app_name + '/**/*.html']) //源文件下面是所有html 28 .pipe(assetRev()) //配置引用的js和css文件，需要的话也可以用minifyHtml压缩html文件 29 .pipe(gulp.dest(app_name + '_dist')); //打包到目标文件夹路径下面 30 } 31 32 gulp.task('app_scripts', function(){ 33 gulpScripts("app"); 34 }); 35 gulp.task('app_styles', function(){ 36 gulpStyles("app"); 37 }); 38 gulp.task('app_images',function(){ 39 gulpImages("app"); 40 }); 41 gulp.task('app_rev', ['app_styles', 'app_scripts'], function(){ 42 gulpRevHtml("app"); 43 }); 44 gulp.task('clean', del.bind(null, ['app_dist'], { 45 force: true 46 })); 47 gulp.task("beike", function() { 48 runSequence('clean', ["app_images", "app_rev"]); 49 });
因为同一个目录下有别的项目，所以这里写成了函数，输入不同名称打包到不同目标文件。
结果就是：
打包后引用的静态资源文件分别如下，如果修改了某个文件，参数会发生变化，如果没有修改，则不发生变化：
1 <link rel="stylesheet" type="text/css" href="../../styles/common.css?v=a8aacfb"> 2 <script type="text/javascript" src="../../scripts/app_common.js?v=51921f3"></script> 3 background:url(../images/none.png?v=8f204d4)
原文地址：http://www.cnblogs.com/hutuzhu/p/5276000.html