A hexo plugin to minify/optimize HTML, CSS, JS and images. Supports revisioning of assets.
hexo-asset-pipeline has been deprecated.
Asset pipeline for Hexo to support minification and optimization of HTML, CSS, JS and images.
$ npm install hexo-asset-pipeline --save
Add the following snippet in _config.yml
.
Minimal config to enable filters for HTML, CSS, Js and images.
asset_pipeline:
revisioning:
enable: true
clean_css:
enable: true
uglify_js:
enable: true
imagemin:
enable: true
html_minifier:
enable: true
Following are the modules that are being used to process differnet types of assets.
html-minifier is used to minify the HTML files.
Following is the config for html-minifier.
html_minifier:
enable: true
ignore_error: false
exclude:
false
.html_minifier:
ignoreCustomComments: [/^\s*more/]
removeComments: true
removeCommentsFromCDATA: true
collapseWhitespace: true
collapseBooleanAttributes: true
removeEmptyAttributes: true
minifyJS: true
minifyCSS: true
Note: Check html-minifier for more options.
uglify-js is used to minify javascripts.
Following is the config for uglify-js.
uglify_js:
enable: true
mangle: true
output:
compress:
exclude:
- '*.min.js'
false
.uglify_js:
mangle: true
exclude: ['*.min.js']
Note: Check uglify-js for more options.
clean-css is used to minify stylesheets.
Following is the config for clean-css.
clean_css:
enable: true
exclude:
- '*.min.css'
false
.clean_css:
exclude: ['*.min.css']
Note: Check clean-css for more options.
imagemin is used to optimize images.
Following is the config for imagemin.
imagemin:
enable: true
interlaced: false
multipass: false
optimizationLevel: 2
pngquant: false
progressive: false
false
.false
.false
.2
.false
.false
.gif
,jpg
, png
, or svg
. Default to null.imagemin:
interlaced: false
multipass: false
optimizationLevel: 3
pngquant: false
progressive: false
Note: Check imagemin plugins for more options.
revisioning:
enable: true
keep: true
exclude: ['robots.txt', '*.json']
selectors:
'img[data-orign]': data-orign
'img[data-src]': 'data-src'
'img[src]': 'src'
false
.false
.img[data-orign]
will have the URL for asset in data-origin
attribute, this specific case can be helpful for jquery lazyload implementations.revisioning:
enable: false
keep: false
exclude: []
selectors:
'img[data-src]': 'data-src'
'img[src]': 'src'
'link[rel="apple-touch-icon"]': 'href'
'link[rel="icon"]': 'href'
'link[rel="shortcut icon"]': 'href'
'link[rel="stylesheet"]': 'href'
'script[src]': 'src'
'source[src]': 'src'
'video[poster]': 'poster'
exclude
option, glob matching is done using micromatch.