gulp html自动引用,gulp 构建前端项目（三） js,css文件名MD5,并修改html中引入的文件名。公共页面的引入...
gulp 构建前端项目(一) gulp基础应用
gulp构建前端项目(二) 压缩文件，监听修改，浏览器同步
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,//省略布尔属性的值 ==>
removeEmptyAttributes: false,//删除所有空格作属性值 ==>
removeScriptTypeAttributes: true,//删除
removeStyleLinkTypeAttributes: true,//删除
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))
}) //html中的资源文件就会被替换成下面的
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,//省略布尔属性的值 ==>
removeEmptyAttributes: false,//删除所有空格作属性值 ==>
removeScriptTypeAttributes: true,//删除
removeStyleLinkTypeAttributes: true,//删除
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);
});
gulp 构建前端项目 (四) 实时更新和文件MD5同步。js和css浏览器不能实时刷新(browser-sync)