使用Gulp压缩博客静态资源

在Github上搭建的Hexo博客，经常因为网络的问题加载缓慢，于是用gulp压缩静态文件。

Google一下，这类文章到处都是，然而找了几篇都是gulp3，对于我这种忍不了旧习的人来说当然不行，然后就弄了gulp4

到博客的根目录下安装gulp以及各类模块

1
2
3
npm i gulp gulp-htmlclean gulp-htmlmin --save
npm i gulp-imagemin gulp-minify-css gulp-uglify --save
npm i @babel/preset-env @babel/core --save

然后接着在根目录下创建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
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');

// 引入babel，万一用了ES6呢
var babel = require('gulp-babel');

//压缩html
gulp.task('minify-html', function() {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            collapseWhitespace: true,
            collapseBooleanAttributes: true,
            removeEmptyAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            minifyJS: true,
            minifyCSS: true
        }))
        .on('error', function(err) {
            console.log('html Error!', err.message);
            this.end();
        })
        .pipe(gulp.dest('./public'))
});

//压缩css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});

//压缩js，根据实际情况进行删减
gulp.task('minify-js', function() {
    return gulp.src(['./public/js/**/*.js', '!./public/js/**/*.{min,mini}.js'])
        .pipe(babel())
        .pipe(uglify())
        .pipe(gulp.dest('./public/js'));
});

//压缩图片，根据实际情况进行删减
gulp.task('minify-images', function() {
    return gulp.src('./public/img/**/*.*')
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}),
        imagemin.jpegtran({'progressive': true}),
        imagemin.optipng({'optimizationLevel': 8}),
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./public/img'))
});


gulp.task('default', gulp.parallel('minify-html','minify-css','minify-js','minify-images', function(done){
    done();
}));

注意事项
gulp.series：将按顺序运行任务
gulp.parallel：将并行运行任务

最后在站点根目录新建：.babelrc

1
2
3
{
   "presets": ["@babel/env"]
}

生成博客后使用gulp命令压缩一下就行了