最新 完整 gulp4 之自动化静态资源压缩合并加版本号

#最新 完整 gulp之自动化静态资源压缩合并加版本号

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

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

• gulp-csso //css压缩
• gulp-jshint //js检查
• gulp-uglif’ //js压缩
• gulp-imagemin //压缩图片
• gulp-htmlmin //压缩html
• gulp-clean //清空文件夹
• gulp-rev //更改版本名 md5后缀
• gulp-autoprefixer //加浏览器前缀
• gulp-rev-collector //gulp-rev 的插件，用于html模板更改引用路径

目录结构

|- root
|    |-dist  //此目录为下面生成的
|         |-css
|         |-js
|         |-images
|         |-rev
|         |-index.html
|    |-node_modules
|    |-src   //资源目录
|         |-css
|         |-js
|         |-images
|         index.html
|     gulpfile.js
|     package.json

gulpfile.js文件

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

//清空文件夹
function clean (){
	return del(['dist'])   // dist 为要删除的文件夹
});

//压缩css/加浏览器前缀
function css (){
 	return gulp.src('src/css/*.css')
 	    .pipe(autoFx({
 	    	browsers: ['last 2 versions', 'Android >= 4.0']
 	    }))
 	    .pipe(csso())
 	    .pipe(rev())
 	    .pipe(gulp.dest('dist/css'))
 	    .pipe(rev.manifest())
 	    .pipe(gulp.dest('dist/rev/css'));
}

//压缩js
function js (){
	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
function image (){
	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引用路径
function revCss (){
	return gulp.src(['dist/rev/**/*.json','dist/css/*.css'])
	           .pipe(revCollector({
	           	    replaceReved: true
           }))
	           .pipe(gulp.dest('dist/css'));
}

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

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

这里都是函数形式，是为了方便加watch，这里就不写了。

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