每次线上发布为了防止客户端缓存css,js我们需要在引用的路径上加上添加版本号或者使用md5命名文件再修改html里的引用。那么gulp是一个不错的选择工具，配置简单。
下面分别列出用版本号?vev=方式和md5命名文件的方式来实现
1：md5命名文件的方式
些功能主要用到了gulp 的 gulp-dev
项目的目录结构如下
package.json:
{ "name": "gulp rev", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "\"a common\"" }, "keywords": [ "gulp rev" ], "author": "", "license": "ISC", "devDependencies": { "gulp": "^3.9.0", "gulp-clean": "^0.3.2", "gulp-concat": "^2.6.0", "gulp-jshint": "^2.0.0", "gulp-less": "^3.0.5", "gulp-minify-css": "^1.2.1", "gulp-rename": "^1.2.2", "gulp-rev": "^6.0.1", "gulp-rev-collector": "^1.0.2", "gulp-uglify": "^1.5.4", "jshint": "^2.8.0" } }
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/login.css"> </head> <body> <script type="text/javascript" src="js/zepto.js"></script> <script type="text/javascript" src="js/base.js"></script> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/login.js"></script> </body> </html>
Gulpfile.js
var gulp=require('gulp'), concat=require('gulp-concat'),//文件合并 uglify=require('gulp-uglify'),//js压缩 minifyCss=require('gulp-minify-css'),//css压缩 rev=require('gulp-rev'),//对文件名加MD5后缀 clean=require('gulp-clean'),//清理 revCollector=require('gulp-rev-collector');//路径替换 //css处理任务 gulp.task('mini-css',function(){ gulp.src(['./src/css/*.css']) .pipe(minifyCss()) .pipe(rev()) .pipe(gulp.dest('./dist/css')) .pipe(rev.manifest()) .pipe(gulp.dest('./rev/css')); }); //js处理任务 gulp.task('mini-js',function(){ gulp.src(['./src/js/*.js']) .pipe(uglify({ //mangle: true,//类型：Boolean 默认：true 是否修改变量名 mangle: false })) .pipe(rev()) .pipe(gulp.dest('./dist/js')) .pipe(rev.manifest()) .pipe(gulp.dest('./rev/js')); }); //路径替换任务 gulp.task('rev',function(){ gulp.src(['./rev/*/*json','./src/*.html']) .pipe(revCollector()) .pipe(gulp.dest('./dist')); }); //清理文件 gulp.task('clean', function() { gulp.src(['./dist'], {read: false}) .pipe(clean()); }); //图片处理， gulp.task('images', function() { return gulp.src('src/img/**/*') .pipe(gulp.dest('./dist/img')); }); gulp.task('default',['clean','mini-css','mini-js','images','rev']);
在 cmd cd到项目路径 运行 gulp
生成如下
在微信端推荐使用这种方法来解决的缓存问题，
2：使用版本号参数的方式实现
基于以上的方式安装 gulp-rev-append
npm install --save-dev gulp-rev-append
Gulppfile.js
var gulp=require('gulp'), concat=require('gulp-concat'),//文件合并 uglify=require('gulp-uglify'),//js压缩 minifyCss=require('gulp-minify-css'),//css压缩 rev = require('gulp-rev-append'); // 给URL自动加上版本号 clean=require('gulp-clean');//清理 //css处理任务 gulp.task('mini-css',function(){ gulp.src(['./src/css/*.css']) .pipe(minifyCss()) .pipe(gulp.dest('./dist/css')); }); //js处理任务 gulp.task('mini-js',function(){ gulp.src(['./src/js/*.js']) .pipe(uglify({ //mangle: true,//类型：Boolean 默认：true 是否修改变量名 mangle: false })) .pipe(gulp.dest('./dist/js')); }); //路径替换任务 gulp.task('rev',function(){ gulp.src('./src/*.html') .pipe(rev()) .pipe(gulp.dest('./dist')); }); //清理文件 gulp.task('clean', function() { gulp.src(['./dist'], {read: false}) .pipe(clean()); }); //图片处理， gulp.task('images', function() { return gulp.src('src/img/**/*') .pipe(gulp.dest('./dist/img')); }); gulp.task('default',['clean','mini-css','mini-js','images','rev']);
login.html 在引用的每个地方加上?rev=@@hash
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/login.css?rev=@@hash"> </head> <body> <script type="text/javascript" src="js/zepto.js?rev=@@hash"></script> <script type="text/javascript" src="js/base.js?rev=@@hash"></script> <script type="text/javascript" src="js/common.js?rev=@@hash"></script> <script type="text/javascript" src="js/login.js?rev=@@hash"></script> </body> </html>
运行 gulp 效果如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/login.css?rev=9371fb250d95c0b97dae694811fb81ad"> </head> <body> <script type="text/javascript" src="js/zepto.js?rev=a564a61d87513e0ae4bd27b4644dd4c5"></script> <script type="text/javascript" src="js/base.js?rev=162299d57d54a5db3ef411beac8fdeb6"></script> <script type="text/javascript" src="js/common.js?rev=267b973166c9d7134e51740736329eb5"></script> <script type="text/javascript" src="js/login.js?rev=2997ebed8ed282ef5c1b3a653b9cf1d7"></script> </body> </html>
ok！完成。