Gulp发布版本控制解决css,js被缓存问题

每次线上发布为了防止客户端缓存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"
  }
}

<!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']);

<!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！完成。

posted on 2016-07-29 15:42 劉劉阅读(3508) 评论(3) 编辑收藏举报