参考链接--gulp官网
安装
npm gulp --save-dev
使用
在根目录下创建gulpfile.js文件，可用插件
<pre>
var gulp = require('gulp'),
less = require('gulp-less'),
autoprefixer = require('gulp-autoprefixer'),
livereload = require('gulp-livereload'),
minifyCss = require('gulp-minify-css'),
runSequence = require('run-sequence'),
rev = require('abc-gulp-rev'),
revCollector = require('abc-gulp-rev-collector');
gulp.task('less', function () {
//文件的目录
gulp.src('css/.less')
//解析less文件
.pipe(less())
//根据设置浏览器版本自动处理浏览器前缀
.pipe(autoprefixer({
browsers: [
'Chrome >= 35',
'Firefox >= 31',
'Edge >= 12',
'Explorer >= 9',
'iOS >= 8',
'Safari >= 8',
'Android 2.3',
'Android >= 4',
'Opera >= 12'
]
}))
//压缩css代码 这行代码要在生成css文件代码之前
.pipe(minifyCss())
//生成的文件在css文件夹下面
.pipe(gulp.dest('css'))
//监听的文件发生变化的时候自动刷新
.pipe(livereload());
});
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
return gulp.src("css/.css")
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'));
});
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
return gulp.src("js/*.js")
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
});
//Html替换css、js文件版本
gulp.task('revHtml', function () {
return gulp.src(['rev/**/*.json', 'View/**/*.html'])
.pipe(revCollector())
.pipe(gulp.dest('View'));
});
//创建监听任务 监听文件变化
gulp.task('watch', function () {
livereload.listen();
gulp.watch('css/*.less', ['less']);
});
//开发构建
gulp.task('build', function (done) {
condition = false;
runSequence(
['less'],
['revCss'],
['revJs'],
['revHtml'],
done);
});
gulp.task('default', ['watch']);
</pre>
上面代码块中，实现了自动为js，css加版本号，但是加的方式与传统的不一样，原因是代码来源于php项目中，前后端不分离，所以前端代码是在application中的，没有和gulpfile同一个文件夹下。因此也是修改下gulp-rev和gulp-rev-collector两个文件，重新上传到自己的npm空间并重命名以及版本号（参考上传npm），但是作者等均未修改。文章参考自Tony(托尼)老师的前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号。
运行
- 在根目录下，Terminal终端输入命令gulp，监听less文件的变化；
- 输入gulp build自动生成版本号，提交代码。
