前言

gulp 能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括 css、js、html 乃至各类格式的图片文件。（图片文件的压缩往往只能节省几十 KB，效果远远不如 imagine、tinypng 等压缩方式，所以此处不再写使用 gulp 压缩图片的内容）。

如果需要压缩图片的话推荐使用图片在线压缩工具，将图像转换为WebP格式。WebP这是支持在互联网上无损和有损图像质量压缩的新格式。谷歌公司开发这种格式专为在网上迅速和方便地做好工作。其主要优点是，相对于其他图像格式，文件小，但图像质量相似。

配置教程

  1. 安装 Gulp 插件：在博客根目录 [Blogroot] 打开终端，输入：

    npm install gulp  #安装gulp插件

  2. 安装各个下属插件以实现对各类静态资源的压缩。

  • 压缩 HTML：

    npm install gulp-htmlclean # 清理html
    npm install gulp-htmlmin # 压缩html

  • 压缩 CSS：

    npm install gulp-minify-css # 压缩css

  • 压缩JS

    npm install gulp-uglify # 混淆js

  • 压缩字体包

    字体文件作为最让人又爱又恨的静态资源，为了保证站点文字匹配，全字库字体包一般都有10多M，这对博客的加载速度造成了巨大压力。fontmin 可以遍历博客内用到的字符，并将字体包内这些字符的字体样式提取出来输出为新的字体包。
    font-min 仅支持压缩 ttf 格式的字体包。

    npm install gulp-fontmin # 压缩ttf
  1. 为 Gulp 创建 gulpfile.js 任务脚本。在博客根目录 [Blogroot] 下新建 gulpfile.js, 打开 [Blogroot]\gulpfile.js, 输入以下内容：
//用到的各个插件
const gulp = require('gulp')
const htmlclean = require('gulp-htmlclean')
const htmlmin = require('gulp-htmlmin')
const minifycss = require('gulp-minify-css')
const uglify = require('gulp-uglify')
const fontmin = require('gulp-fontmin')

//压缩html
gulp.task('minify-html', () => {
  return gulp
    .src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(
      htmlmin({
        removeComments: true, //清除html注释
        collapseWhitespace: true, //压缩html
        collapseBooleanAttributes: true,
        //省略布尔属性的值，例如：<input checked="true"/> ==> <input />
        removeEmptyAttributes: true,
        //删除所有空格作属性值，例如：<input id="" /> ==> <input />
        removeScriptTypeAttributes: true,
        //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,
        //删除<style>和<link>的 type="text/css"
        minifyJS: true, //压缩页面 JS
        minifyCSS: true, //压缩页面 CSS
        minifyURLs: true //压缩页面URL
      })
    )
    .pipe(gulp.dest('./public'))
})
//压缩css
gulp.task('minify-css', () => {
  return gulp
    .src(['./public/**/*.css'])
    .pipe(
      minifycss({
        compatibility: 'ie8'
      })
    )
    .pipe(gulp.dest('./public'))
})
// 压缩js
gulp.task('minify-js', () => {
  return gulp.src('./public/**/*.js').pipe(uglify()).pipe(gulp.dest('./public'))
})
//压缩字体
function minifyFont(text, cb) {
  gulp
    .src('./public/font/*.ttf') //原字体所在目录
    .pipe(
      fontmin({
        text: text
      })
    )
    .pipe(gulp.dest('./public/font/')) //压缩后的输出目录
    .on('end', cb)
}

gulp.task('mini-font', (cb) => {
  var buffers = []
  gulp
    .src(['./public/**/*.html']) //HTML文件所在目录请根据自身情况修改
    .on('data', function (file) {
      buffers.push(file.contents)
    })
    .on('end', function () {
      var text = Buffer.concat(buffers).toString('utf-8')
      minifyFont(text, cb)
    })
})
// 运行gulp命令时依次执行以下任务
gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js', 'mini-font'))
  1. 在每次运行完 hexo generate 生成静态页面后，运行 gulp 对其进行压缩。指令流程如下：
hexo clean
hexo generate
gulp
hexo server 或 hexo deploy
  1. 关于 font-min 的补充说明，在本文中，是通过读取所有编译好的 html 文件（./public/**/*.html）中的字符，然后匹配原有字体包内./public/font/*.ttf 字体样式，输出压缩后的字体包到./public/font/ 目录。所以最终引用字体的相对路径应该是 /font/*.ttf。而本地测试时，如果没有运行 gulp，自然也就不会输出压缩字体包到 public 目录，也就看不到字体样式。