|
每次线上发布为了防止客户端缓存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！完成。 | 
|手机版|小黑屋|Java自学者论坛
( 声明：本站文章及资料整理自互联网，用于Java自学者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2021-5-16 14:05:40