用 Gulp 优化 Hexo

萌樱这两天把博客从 Typecho 搬到 Hexo ,主题也从 handsome 换成 Suka 了,部署在 GitHub 。

Hexo 的纯静态页面加载真的很快,真香警告。

然而 Typecho 才是最香的。(小声

虽然 Hexo 加载速度已经很快了,但我们还可以用 Gulp 继续优化 Hexo 。萌樱分享一个食用起来很方便的 gulpfile.js 。

食用方法

先全局安装 gulp 再安装所需要的包

npm install -g gulp
npm install gulp gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-uglify-es gulp-imagemin del gulp-minify-inline-json --save-dev

在 Hexo 文件夹下新建一个 gulpfile.js 文件,粘贴以下代码然后保存

萌樱稍微修改了一下,小伙伴们可以根据自己的实际情况修改

var gulp = require('gulp');
var minifycss = require('gulp-clean-css');
var uglify = require('gulp-uglify-es').default;
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
var del = require('del');
var Hexo = require('hexo');
var minifyInlineJSON = require('gulp-minify-inline-json');

gulp.task('clean', function () {
    return del(['public/**/*']);
});

var hexo = new Hexo(process.cwd(), {});
gulp.task('generate', function (cb) {
    hexo.init().then(function () {
        return hexo.call('generate', {
            watch: false
        });
    }).then(function () {
        return hexo.exit();
    }).then(function () {
        return cb()
    }).catch(function (err) {
        console.log(err);
        hexo.exit(err);
        return cb(err);
    })
});

gulp.task('deploy', function () {
    return hexo.init().then(function () {
        return hexo.call('deploy', {
            watch: false
        }).then(function () {
            return hexo.exit();
        }).catch(function (err) {
            return hexo.exit(err);
        });
    });
});

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

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'))
});

gulp.task('minify-img', function () {
    return gulp.src('./public/img/**/*')
        .pipe(imagemin([
            imagemin.gifsicle({
                interlaced: true
            }),
            imagemin.jpegtran({
                progressive: true
            }),
            imagemin.optipng({
                optimizationLevel: 5
            }),
            imagemin.svgo({
                plugins: [{
                    removeViewBox: true
                }, {
                    cleanupIDs: false
                }]
            })
        ]))
        .pipe(gulp.dest('./public/img'))
});

gulp.task('minify-js', function () {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

gulp.task('minifyInlineJSON', function () {
    return gulp.src('./public/**/*.html')
        .pipe(minifyInlineJSON())
        .pipe(gulp.dest('./public'));
});

gulp.task('compress', gulp.series('minify-html', 'minify-css', 'minify-img', 'minify-js', 'minifyInlineJSON'));

gulp.task('default', gulp.series('clean', 'generate', 'compress', 'deploy'));

用 Hexo 生成页面后,运行 Gulp 即可

hexo g  # 生成页面
gulp  # 包含 hexo d

😋 Enjoy it !

参考

Optimize Hexo With Gulp

最后修改:2020 年 02 月 27 日 09 : 53 PM

发表评论