Gulp来优化Hexo博客访问速度

2020-03-13

摘要：gulp通过对站点使用的静态资源进行压缩，来优化网站的访问速度。

一、首先安装gulp以及所需要的模块：

1	npm install gulp -g

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

二、在博客的根目录下创建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');
// 压缩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'));
});

// 压缩 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'))
  });

// 默认任务
gulp.task('default', gulp.parallel(
    'minify-css','minify-js','minify-html'
));

三、最后一键三连，部署到GitHub

1	hexo clean&&hexo g&&gulp&&hexo d

本文作者： nowfitness
本文链接： https://www.nowfitness.top/archives/d3960629.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！