使用Gulp压缩Hexo博客静态资源, 加快响应速度

阅读数:361 次 2019-08-05

字数统计: 1.1k字 | 阅读时长: 7分

写在前面

自己博客插件加多了之后,感觉访问速度慢了些, 找了一些优化方法

少发送请求
把要加载的js文件（css文件同理）合并成一个（尽量少）文件，则可以向服务器少发送请求，从而减少等待时间。(前端不是很懂,太麻烦了,我只采用压缩文件这个方法)
压缩文件
使用压缩之后的js、css、img、html等静态资源文件，同样可以减少请求时间。(虽然html文件压缩对小网站意义不大,详见HTML代码到底该不该压缩, 但还是压一压吧TuT)
js／css位置
css引用建议放在head标签里面；js脚本建议放到body内容的最后，原因：等待js加载或者脚本有错误的时候不会影响html页面的展示。

这里顺便说我的一点教训, 在给自己的博客添加或测试各种插件时,不保证在不同版本以及不同系统一定能成功,一定要做好备份, 备份, 备份 !即使那个插件把自己博客弄崩溃了, 我们还是能从备份中恢复过来, 更可以大胆地去做尝试了.

使用Gulp优化

压缩静态资源无非就是减少请求时间, 加快响应速度。
Gulp基于Node.js的前端构建工具，通过Gulp的插件可以实现前端代码的编译（sass、less）、压缩、测试；图片的压缩；浏览器自动刷新，还有许多强大的插件可以在这里查找。

安装Gulp步骤

进入博客根目录后, 全局安装 gulp：$ npm install --global 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

3.添加系统环境变量, 将步骤1图红框的路径添加进Path中, 注意Users后面是你自己的用户名

4.重启Git, 在博客根目录下安装开发依赖: $ npm install --save-dev gulp
5.在博客根目录下创建一个名为 gulpfile.js 的文件,内容如下(我的个人博客是yilia主题, 其他主题文件位置不一定和我一致)

// 引入需要的模块
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');

// 压缩public目录下所有html文件, minify-html是任务名, 设置为default，启动gulp压缩的时候可以省去任务名
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','!./public/js/**/*min.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 压缩图片
gulp.task('minify-images', function() {
    return gulp.src(['./public/**/*.png','./public/**/*.jpg','./public/**/*.gif'])
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}), 
        imagemin.jpegtran({'progressive': true}), 
        imagemin.optipng({'optimizationLevel': 7}), 
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./public'))
});
// 默认任务
/*
gulp.task('default', [
    'minify-html','minify-html1','minify-css','minify-js','minify-images'
]);
*/
// gulp 4.0 适用的方式
gulp.task('default', gulp.parallel('minify-html','minify-css','minify-js','minify-images'
 //build the website
));

这里顺便说一下, 以min.js这样后缀名的文件再次压缩, 可能会出现错误, 所以要将它排除掉
6.优化之后，然后每次添加文章之后，编译发布之间需要多一个命令来压缩这些文件

hexo clean
hexo generate
gulp default     //压缩js、css、img等文件, default是上面gulpfile.js合并任务的任务名
hexo deploy

执行gulp default可以看到压缩比率,压缩期间CPU占用率会很高……

看看相应时间(最好优化前记录一下图片相应的时间等TuT, 我这里只有优化后的, 但是还是可以感觉到快一点的):

Gulp官网:https://www.gulpjs.com.cn/

本文作者： Cqh-i
本文链接： https://cqh-i.github.io/2019/08/05/使用Gulp压缩Hexo博客静态资源-加快响应速度/
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！