gulp已经能打包和实时在浏览器中更新了,接下来就是 预防浏览器缓存对代码的影响。
通过修改文件名包含MD5值,可以预防无效缓存。 由于名称修改就会有变化,所以加入了自动引入修改后的文件名。
1.通过 gulp-rev 插件给文件名加MD5的后缀。
在处理css或者js文件过程中,调用 gulp-rev 插件。如下
gulp.task('scriptMinify', function() {
return gulp.src(sourcePath.js.src)
.pipe(uglify({
mangle:false,//类型:Boolean 默认:true 是否修改变量名
compress:false,//类型:Boolean 默认:true 是否完全压缩
}))
.pipe(rev()) //生成MD5字符串加到文件名后。不同于后缀
.pipe(gulp.dest(sourcePath.basePath + sourcePath.js.emit))
.pipe(browserSync.reload({stream:true}))
})
2.根据manifest.json生成的替换路径,替换生成的html中资源文件的路径。插件为 gulp-rev-cellector
首先生成css或者js的manifest.json文件。
gulp.src(sourcePath.js.src)
.pipe(uglify({
mangle:false,//类型:Boolean 默认:true 是否修改变量名
compress:false,//类型:Boolean 默认:true 是否完全压缩
}))
.pipe(rev()) //生产环境下
.pipe(gulp.dest(sourcePath.basePath + sourcePath.js.emit))
.pipe(rev.manifest('rev-js-manifest.json'))//生成一个rev-manifest.json
.pipe(gulp.dest('rev')) //生成manifest.json文件,并保存在rev文件夹下
//生成的文件如下
{
"browerinfo.js": "browerinfo-1a7eeb0b30.js",
"chatManager.js": "chatManager-ec701be8bc.js",
"common.js": "common-7253b42ae8.js",
"logManager.js": "logManager-5f1968633e.js",
"login.js": "login-2dda7b2420.js",
"userManager.js": "userManager-fc1b35885a.js",
"util.js": "util-0f3a726e3a.js"
}
压缩html代码中,替换rev文件加下的util.js。注意,只是替换文件名。要保证生成的html和css,js的相对路径是对的。
var revCollector = require('gulp-rev-cellector');
gulp.task('html', function() {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
return gulp.src(['rev/*.json,'views/*.html'])
.pipe(revCollector({replaceReved:true })) // rev/*.json是路径替换的键值对文件
.pipe(gulp.dest(sourcePath.basePath + sourcePath.html.emit))
})
<script src="../js/common.js"></script> //html中的资源文件就会被替换成下面的 <script src="../js/common-7253b42ae8.js"></script>
3.公共页面的引入。(html)使用插件 gulp-file-include
.pipe(gulpFileInclude({ prefix: '@@' })) //在html的处理代码中加入以上代码 //在html需要引入 代码块的地方使用如下代码 @@include('headers.html')gulp的学习暂时告一段落。下面把gulpfile.js整体发出来。请大家指正。欢迎评论区留言
/** * author smallerCoder * 2018-7-4 */ var sourcePath = require("./path.config.js"); const gulp = require('gulp'); const clean = require('gulp-clean'); const rev = require('gulp-rev'); const revCollector = require('gulp-rev-collector'); const sequence = require('gulp-sequence'); const cache = require('gulp-cache'); const imagemin = require('gulp-imagemin'); const stylemin = require('gulp-clean-css'); const uglify = require('gulp-uglify'); const htmlmin = require('gulp-htmlmin'); const browserSync = require('browser-sync').create(); const gulpFileInclude = require('gulp-file-include'); const rename = require('gulp-rename'); /** * 清空目标目录 */ gulp.task('clean', function() { return gulp.src(sourcePath.basePath + "*") .pipe(clean()) }) /** * 打包js文件 */ gulp.task('scriptMinify', function() { return gulp.src(sourcePath.js.src) .pipe(uglify({ mangle:false,//类型:Boolean 默认:true 是否修改变量名 compress:false,//类型:Boolean 默认:true 是否完全压缩 })) .pipe(rev()) //生产环境下 .pipe(gulp.dest(sourcePath.basePath + sourcePath.js.emit)) .pipe(rev.manifest('rev-js-manifest.json'))//生成一个rev-manifest.json .pipe(gulp.dest('rev')) .pipe(browserSync.reload({stream:true})) }) /** * 打包css文件 */ gulp.task('styleMinify', function() { return gulp.src(sourcePath.css.src) .pipe(stylemin()) .pipe(rev()) .pipe(gulp.dest(sourcePath.basePath + sourcePath.css.emit)) .pipe(browserSync.reload({stream:true})) .pipe(rev.manifest('rev-css-manifest.json'))//生成一个rev-manifest.json .pipe(gulp.dest('rev')) }) /** * 压缩img文件 TODO */ gulp.task('minifyImg', function() { return gulp.src(sourcePath.img.src) .pipe(cache(imagemin({ optimizationLevel: 3, //类型:Number 默认:3 取值范围:0-7(优化等级) progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片 interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染 }))) .pipe(gulp.dest(sourcePath.basePath + sourcePath.img.emit)) }) gulp.task('html', function() { var options = { removeComments: true,//清除HTML注释 collapseWhitespace: true,//压缩HTML collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true,//删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css" minifyJS: true,//压缩页面JS minifyCSS: true//压缩页面CSS }; return gulp.src('rev/*.json,'.concat(sourcePath.html.src).split(',')) // .pipe(htmlmin(options)) //取消压缩html文件 .pipe(gulpFileInclude({ prefix: '@@' })) .pipe(revCollector({replaceReved:true })) //文件替换,打包时会出现找不到文件的error .pipe(gulp.dest(sourcePath.basePath + sourcePath.html.emit)) }) gulp.task('copy', function() { return gulp.src(sourcePath.lib.src) .pipe(gulp.dest(sourcePath.basePath + sourcePath.lib.emit)) }) gulp.task('default', function(cb) {sequence('clean', 'copy', 'scriptMinify', 'styleMinify', 'minifyImg', 'html')(cb) }) gulp.task('watch', function(cb) { gulp.watch('js/*.*', ['scriptMinify']); gulp.watch('css/*.*', ['styleMinify']); gulp.watch('views/*.*', ['html']); }) // 监听scss和html文件, 当文件发生变化后做些什么! gulp.task('server', [],function () { // 从这个项目的根目录启动服务器 browserSync.init({ server: { baseDir: "./dist", } }); gulp.watch("css/*.css", ['styleMinify']); gulp.watch('js/*.js', ['scriptMinify']); gulp.watch("views/*.html").on("change", browserSync.reload); });