博客搭建这么久了发现并没有进行过优化,首页虽然打开速度勉强能够接受,但是 github 和 coding 提供的空间有限,是时候优化一下了。基本思路是采用 gulp 进行代码的压缩等。

首先需要安装的 gulp 插件有:gulp-clean-cssgulp-uglifygulp-htmlmingulp-htmlclean。安装它们并将其加入到 package.json 的依赖中:

npm i --save gulp-clean-css gulp-uglify gulp-htmlmin gulp-htmlclean

当然,你的电脑上需要安装有 gulp,我这里进行了全局安装:

npm i -g gulp

然后在项目的根目录下新建 gulpfile.js 文件,里面一通配置,还是比较简单的,稍微熟悉点 gulp 的都没多大问题:

var gulp = require('gulp');
var cleancss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

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

/*压缩html文件*/
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'));
});

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

gulp.task('default', ['minify-html', 'minify-css', 'minify-js']);

大功告成。这样在执行生成命令和部署命令中间加一个 gulp 的命令即可:

hexo g
gulp
hexo d

实测发现貌似博客打开速度是快了那么一丢丢。哈哈,就当是有效的吧。

支付宝扫码打赏 微信打赏

坚持原创技术分享,您的支持将鼓励我继续创作!

扫描二维码,分享此文章

逆葵's Picture
逆葵

网名逆葵。北邮土著,CS 硕士在读。《Vue.js 权威指南》作者之一。学习、思考、沉淀中, 向成为顶级 JavaScript 技术栈开发者努力。