gulp之自动化静态资源压缩合并加版本号

gulp之自动化压缩合并加版本号

这个方案主要是为了实现js/css/image的压缩合并、自动添加版本号、自动加浏览器前缀和压缩html。

先把下面这里插件 npm i （插件名） -D 安装到项目环境内

gulp-sequence //顺序执行任务
gulp-csso //css压缩
gulp-jshint //js检查
gulp-uglify'), //js压缩
gulp-imagemin //压缩图片
gulp-htmlmin //压缩html
gulp-clean //清空文件夹
gulp-rev //更改版本名 md5后缀
gulp-autoprefixer //加浏览器前缀
gulp-rev-collector //gulp-rev 的插件，用于html模板更改引用路径

目录结构

gulpfile.js文件
var gulp = require('gulp'),
gulpSequence = require('gulp-sequence'), //同步执行任务
csso = require('gulp-csso'), //css压缩
jshint = require('gulp-jshint'), //js检查
uglify = require('gulp-uglify'), //js压缩
imageMin = require('gulp-imagemin'), //压缩图片
htmlMin = require('gulp-htmlmin'), //压缩html
clean = require('gulp-clean'), //清空文件夹
rev = require('gulp-rev'), //更改版本名 md5后缀
autoFx = require('gulp-autoprefixer'), //加浏览器前缀
revCollector = require('gulp-rev-collector'); //gulp-rev 的插件，用于html模板更改引用路径

//清空文件夹
gulp.task('clean', function(){
return gulp.src('dist', {read:false})
.pipe(clean());
});

//压缩js
gulp.task('js', function(){
return gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('dist/js'))
.pipe(rev.manifest())
.pipe(gulp.dest('dist/rev/js'));
});

//压缩image
gulp.task('image', function(){
return gulp.src('src/images/*.{png,jpg,gif,ico}')
.pipe(imageMin({
optimizationLevel: 5,
progressive: true,
interlaced: true,
multipass: true
}))
.pipe(rev())
.pipe(gulp.dest('dist/images'))
.pipe(rev.manifest())
.pipe(gulp.dest('dist/rev/images'));
});

//改变css引用路径
gulp.task('revCss',function(){
return gulp.src(['dist/rev/**/*.json','dist/css/*.css'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest('dist/css'));
});

//改变html引用路径
gulp.task('rev', function(){
return gulp.src(['dist/rev/**/*.json','src/*.html'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(htmlMin())
.pipe(gulp.dest('dist/'));
});

gulp.task('default', gulpSequence('clean', 'css', 'js', 'image', 'revCss', 'rev')); //按顺序执行任务

OK! 有问题，不懂的，错误，请大家积极留言！

gulp之自动化静态资源压缩合并加版本号

猜你喜欢