使用Gulp压缩我的博客

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

服务器地理位置

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

博客图片过大

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

html，js，css未压缩

Hexo博客生成静态文件后我们可以通过查看public文件夹里面的html，js，css文件
我们可以发现这些文件里面含有很多空格
下面是对比图
未压缩
已压缩
通过这两张图片我们就可以知道，Hexo生成静态文件有很多空格，在百度了一会儿后找到了解决方法
我们可以使用gulp来压缩这些静态文件
我们进入博客目录开始安装gulp

1 2	`cnpm install gulp --save cnpm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin gulp-minify-css gulp-babel @babel/core --save`

如果没有安装cnpm可以用下面的命令安装

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

安装完gulp后，我们在博客目录新建一个文件gulpfile.js
touch 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');
// 压缩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/css'));
});
// 压缩js
gulp.task('minify-js', function() {
    return gulp.src('./public/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public/js'));
});
// 默认任务
gulp.task('default', gulp.parallel(
    'minify-html','minify-css','minify-js'
));

注意！！！
第八行代码的意思是压缩哪个文件的html文件
第十六行代码的意思是压缩结束后文件将输出到哪里
以此类推
一般的Hexo程序就用我上面的来压缩即可，不需要改动
写入后保存并退出，然后我们执行gulp进行压缩

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

1	`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;