Hexo访问优化

Hexo博客访问优化

之前发现在网络号的情况访问博客的时候随着图片以及文章的增加，访问速度似乎出现了变慢的情况，甚至访问的时候首页大图加载还出现了需要短暂等待才能加载完成的情况。解决这种问题可以通过gulp插件来对博客所涉及的html、css以及js文件进行压缩，以提升网站性能。

一、安装依赖

进入博客根目录打开命令行输入下面的命令

npm install gulp

二、安装模块

要实现gulp压缩需要安装以下五个模块：

• gulp-htmlclean // 清理html

• gulp-htmlmin // 压缩html

• gulp-minify-css // 压缩css

• gulp-uglify // 混淆js

• gulp-imagemin // 压缩图片

npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save

三、博客的根目录下创建gulpfile.js

在博客根目录下创建gulpfile.js文件，内容为：

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

// 压缩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'))
});
// 压缩css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public'));
});
// 压缩js
gulp.task('minify-js', function() {
    return gulp.src('./public/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 压缩图片
gulp.task('minify-images', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}), 
        imagemin.jpegtran({'progressive': true}), 
        imagemin.optipng({'optimizationLevel': 7}), 
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./public/images'))
});
// 默认任务
gulp.task('default', [
    'minify-html','minify-css','minify-js','minify-images'
]);

四、依次执行压缩及部署

hexo clean
hexo g && gulp //生成静态页面之后进行静态资源压缩
hexo d

hexo server -p 5000 指定端口本地预览

五、遇到的问题

在网上找到优化博客的教程之后，有很多的安装gulp方式都是全局安装

npm install gulp -g

但是这样子安装在我这发现当使用gulp命令压缩静态资源的时候出现报错，这个时候安装gulp就不要全局安装，进入博客的根目录下打开命令行，不执行全局安装-g即可。最后博客的访问速度有少些提升(测试的时候网络有点不稳定，网络好的时候访问速度应该有一些小的提升)