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


2018-3-8 gulp 资源压缩 资源合并

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

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

首先你全局是安装了 gulp4 的。

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

  • gulp
  • gulp-imagemin // 图片压缩
  • del // 删除文件及文件夹
  • gulp-csso // 压缩css
  • gulp-rev // 加md5后缀
  • gulp-rev-collector // gulp-rev 的插件,用于html模板更改引用路径
  • gulp-htmlmin // 压缩html
  • gulp-autoprefixer // 自动加浏览器前缀
  • gulp-uglify // 压缩js
  • gulp-plumber //捕捉错误

目录结构

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

gulpfile.js文件

const gulp = require('gulp'),
  imgMin = require('gulp-imagemin'),
  del = require('del'),
  csso = require('gulp-csso'),
  rev = require('gulp-rev'),
  revCollector = require('gulp-rev-collector'),
  htmlMin = require('gulp-htmlmin'),
  autoFx = require('gulp-autoprefixer'),
  uglify = require('gulp-uglify'),
  plumber = require('gulp-plumber'); //捕捉错误

//清除dist文件夹
gulp.task('clean', () => del([ 'dist' ]));

//压缩css/加浏览器前缀
gulp.task('css', () => 
  gulp.src('src/css/*.css')
    .pipe(plumber())
    .pipe(csso())     //启用压缩
    .pipe(autoFx())
    .pipe(rev())
    .pipe(gulp.dest('dist/css'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/css'))
);

//压缩js
gulp.task('js', () =>
  gulp.src('src/js/*.js')
    .pipe(plumber())
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest('dist/js'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/js'))
);

//压缩image
gulp.task('img', () => 
  gulp.src('src/images/*.{png,jpg,gif,ico}')
    .pipe(plumber())
    .pipe(imgMin({
      optimizationLevel: 5,
      progressive: true,
      imterlaced: true,
      multipass: true
    }))
    .pipe(rev())
    .pipe(gulp.dest('dist/images'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/images'))
);

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

//压缩并改变html引用路径html
gulp.task('rev', () => 
  gulp.src(['dist/rev/**/*.json', 'src/*.html'])
    .pipe(plumber())
    .pipe(revCollector({
      replaceReved: true
    }))
    .pipe(htmlMin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist/'))
)

//默认任务
gulp.task('default', gulp.series("clean", "css", "js", "img", "revCss", "rev"));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

最后启动

gulp
1

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

Last Updated: 8/5/2019, 5:36:05 PM