參考鏈接--gulp官網(wǎng)
安裝
npm gulp --save-dev
使用
在根目錄下創(chuàng)建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())
//根據(jù)設(shè)置瀏覽器版本自動處理瀏覽器前綴
.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'))
//監(jiān)聽的文件發(fā)生變化的時(shí)候自動刷新
.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'));
});
//創(chuàng)建監(jiān)聽任務(wù) 監(jiān)聽文件變化
gulp.task('watch', function () {
livereload.listen();
gulp.watch('css/*.less', ['less']);
});
//開發(fā)構(gòu)建
gulp.task('build', function (done) {
condition = false;
runSequence(
['less'],
['revCss'],
['revJs'],
['revHtml'],
done);
});
gulp.task('default', ['watch']);
</pre>
上面代碼塊中吩抓，實(shí)現(xiàn)了自動為js氏义，css加版本號影所，但是加的方式與傳統(tǒng)的不一樣骨宠，原因是代碼來源于php項(xiàng)目中，前后端不分離征讲，所以前端代碼是在application中的，沒有和gulpfile同一個(gè)文件夾下橡娄。因此也是修改下gulp-rev和gulp-rev-collector兩個(gè)文件诗箍，重新上傳到自己的npm空間并重命名以及版本號（參考上傳npm），但是作者等均未修改挽唉。文章參考自Tony(托尼)老師的前端靜態(tài)資源版本更新與緩存之——通過gulp 在原h(huán)tml文件上自動化添加js滤祖、css版本號。
運(yùn)行
- 在根目錄下瓶籽，Terminal終端輸入命令gulp匠童，監(jiān)聽less文件的變化；
- 輸入gulp build自動生成版本號塑顺，提交代碼汤求。
