每次線上發布為了防止客戶端緩存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！完成。