前端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’])

使用前：

<head>

</head>

<body>

<div>

</div>

</body>

</html>

使用后：

<head>

</head>

<body>

<div>

</div>

</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版本号控制

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发