压缩静态资源

Gulp压缩文件

首先感谢群里这个大佬发的这个PDF资料，我把它整理成文章分享在这，希望以后自己忘了也是一种不错的笔记

能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括 CSS、JS、HTML 和各类格式的图片。但图片文件的压缩往往只能节省几十 KB，效果远不如imagine、tinypng 等压缩方式，所以此处不再写使用 Gulp 压缩图片。

以下操作都在 Git Bash here 界面进行。

1. 安装 Gulp 插件

# 全局安装 gulp 指令集

npm install --global gulp-cli

# 安装 gulp 插件

npm install gulp --save

2. 安装压缩 HTML 的插件

npm install gulp-htmlclean --save-dev
# ⽤ gulp-html-minifier-terser 可以压缩 HTML 中的 ES6 语法
npm install gulp-html-minifier-terser --save-dev

3. 安装压缩 CSS 的插件

npm install gulp-clean-css --save-dev

4.安装压缩 JS 的插件

npm install gulp-terser --save-dev

npm install gulp-fontmin --save-dev

5.创建 gulpfile.js 任务脚本

在博客根目录下新建 gulpfile.js ，打开 gulpfile.js ，添加以下内容。

//⽤到的各个插件
var gulp = require("gulp");
var cleanCSS = require("gulp-clean-css");
var htmlmin = require("gulp-html-minifier-terser");
var htmlclean = require("gulp-htmlclean"); var fontmin = require("gulp-fontmin");
// gulp-tester
var terser = require("gulp-terser");

// 压缩js gulp.task("compress", () =>
gulp
.src(["./public/**/*.js", "!./public/**/*.min.js"]) .pipe(terser())
.pipe(gulp.dest("./public"))
);

//压缩css gulp.task("minify-css", () => {
return gulp .src(["./public/**/*.css"])
.pipe(
cleanCSS({
compatibility: "ie11",
})
)
.pipe(gulp.dest("./public"));
});

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

//压缩字体
function minifyFont(text, cb) {
gulp
.src("./public/fonts/*.ttf") //原字体所在⽬录.pipe(
fontmin({
text: text,
})
)
.pipe(gulp.dest("./public/fonts")) //压缩后的输出⽬录.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("compress", "minify-css", "minify-html", "mini-
font") );

注意：压缩字体的格式只能为 ttf 格式，且字体应该存放在 source\fonts 目录下。你也可以按照你的文件存放位置修改 gulpfile.js 。

6.压缩静态文件

打开 Git Bash here 界面，输入以下指令，开始压缩静态文件。

前提：已 hexo g 生成静态文件。

gulp

如果存在字体文件，压缩效率可达 70%。

使用 Gulp 后，命令如下：

hexo cl && hexo g && gulp && hexo d
hexo cl && hexo g && gulp && hexo s

参考文章：使用 gulp 压缩博客静态资源 | Akilar の糖果屋

常用字字体子集化

在博客上，有一些字，我们想用专门的字体显示，比如博客的标题。中文字体一般都差超过 10MB，只用来显示博客标题，未免有些浪费空间，还减缓网站加载速度。所以我们可以使用 fontmin-app 提取我们想要的字符，并转换成 svg、ttf、woff、eot 等格式。

guthub 链接：GitHub - ecomfe/fontmin-app: fontmin as an OS X, Linux and Windows app

fontmin-app 下载链接：Fontmin-v0.2.0-win64.exe.zip - 蓝奏云 (lanzout.com)

fontmin-app 使用方法如下：

经测试，使用 fontmin-app 转换的字体，只有使用字体名-embed.css 内的 base64 编码内嵌，才能正确显示。

示例

/* 以下内容添加至你的 css 文件中 */
@font-face {    font-family: "LXGW_title";    src: url(data:application/x-font-ttf;charset=utf8;base64,xUKEgKTQF6jzao0LxQFDRATDiMdGWClVpBrLTX9yEzDbU5WKShWik6CTAhCDQgOAQIVEQcOGQAAAgAu/+QCCwHwAB0ALAAABSInDgEjIiY1NDc2MzIXNTQyFh0BFDEGFRQXFhQGJRQzMjc2NTQ1BiInAEoATABRAFgBAgEDAQQHdW5pNTM1QQd1bmk3Njg0B3VuaTVCQTI=) format("truetype");    
    font-style: normal;    
    font-weight: normal;
}