如何使用gulp给资源文件加上版本

1．package.json文件部分插件 plugins

"dependencies": {

"del": "^1.1.1",

"gulp": "^3.8.11",

"gulp-autoprefixer": "^2.1.0",

"gulp-cache": "^0.2.8",

"gulp-clean": "^0.3.1",

"gulp-concat": "^2.5.2",

"gulp-imagemin": "^2.2.1",

...

}

2．安装所需的gulp插件

$ npm install

3．gulpfile.js

'use strict'

var gulp = require('gulp')

/*global -$ 加载需使用的gulp插件*/

var $ = require('gulp-load-plugins')()

配置选项(也可以直接在任务中写相对路径)

/*

*管理资源文件路径集合

*config.static下

*css scripts images 替换为自己的路径(可按照此配置管理)

*/

var config = {}

// 源资源文件路径

config['static'] = {

styles: 'static/styles/*.*',

scripts: 'static/scripts/*.*',

images: 'static/images/*.*',

html:'static/*.html'

}

...

图片任务流处理方法

/*

*images 任务流

*/

gulp.task('images', function () {

return gulp.src(config['static'].images)

.on('error', function (err) {

console.error('Error!', err.message)

})

.pipe($.imagemin({

distgressive: true,

progressive: true,

interlaced: true,

svgoPlugins: [{removeViewBox: false}],

use: [require('imagemin-pngquant')()]

}))

.pipe(gulp.dest(config['rev'].images))

.pipe($.notify({ message: 'images task complete' }))

})

/*

*img 添加版本任务流

*use gulp-rev to version the rev files and generate the 'rev-manifest.json' file

*/

gulp.task('img', ['images'], function(){

return gulp.src(config['rev'].images_file)

.pipe($.rev())

.pipe(gulp.dest(config['dist'].images))

.pipe($.rev.manifest({

base: 'dist',

merge: true //如果存在 rev-manifest.json文件则合并

}))

.pipe(gulp.dest('dist'))

})

css任务流处理方法 详见

js任务流处理方法 详见

加入版本任务流处理方法

gulp.task('rev',['img','css','js'], function () {

gulp.src(['rev-manifest.json', config['static'].html])

.pipe( $.revCollector({

replaceReved: true,

dirReplacements: {

//路径替换

// 'css': '/dist/css',

// '/js/': '/dist/js/',

// 'cdn/': function(manifest_value) {

// return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value

// }

}

}) )

.pipe($.minifyHtml({conditionals: true, loose: true}))

.pipe(gulp.dest('dist'))

gulp.task('del', require('del')('rev'))//最后删除过渡文件目录

})

开启任务

gulp.task('test', ['clean'], function () {

gulp.start('rev')

})

加上版本号的作用主要有二个:

1.方便版本控制，比如1.1版本的样式表，可以升级为2.0版本的样式表

2.强制浏览器更新(因为http请求时，如果访问的路径不变，而客户端缓存中又有该文件时，浏览器会直接调用缓存中的文件，这样的话，即使服务端的css内容变化了，但是客户端仍然有可能显示的是旧文件，而加上新的版本号以后，浏览器会认为这是一个新的访问地址，会重新下载最新版本的文件)

给CSS、JS添加版本号可以防止客户端缓存。

比如:<script src="001.js?2015120710"></script>

001.js?2015120710 ？后面的2015120710是当前js的日期。

如果自动添加，建议还是以日期作为版本号，当然也可以通过程序随机生成一组数字或字符。

---