使用Gulp压缩我的博客

在使用Github免费白嫖一个博客这篇文章中，我讲述了如何使用Hexo搭建博客，并白嫖Github的托管功能
在搭建完后，我尝试访问博客时，感觉博客网站有点慢
经过研究后发现了两个问题

服务器地理位置

因为Github的服务器在国外，所以懂的都懂

博客图片过大

博客最重要的就是图片，导致加载慢的原因也有可能是图片，我们可以把图片托管在图床上，或者是压缩图片，使图片变小

html，js，css未压缩

Hexo博客生成静态文件后我们可以通过查看public文件夹里面的html，js，css文件
我们可以发现这些文件里面含有很多空格
下面是对比图


通过这两张图片我们就可以知道，Hexo生成静态文件有很多空格，在百度了一会儿后找到了解决方法
我们可以使用gulp来压缩这些静态文件
我们进入博客目录开始安装gulp

cnpm install gulp --g
cnpm install gulp gulp-clean-css gulp-uglify gulp-htmlmin gulp-htmlclean --save

如果没有安装cnpm可以用下面的命令安装，用npm的效果也是一样的

npm install -g cnpm --registry=https://registry.npmmirror.com

安装完gulp后，我们在博客目录新建一个文件gulpfile.js
touch gulpfile.js
然后把下面的配置命令写入gulpfile.js文件里

// 引入需要的模块
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const uglify = require('gulp-uglify');
const cleanCSS = require('gulp-clean-css');
// 设置静态文件位置
const paths = {
    html: './public/**/*.html',
    js: './public/js/**/*.js',
    css: './public/css/**/*.css'
};
// 压缩html
gulp.task('minify-html', () => {
    return gulp.src(paths.html)
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('./public'));
});
// 压缩js
gulp.task('minify-js', () => {
    return gulp.src(paths.js)
        .pipe(uglify())
        .pipe(gulp.dest('./public/js'));
});
// 压缩css
gulp.task('minify-css', () => {
    return gulp.src(paths.css)
        .pipe(cleanCSS({ compatibility: 'ie8' }))
        .pipe(gulp.dest('./public/css'));
});
// 默认任务
gulp.task('default', gulp.series('minify-html', 'minify-js', 'minify-css'));

一般的Hexo程序就用我上面的来压缩即可，不需要改动
写入后保存并退出，然后我们执行gulp进行压缩

这样子就是压缩成功了
如果你的Hexo是运行于Nginx上的还可以进行gzip压缩
打开Nginx的站点配置

vi /etc/nginx/sites-enabled/default

我们把下面内容添加进server块里面

# 开启gzip
gzip  on;  
# 低于1kb的资源不压缩 
gzip_min_length 1k;
# 压缩级别1-9,越大压缩率越高,同时消耗cpu资源也越多，建议设置在5左右
gzip_comp_level 5; 
# 需要压缩哪些响应类型的资源,多个空格隔开.不建议压缩图片
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;  
# 配置禁用gzip条件,支持正则.此处表示ie6及以下不启用gzip(因为ie低版本不支持)
gzip_disable "MSIE [1-6]\.";  
# 是否添加“Vary: Accept-Encoding”响应头
gzip_vary on;

添加完后我们保存并退出，再重启一下Nginx

service nginx restart