前言

gulp 能够帮助用户自动压缩静态资源,配合各类下属插件,能够压缩包括 css、js、html 乃至各类格式的图片文件。(图片文件的压缩往往只能节省几十 KB,效果远远不如 imaginetinypng 等压缩方式,所以此处不再写使用 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 目录,也就看不到字体样式。