Hexo压缩-gulp

由于 hexo-all-minifier 所依赖的 安装总是报错，只能使用另一个方案进行项目压缩了

gulp 安装

  1. 全局安装

    1
    npm i gulp -g

  2. 项目下安装

    1
    npm install gulp gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp-imagemin@7.1.0 --save

创建 gulpfile.js

在项目根目录下新建 gulpfile.js 文件，下面是代码内容

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
// 引入需要的模块
var gulp = require("gulp");
var minifycss = require("gulp-minify-css");
var uglify = require("gulp-uglify");
var htmlmin = require("gulp-htmlmin");
var htmlclean = require("gulp-htmlclean");
var imagemin = require("gulp-imagemin");

// 压缩public目录下所有html文件, minify-html是任务名, 设置为default，启动gulp压缩的时候可以省去任务名
gulp.task("minify-html", function () {
  return gulp
    .src("./public/**/*.html") // 压缩文件所在的目录
    .pipe(htmlclean())
    .pipe(
      htmlmin({
        removeComments: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      })
    )
    .pipe(gulp.dest("./public")); // 输出的目录
});

// 压缩css
gulp.task("minify-css", function () {
  return gulp
    .src(["./public/**/*.css", "!./public/js/**/*min.css"])
    .pipe(
      minifycss({
        compatibility: "ie8",
      })
    )
    .pipe(gulp.dest("./public"));
});
// 压缩js
gulp.task("minify-js", function () {
  return gulp
    .src(["./public/**/.js", "!./public/js/**/*min.js"])
    .pipe(uglify())
    .pipe(gulp.dest("./public"));
});
// 压缩图片
gulp.task("minify-images", function () {
  return gulp
    .src(["./public/**/*.png", "./public/**/*.jpg", "./public/**/*.gif"])
    .pipe(
      imagemin(
        [
          imagemin.gifsicle({ optimizationLevel: 3 }),
          imagemin.mozjpeg({ progressive: true }),
          imagemin.optipng({ optimizationLevel: 5 }),
          imagemin.svgo(),
        ],
        { verbose: true }
      )
    )
    .pipe(gulp.dest("./public"));
});
// gulp 4.0 适用的方式
gulp.task(
  "default",
  gulp.parallel("minify-html", "minify-css", "minify-js", "minify-images")
);

压缩指令

1
2
3
4
hexo cl
hexo g
gulp
hexo d

效果

blog-gulp