gulp js/css版本号控制

腥腻
腥腻 发布于 2016-12-13 20:36:35 浏览:682 类型:原创 - 随笔 分类:Node.js - 随笔 二维码: 作者原创 版权保护
由于网页每次更新会有一个缓存,但每次手动清理缓存不显示。所以自动化实现静态资源的版本更新才是正道。
搜了不少资料,发现都不是想要的,我希望实现的效果是:
<script type="text/javascript" src="/common.js?v=213132"></script>
但是大部分插件实现的效果类似下面,而且看起来很麻烦
<script type="text/javascript" src="/common-51921f3.js"></script>
这样会导致一个问题,每次都会生成新的文件,而且必须同时修改html的引用。
下面说说我的解决方案:
用到的gulp插件是:gulp-asset-rev
先下载插件: npm install --save-dev gulp-asset-rev
Example:
var gulp = require('gulp');var assetRev = require('gulp-asset-rev');
 
gulp.task('rev',['revCss'],function() {
    gulp.src("./test/test.html")
        .pipe(assetRev())
        .pipe(gulp.dest('./dest'));
});
 
gulp.task('revCss',function () {
    return gulp.src('./test/styles/test.css')
        .pipe(assetRev())
        .pipe(gulp.dest('./dest/styles/'))
});
gulp.task('default',['rev']);


使用前:
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>   
    <link rel="stylesheet" href="./css/test.css" type="text/css" />
</head>
<body>
    <div>
        <img src="./img/test.png" />
    </div>
    <script src="./js/test.js" type="text/javascript"></script>
</body>
</html>

使用后:

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" href="./css/test_2ddsa2cf.css" type="text/css" />
</head>
<body>
    <div>
        <img src="./img/test_212ds2b4.png" />
    </div>
    <script src="./js/test_de21321e6.js" type="text/javascript"></script>
</body>
</html>

很显然它把整个文件名都给改了,不符合我们之前只在文件后面添加版本号参数的需求。我们可以在源文件中做点手脚。
找到node_modules --> gulp-assets-rev -->index.js 修改为如下代码:
var verStr = (options.verConnecter || "") + md5;
    src=src+"?v="+verStr;
实际上MD5人家都已经算好了,最后只是拼凑了显示方式,所以我们可以按照自己的需求去组合就行了。so easy~
完整配置如下:
package.json
{
  "name": "StagingFinancial",
  "version": "0.0.1",
  "description": "Pages for Staging Financial App",
  "devDependencies": {
    "browser-sync": "*",
    "del": "*",
    "gulp": "*",
    "gulp-asset-rev": "*",
    "gulp-concat": "*",
    "gulp-if": "*",
    "gulp-jshint": "*",
    "gulp-load-plugins": "*",
    "gulp-minify-css": "^*",
    "gulp-minify-html": "*",
    "gulp-sass": "*",
    "gulp-size": "*",
    "gulp-sourcemaps": "*",
    "gulp-uglify": "*",
    "gulp-useref": "*",
    "run-sequence": "*"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "private": true
}


都是些常用的插件,gulp总共就5个API接口,但是插件是异常强大,可根据需求自己配置。

var gulp = require('gulp');var $ = require('gulp-load-plugins')();var del = require('del');var runSequence = require('run-sequence');var assetRev = require('gulp-asset-rev');
function gulpScripts(app_name) {
    return gulp.src([app_name + '/**/*.js']) //源文件下的所有js
        .pipe(assetRev())                    //配置版本号
        .pipe($.uglify())                    //进行压缩,如果需要合并也可加上合并的代码
        .pipe(gulp.dest(app_name + "_dist"));//复制到目标文件路径
}
function gulpStyles(app_name) {
    return gulp.src([app_name + '/**/*.css'])
        .pipe(assetRev())
        .pipe($.minifyCss())
        .pipe(gulp.dest(app_name + "_dist"));
}
function gulpImages(app_name) {
    return gulp.src([app_name + '/**/images/*']) 
        .pipe(gulp.dest(app_name + "_dist"));   //复制所有图片到目标文件夹
}
function gulpRevHtml(app_name) {
    gulp.src([app_name + '/*.html', app_name + '/**/*.html'])   //源文件下面是所有html
        .pipe(assetRev())                                       //配置引用的js和css文件,需要的话也可以用minifyHtml压缩html文件
        .pipe(gulp.dest(app_name + '_dist'));                   //打包到目标文件夹路径下面
}

gulp.task('app_scripts', function(){
    gulpScripts("app");
});
gulp.task('app_styles', function(){
    gulpStyles("app");
});
gulp.task('app_images',function(){
     gulpImages("app");
});
gulp.task('app_rev', ['app_styles', 'app_scripts'], function(){
    gulpRevHtml("app");
});
gulp.task('clean', del.bind(null, ['app_dist'], {
    force: true
}));
gulp.task("beike", function() {
    runSequence('clean', ["app_images", "app_rev"]);
});


因为同一个目录下有别的项目,所以这里写成了函数,输入不同名称打包到不同目标文件。
gulp js/css版本号控制
node_modules安装插件:
gulp js/css版本号控制
标签:
z
给个赞 3 人点赞
收藏 5 人收藏
评论 已有 1 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
hanhui_zhu
hanhui_zhu2016-12-13 22:29:491F
比较遗憾的是gulp无法使用ES6模块,写的不错
举报 支持 (0) 回复 (0)