hexo 博客性能优化

逆葵

发布于 2019-04-24 18:50:19

7240

发布于 2019-04-24 18:50:19

文章被收录于专栏：FECodingFECoding

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

首先需要安装的 gulp 插件有：gulp-clean-css 、gulp-uglify、gulp-htmlmin、gulp-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 的命令即可：