Hexo 资源压缩 | hexo-all-minifier
项目地址
https://github.com/chenzhutian/hexo-all-minifier
使用方法
安装
$ npm install hexo-all-minifier --save
简单配置
在 _config.yml 里添加
all_minifier: true
全部配置
详细说明见 README
html_minifier:
enable: true
ignore_error: false
exclude:
css_minifier:
enable: true
exclude:
- '*.min.css'
js_minifier:
enable: true
mangle: true
compress:
exclude:
- '*.min.js'
js_concator:
enable: false
bundle_path: '/js/bundle.js'
front: false
silent: false
image_minifier:
enable: true
interlaced: false
multipass: false
optimizationLevel: 2
pngquant: false
progressive: false
源码学习
// /node_modules/hexo-all-minifier/index.js
const isEnabled = process.env.NODE_ENV !== 'development'
&& (hexo.config.hasOwnProperty('all_minifier') === false ||
hexo.config.all_minifier === true);
if (isEnabled) {
// ...
}
由于压缩处理时间较长,开发时热更频繁,所以这里判断了环境变量,开发环境不启用压缩,也是挺人性化的,所以我们的 npm 脚本可以写成这样
"dev": "NODE_ENV=development hexo s"
// /node_modules/hexo-all-minifier/index.js
if (isEnabled) {
// HTML minifier
hexo.config.html_minifier = Object.assign({
enable: true,
exclude: [],
ignoreCustomComments: [/^\s*more/],
removeComments: true,
removeCommentsFromCDATA: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeEmptyAttributes: true,
minifyJS: true,
minifyCSS: true,
silent: false
}, hexo.config.html_minifier);
// Css minifier
hexo.config.css_minifier = Object.assign({
enable: true,
exclude: ['*.min.css'],
silent: false
}, hexo.config.css_minifier);
// Js minifier
hexo.config.js_minifier = Object.assign({
enable: true,
mangle: true,
output: {},
compress: {},
exclude: ['*.min.js'],
silent: false
}, hexo.config.js_minifier);
// Image minifier
hexo.config.image_minifier = Object.assign({
enable: true,
interlaced: false,
multipass: false,
optimizationLevel: 3,
pngquant: false,
progressive: false,
silent: false
}, hexo.config.image_minifier);
// Js concator
hexo.config.js_concator = Object.assign({
enable: false,
bundle_path: 'js/bundle.js',
front: false,
silent: false
}, hexo.config.js_concator);
hexo.extend.filter.register('after_render:html', require('./lib/optimizeHTML'));
hexo.extend.filter.register('after_render:css', require('./lib/optimizeCSS'));
hexo.extend.filter.register('after_render:js', require('./lib/optimizeJS'));
hexo.extend.filter.register('after_generate', require('./lib/optimizeImage'));
hexo.extend.filter.register('after_generate', require('./lib/concatJS'));
}
这里初始化了一些默认的配置项,然后注册了一些渲染后钩子函数,处理函数在
./lib
文件夹下。
- optimizeHTML 依赖
html-minifier
- optimizeCSS 依赖
clean-css
- optimizeJS 依赖
uglify-es
- optimizeImage 依赖
imagemin
问题解决
- 图片压缩报错
# Hint
$ Error: spawn /.../node_modules/jpegtran-bin/vendor/jpegtran ENOENT
# 解决方案
# Reference: https://github.com/imagemin/imagemin/issues/154
$ yarn add -D jpegtran-bin