gulp怎样处理html里面图片缓存,Gulp4 下构建WEB项目，进行 压缩、清除缓存

使用的是gulp4，使用时遇到了一些坑，也有可能是我配置有问题.......

如： gulp4的写法有改变，使用 gulp-rev-all 生成的文件与 gulp-rev 生成的配置文件名字不对应问题(我是把整个项目移入过去构建的)

本文无需配置任何配置文件，直接开花就完事了。

解决方案：

1. 首先安装相关插件(已安装请忽略)：

npm install-save-dev gulp

npm install-save-dev gulp-rev-collector

npm install-save-dev gulp-rev-all

npm install-save-dev gulp-clean-css

npm install-save-dev gulp-rename

npm install-save-dev gulp-uglify

npm install-save-dev del

npm install-save-dev gulp

2. 在 gulpfile.js 中加入如下代码

var gulp = require('gulp'),

revC = require('gulp-rev-collector'), // 重构文件内的路径引用

RevAll = require('gulp-rev-all'), // 清除缓存，重构文件名

cssMin = require('gulp-clean-css'), //css压缩

rename = require('gulp-rename'), //重命名

uglify = require('gulp-uglify'), //js压缩

clearAll = require('del'); //删除文件

//开发构建

//定义特殊文件(图片，字体文件等,会在任务开始前就移入至min文件夹)

var resource = [

"web/**/*",

"!web/**/*.js",

"!web/**/*.css",

"!web/**/*.html"

];

//定义css、js、html源文件路径

var cssSrc = 'web/**/*.css',

jsSrc = 'web/**/*.js',

htmlSrc = 'web/**/*.html';

//将除了css,js,html 的资源先移入至目标目录

gulp.task('moveResource', function() {

return gulp.src(resource) //指定获取到src下的所有css文件。

.pipe(gulp.dest('min'));//生成目标压缩css文件

});

// css打版本

gulp.task('revCss', function() {

return gulp.src(cssSrc) //指定获取到src下的所有css文件。

.pipe(cssMin({

compatibility: 'ie8', //兼容IE8

rebase: false //禁用引用路径重新定位，避免定位后找不到该文件问题

})) //执行压缩操作

.pipe(RevAll.revision({ hashLength: 10 }))

.pipe(gulp.dest('min'))

.pipe(RevAll.manifestFile())

.pipe(rename({ //重命名

suffix: '.css'

}))

.pipe(gulp.dest('min'));//生成目标压缩css文件

});

// js打版本

gulp.task('revJs',function () {

return gulp.src(jsSrc) //指定获取到src下的所有js文件。

.pipe(uglify()) //执行压缩操作

.pipe(RevAll.revision({hashLength: 10 }))

.pipe(gulp.dest('min'))

.pipe(RevAll.manifestFile())

.pipe(rename({

suffix: '.js'

}))

.pipe(gulp.dest('min'));//生成目标压缩js文件

});

//Html替换css、js引用文件版本

gulp.task('revHtml', function () {

return gulp.src(['min/*.json', htmlSrc,"min/**/*.js"])

.pipe(revC())

.pipe(gulp.dest('min'));

});

//清空dist文件夹

gulp.task('clearAll', function () {

return clearAll('min');

});

gulp.task('dev', gulp.series('moveResource','revCss','revJs','revHtml'));

// 开发js、css打版本入口

gulp.task('g', gulp.series('clearAll','dev',function(){}));

3. 在 项目目录下 创建个 web 文件夹，把需要构建的项目放在里面

4. 在终端运行  gulp g  即可

目前问题：

1. 不支持 layui.js 框架的构建(一构建就出错)， 解决方案： 排除layui目录 即可

解决方案：

var gulp = require('gulp'),

revC = require('gulp-rev-collector'), // 重构文件内的路径引用

RevAll = require('gulp-rev-all'), // 清除缓存，重构文件名

cssMin = require('gulp-clean-css'), //css压缩

rename = require('gulp-rename'), //重命名

uglify = require('gulp-uglify'), //js压缩

clearAll = require('del'); //删除文件

//开发构建

// 修改的部分开始 //

//定义特殊文件(图片，字体文件等,会在任务开始前就移入至min文件夹)

var resource = [

"web/**/*",

"!web/**/*.js",

"!web/**/*.css",

"!web/**/*.html",

"web/**/layui/**/*" // # 解决方案

];

//定义css、js、html源文件路径

var cssSrc = ['web/**/*.css'], // # 解决方案

jsSrc = ['web/**/*.js'], // # 解决方案

htmlSrc = 'web/**/*.html';

//需要排除的插件目录(layui)

var _nosrc_1 = "!web/**/layui/**/*"; // # 解决方案

cssSrc.push(_nosrc_1); // # 解决方案

jsSrc.push(_nosrc_1); // # 解决方案

// 修改的部分结束 //

gulp.task('test', function() {

return gulp.src(cssSrc) //指定获取到src下的所有css文件。

.pipe(through2.obj(function (file, enc, cb) {

console.log(file.relative);

cb();

}))

});

//将除了css,js,html 的资源先移入至目标目录

gulp.task('moveResource', function() {

return gulp.src(resource) //指定获取到src下的所有css文件。

.pipe(gulp.dest('min'));//生成目标压缩css文件

});

// css打版本

gulp.task('revCss', function() {

return gulp.src(cssSrc) //指定获取到src下的所有css文件。

.pipe(cssMin({

compatibility: 'ie8', //兼容IE8

rebase: false //禁用引用路径重新定位，避免定位后找不到该文件问题

})) //执行压缩操作

.pipe(RevAll.revision({ hashLength: 10 }))

.pipe(gulp.dest('min'))

.pipe(RevAll.manifestFile())

.pipe(rename({ //重命名

suffix: '.css'

}))

.pipe(gulp.dest('min'));//生成目标压缩css文件

});