Gulp进行静态资源压缩

网站打开速度，一直是博主所关心的问题，那么除了优化系统本身、CDN等方式，还可以采用 gulp 来压缩资源，从而提升效率

Gulp是什么

Gulp 是一个基于 Node.js 的自动化构建工具，通过编写 JavaScript 脚本来定义任务，从而实现自动化构建。

• 简单易用：Gulp 的 API 简单易用，不需要很多配置就能够快速上手。
• 插件系统：Gulp 的插件系统丰富，几乎可以处理各种开发任务，包括文件压缩、合并、图片压缩、CSS 预处理器等。
• 自动化构建：Gulp 可以自动监视文件变化，并自动执行相应的任务，大大提高了开发效率。
• 流式处理：Gulp 使用流式处理，可以大大降低内存使用，提高构建速度。
• 易于扩展：Gulp 使用 Node.js 开发，开发者可以自行编写插件来扩展其功能。

综上所述，Gulp 是一个功能强大、易于使用和扩展的自动化构建工具，可以大大提高前端开发的效率。

资源压缩

静态资源：指在 Web 应用程序中，不需要动态生成内容的资源，例如 HTML、CSS、JavaScript、图片、字体等等。这些资源的特点是不会随着请求而发生变化，通常存储在服务器的文件系统中，并通过 HTTP 协议向客户端传输

对于多媒体文件，很多资源都可以被压缩。尽管压缩多少会有一些失真（有损压缩），但只要失真程度不影响用户体验，我们也不必计较这些损失。最常见的压缩方式包括但不限于：使用webp格式、降低图片分辨率等。

字体文件对于英文网站不会有特别严重的负担，但是中文字符数量非常庞大，如果把所有字符都囊括进来，一个字体文件动辄4MB，甚至有些能够超过20MB。因此，对字体文件进行压缩也是必要的。压缩字体文件有两种方案：从字体文件中提取出常用的文字或仅保留我们需要用到的文字。第二种方案的压缩率通常更高，同时也更安全，不会出现有些生僻字我们用到了却给删掉了的情况。但是，第二种方案每当更新网站内容时，就要生成新的字体文件，这就需要考虑客户端缓存的影响。

教程

下面我们使用 gulp 来压缩静态资源。注：我并没有通过gulp压缩多媒体资源，多媒体资源我是通过netlify插件，如果你需要压缩多媒体资源，可以自行去网上查找相应的插件。

• 根目录执行，安装gulp

npm install --global gulp-cli
npm install gulp --save

• 安装插件，按需安装

# 压缩HTML
npm install gulp-htmlclean --save-dev
npm install gulp-html-minifier-terser --save-dev

# 压缩CSS
npm install gulp-cssnano --save-dev

# 压缩JS
npm install gulp-terser --save-dev

# 压缩TTF
npm install gulp-fontmin --save-dev

• 新建gulpfile.js

const gulp = require("gulp")
//用到的各个插件
const htmlMin = require('gulp-html-minifier-terser')
const htmlClean = require('gulp-htmlclean')
const terser = require('gulp-terser')
const cssnano = require('gulp-cssnano')
const fontmin = require('gulp-fontmin')

// 压缩js
gulp.task('minify-js', () =>
    gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
        .pipe(terser({}))
        .pipe(gulp.dest('./public'))
)

//压缩css
gulp.task('minify-css', () =>
    gulp.src(['./public/**/*.css'])
        .pipe(cssnano({
            mergeIdents: false,
            reduceIdents: false,
            discardUnused: false,
            zIndex: false
        })).pipe(gulp.dest('./public'))
)

//压缩html
gulp.task('minify-html', () =>
    gulp.src('./public/**/*.html')
        .pipe(htmlClean())
        .pipe(htmlMin({
            removeComments: true, //清除html注释
            collapseWhitespace: true, //压缩html
            collapseInlineTagWhitespace: true,
            collapseBooleanAttributes: true,
            noNewlinesBeforeTagClose: false,
            removeAttributeQuotes: true,
            removeRedundantAttributes: 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'))
)

//压缩字体
function minifyFont(text, cb) {
    gulp
        .src('./public/fonts/*.ttf') //原字体所在目录
        .pipe(fontmin({
            text: text
        }))
        .pipe(gulp.dest('./public/fontsdest/')) //压缩后的输出目录
        .on('end', cb);
}

gulp.task('minify-ttf', (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.task("zip", gulp.parallel('minify-js', 'minify-css', 'minify-html', 'minify-ttf'))

如果有不需要压缩的资源，直接删除或注释对应压缩代码即可。

现在，只要我们在执行 hexo g 后执行 gulp zip 即可压缩我们想要压缩的资源了。

下面是优化后的效果

注意

使用gulp压缩TTF字体文件的方法。对于中文网站来说，由于中文字符数量庞大，如果把所有字符都囊括进字体文件中，一个字体文件很容易就会动辄4MB甚至超过20MB。因此，对字体文件进行压缩也是必要的。

压缩字体文件主要有两种方案：

• 第一种：从字体文件中提取出常用的文字或仅保留需要用到的文字。
• 第二种：方案的压缩率通常更高，同时也更安全，因为不会出现删掉了实际需要的生僻字的情况。

不过，第二种方案每当更新网站内容时，就要生成新的字体文件，这就需要考虑客户端缓存的影响。

整合css

我们可以通过将CSS整合进一个文件中来提高空间的利用率（原理自行百度"小文件多为什么占用空间大"）同时也能提高插件的压缩率（因为插件压缩的时候只会分析正在压缩的文件，不会分析多个CSS之间的关系）。

整合CSS有两个方案，一种是手动整合，一种是修改源代码。

尽量使用第二种方案，这里我只给出butterfly主题对应的方案，其它主题的读者可以自行摸索或者干脆用第一种方案。

• 修改[butterfly]\source\css\index.styl

// search
if hexo-config('algolia_search.enable')
  @import '_search/index'
  @import '_search/algolia'

if hexo-config('local_search') && hexo-config('local_search.enable')
  @import '_search/index'
  @import '_search/local-search'

+ @import '_custom/*.styl'
+ @import '_custom/*.css'

然后在与该文件同级目录中新建文件夹_custom，接下来，我们把我们自己编写的CSS/styl文件全部放到这里就能直接整合进index.css中了。

本地缓存

另一个简单有效的方案就是配置网站的本地缓存，将网站的一部分静态资源缓存在客户端上。这样客户端在访问网站时，就可以减少一部分网络请求，以此优化用户体验，同时还能减轻服务器负担。

我使用的ServiceWorker进行本地缓存，有兴趣的小伙伴可以看这篇博文：解剖SW原理暨博主SW实现