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,//省略布尔属性的值 <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);
});

gulp 构建前端项目 （四） 实时更新和文件MD5同步。js和css浏览器不能实时刷新（browser-sync）