前端gulp js/CSS版本号控制

前端开发设计模板
前端开发psd模板使用
前端项目开发文档模板

由于网页每次更新会有一个缓存,但每次手动清理缓存不显示。所以自动化实现静态资源的版本更新才是正道。
搜了不少资料,发现都不是想要的,我希望实现的效果是:
<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:
javascript 代码

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
javascript 代码

{
    “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”: “*” < br />
    },
    “engines”: {
        “node”: “>=0.10.0” < br />
    },
    “private”: true < br />
}

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

javascript 代码

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’])
})

因为同一个目录下有别的项目,所以这里写成了函数,输入不同名称打包到不同目标文件。

前端开发接口文档模板
前端开发个人总结ppt模板
web前端开发论文模板
» 本文来自:前端开发者 » 《前端gulp js/CSS版本号控制》
» 本文链接地址:https://www.rokub.com/6187.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!