hexojs/hexo-asset-pipeline

A hexo plugin to minify/optimize HTML, CSS, JS and images. Supports revisioning of assets.

DEPRECATED!

hexo-asset-pipeline has been deprecated.

hexo-asset-pipeline

Asset pipeline for Hexo to support minification and optimization of HTML, CSS, JS and images.

• Hexo 3.x.x

Installation

$ npm install hexo-asset-pipeline --save

Configuration

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

• revisioning - Enabling revisioning of assets..
• clean_css - Adding options for clean-css.
• uglify_js - Adding options for uglify-js.
• imagemin - Adding options for imagemin.
• html_minifier - Adding options for html-minifier.

Components

Following are the modules that are being used to process differnet types of assets.

HTML (html_minifier)

html-minifier is used to minify the HTML files.

Following is the config for html-minifier.

Options

html_minifier:
  enable: true
  ignore_error: false
  exclude:

• enable - Enable the plugin. Defaults to false.
• ignore_error - Ignore the error occurred on parsing html
• exclude: Exclude files

html_minifier defaults

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.

Javascripts (uglify_js)

uglify-js is used to minify javascripts.

Following is the config for uglify-js.

Options

uglify_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude: 
    - '*.min.js'

• enable - Enable the plugin. Defaults to false.
• mangle: Mangle file names
• output: Output options
• compress: Compress options
• exclude: Exclude files

uglify-js defaults

uglify_js:
  mangle: true
  exclude: ['*.min.js']

Note: Check uglify-js for more options.

Stylesheets (clean_css)

clean-css is used to minify stylesheets.

Following is the config for clean-css.

Options

clean_css:
  enable: true
  exclude: 
    - '*.min.css'

• enable - Enable the plugin. Defaults to false.
• exclude: Exclude files

clean-css defaults

clean_css:
  exclude: ['*.min.css']

Note: Check clean-css for more options.

Images (imagemin)

imagemin is used to optimize images.

Following is the config for imagemin.

Options

imagemin:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false

• enable - Enable the plugin. Defaults to false.
• interlaced - Interlace gif for progressive rendering. Defaults to false.
• multipass - Optimize svg multiple times until it’s fully optimized. Defaults to false.
• optimizationLevel - Select an optimization level between 0 and 7. Defaults to 2.
• pngquant - Enable imagemin-pngquant plugin. Defaults to false.
• progressive - Lossless conversion to progressive. Defaults to false.
• exclude - Exclude specific types of image files, the input value could be gif,jpg, png, or svg. Default to null.

imagemin defaults

imagemin:
  interlaced: false
  multipass: false
  optimizationLevel: 3
  pngquant: false
  progressive: false

Note: Check imagemin plugins for more options.

Revisioning

revisioning:
  enable: true
  keep: true
  exclude: ['robots.txt', '*.json']
  selectors:
    'img[data-orign]':  data-orign
    'img[data-src]': 'data-src'
    'img[src]': 'src'

• enable - Enable revisioning of assets. Defaults to false.
• keep - Keep original assets. Defaults to false.
• exclude - Exclude files from revisioning.
• selectors - It is used so that custom implementations can be processed. Any attribute matching the key should have the asset url in the value. For instance in above example any element matching to img[data-orign] will have the URL for asset in data-origin attribute, this specific case can be helpful for jquery lazyload implementations.

Revisioning defaults;

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'

Note: To match paths in exclude option, glob matching is done using micromatch.

TODO

• Eslint configs
• Test plugin for relative paths
• Add option to add CDN

hexo-asset-pipeline's Issues

Link in readme point to the wrong david-dm

In the readme, https://github.com/hexojs/hexo-asset-pipeline/blob/master/README.md
The link to David js should point to
https://david-dm.org/hexojs/hexo-asset-pipeline

[Suggestion] Change `uglify-js` to `uglify-es`

It would be nice to change uglify-js to uglify-es or add an option to choose between two since now if I have an es6 code the minification for JS is just useless.

Assets cleaner feature

This is a feature request.

1. Some times may be useful to clean empty assets. For example it's may be created by scss (sass) compilation. Or any other hexo plugins may create temp files and doesn't remove it after working. Empty files may be detected by buffer.toString().length === 0 or buffer.length === 0.
2. Some hexo plugin may produce not empty temporary files or big project may contains unused files, images or legacy script, u know. For large project we cant clean it manually and keep project clean. Concept of this feature looks like: Create a db, and loop each text buffer file and save all used files to map. Then iterate hexo routes and remove all files which one does not exists in map of all used files.

lets create cleaner.js filter with config

cleaner:
  enabled: true
  empty: true
  unused: true

gulp-util is deprecated

More info - https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

The following gulp-util API replacements can be used:

• gutil.File => https://www.npmjs.com/package/vinyl
• gutil.replaceExtension => The .extname property on Vinyl objects or https://www.npmjs.com/package/replace-ext
• gutil.colors => https://www.npmjs.com/package/ansi-colors
• gutil.date => https://www.npmjs.com/package/date-format
• gutil.log => https://www.npmjs.com/package/fancy-log
• gutil.template => https://www.npmjs.com/package/lodash.template
• gutil.env => https://www.npmjs.com/package/minimist
• gutil.beep => https://www.npmjs.com/package/beeper
• gutil.noop => https://www.npmjs.com/package/through2
• gutil.isStream => Use the .isStream() method on Vinyl objects
• gutil.isBuffer => Use the .isBuffer() method on Vinyl objects
• gutil.isNull => Use the .isNull() method on Vinyl objects
• gutil.linefeed => Use the string '\n' in your code
• gutil.combine => https://www.npmjs.com/package/multipipe
• gutil.buffer => https://www.npmjs.com/package/list-stream
• gutil.PluginError => https://www.npmjs.com/package/plugin-error

Revisioning turned my src or href attribute into "\undefined"

Like this:

<link rel="stylesheet" href="/undefined">

Terminal doesn't display any error.

After I disabled revisioning, src or href attribute is right.

_config.yml:

asset_pipeline:
  revisioning:
    enable: true

How Do You Refer to Versioned Assets?

The revisioning feature works in that it creates fingerprinted files, but how do I refer to those files in my template? Is there some tag I should use?

Excluding Images

I am having a slight issue excluding images.

...
  imagemin:
    enable: true
   exclude: ['/path/to/image.png', '/path/to/another/image.png']
....

Does not work, images still get minified.

Use case, setting up PWA manifest.json file icons entry.

Example site

Revisioning does not take background and background-image urls into account

Try it by yourself, set revisioning to true and set an image background to a container.

Expected behaviour:
Image should render and the url should have a versioning number appended to the asset name
Current behaviour:
The image is not rendering and the url is the same as the original.

The theme style of the blog is lost after using

and report error 404

Adding automated tests

Hey @bhaskarmelkani

I'm using this plugin on my both blog instances and also I'm developing test utils for hexo here: https://github.com/ertrzyiks/hexo-test-utils

So I thought, I could help you cover this plugin with automated tests to prove utils in battle and add all missing functionality to those utils if we notice any. I can do actual coding part, but before I start I would like to get your consent. If you like the idea, we can discuss what testing framework to use etc.

Cheers,
Mateusz

TODO list

• cover html minifier
  • enable option
  • exclude option
• cover css minifier
  • enable option
  • exclude option
• cover js minifier
  • enable option
  • exclude option
• cover image minifier
  • enable option
  • exclude option
• cover revisioning

Add WebP support to WebMin

Would it be possible to add support to WebP in imagemin?

This would allow to generate the WebP counterpart of the assets images allowing to optimize loading times in compatible browser.

Inserting a "\" instead of "/" when revisioning

Whenever revisioning assets, this will always place a "" somewhere in the URL. This is generally not a huge issue when included in tags, but when CSS is referencing an image, it results in a 404.

I'm not entirely sure what is causing this, but it would be great to have it fixed!

Issue with html_minifier.enable set to false

If html_minifier.enable config set to false, each of generated html files will only contains:

Skipping asset_pipeline.html_minifier.

hexo 3.7.0
hexo-asset-pipeline 1.4.2

Add Logging

Add configuration for logging the output.

Applying revisioning to rss output from hexo-generator-feed?

Is this package achieved？

This npm package has not been updated for three years.

Request cache strategy for image compress

Image compress taking a long time with a lot of posts. please add cache mode to image compressor

html的css/js url并没有替换是什么问题

js文件名都替换成index-ff3aa84bc13ec2a839abcd03494d77a3.js这种形式了，但是html里面依然是index-v1.1.js这种，导致载入失败
配置是默认的，哪里的问题呢

asset_pipeline:
  revisioning:
    enable: true
  clean_css:
    enable: true
  uglify_js:
    enable: true
  imagemin:
    enable: true
  html_minifier:
    enable: true

robots.txt and humans.txt shouldn't be fingerprinted

Can I exclude them somewhere?

humans-9ec36717bd07dd28f998a050986d02f9.txt isn't gonna work. :)

bug(revision): error on file change

Hi @bhaskarmelkani, on hexo server (when a file change), I got this error:

Unhandled rejection TypeError: Cannot read property 'revIndex' of undefined
    at Hexo.run (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/hexo-asset-pipeline/lib/revision.js:29:38)
    at Hexo.tryCatcher (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/util.js:16:23)
    at Hexo.<anonymous> (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/method.js:15:34)
    at /Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/hexo/lib/extend/filter.js:68:35
    at tryCatcher (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/util.js:16:23)
    at Object.gotValue (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/reduce.js:155:18)
    at Object.gotAccum (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/reduce.js:144:25)
    at Object.tryCatcher (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:693:18)
    at Promise._fulfill (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:638:18)
    at Promise._resolveCallback (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:432:57)
    at Promise._settlePromiseFromHandler (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:524:17)
    at Promise._settlePromise (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:693:18)
    at Promise._fulfill (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:638:18)
    at MappingPromiseArray.PromiseArray._resolve (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise_array.js:126:19)
    at MappingPromiseArray._promiseFulfilled (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/map.js:101:18)
    at Promise._settlePromise (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:574:26)

Activity update

@bhaskarmelkani
Since this is an official plugin, I would like to bring this plugin up-to-date (e.g. #32 & #80). May I know if you're still committed to this plugin?

How to revision image in ld+json container

How to revision image in ld+json container embeded inside html?

<!doctype html>
<html>
<head>
  <script type="application/ld+json">{
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "ImageObject",
        "@id": "https://example.com/#primaryimage",
        "inLanguage": "en_US",
        "url": "https://example.com/images/image.png",
        "contentUrl": "https://example.com/images/image.png",
        "width": 1920,
        "height": 1080
      },
    ]
  }</script>
</head>

I mean revision of /images/image.png file.

Travis-CI arm64 support

At the moment, the installation of this package fails on the arms64 (free pool) of travis-ci.

Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib

After enabling imagemin I get following error:

Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib Referenced from: /Users/bartoszlegiec/Projects/hexo-asset-pipeline/node_modules/mozjpeg/vendor/cjpeg

My system: MacOS 10.13.6

Windows 10 x64, node v8.9.4 - buffer.match is not a function

TypeError: buffer.match is not a function
    at C:\Users\xxxxxxxx\Devel\Own\ochronus.com-hexo\node_modules\hexo-asset-pipeline\lib\revision.js:99:19

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict

Hexo version: 3.3.9
hexo-asset-pipeline version: 1.2.5

Running hexo clean and hexo generate causes ERROR Plugin load failed: hexo-asset-pipeline

Full error log:

ERROR Plugin load failed: hexo-asset-pipeline
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:414:25)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/home/wololock/workspace/wololock.github.io/node_modules/hexo-asset-pipeline/lib/filters/index.js:1:76)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
    at Module.require (module.js:366:17)
    at require (/home/wololock/workspace/wololock.github.io/node_modules/hexo/lib/hexo/index.js:216:21)
    at /home/wololock/workspace/wololock.github.io/node_modules/hexo-asset-pipeline/index.js:1:82
    at /home/wololock/workspace/wololock.github.io/node_modules/hexo/lib/hexo/index.js:232:12
    at tryCatcher (/home/wololock/workspace/wololock.github.io/node_modules/hexo/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/home/wololock/workspace/wololock.github.io/node_modules/hexo/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/home/wololock/workspace/wololock.github.io/node_modules/hexo/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/home/wololock/workspace/wololock.github.io/node_modules/hexo/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/home/wololock/workspace/wololock.github.io/node_modules/hexo/node_modules/bluebird/js/release/promise.js:693:18)
    at Promise._fulfill (/home/wololock/workspace/wololock.github.io/node_modules/hexo/node_modules/bluebird/js/release/promise.js:638:18)

package.json

{
  "name": "sitename",
  "version": "1.0.0",
  "private": true,
  "hexo": {
    "version": "3.3.9"
  },
  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-asset-pipeline": "^1.2.5",
    "hexo-browsersync": "^0.2.0",
    "hexo-deployer-git": "^0.3.1",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-cname": "^0.3.0",
    "hexo-generator-feed": "^1.2.2",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-sitemap": "^1.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.0",
    "hexo-renderer-jade": "^0.4.1",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-renderer-sass": "^0.3.2",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0"
  }
}

refactor(plugin): plugin fails to load if no config provided

Plugin fails to load if no config provided.. would be a good idea providing defaults?

Here the stack trace:

ERROR Plugin load failed: hexo-asset-pipeline
TypeError: Cannot read property 'clean_css' of undefined
    at /Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/hexo-asset-pipeline/index.js:14:109
    at /Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/hexo/lib/hexo/index.js:232:12
    at tryCatcher (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:693:18)
    at Promise._fulfill (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:638:18)
    at Promise._resolveCallback (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:432:57)
    at Promise._settlePromiseFromHandler (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:524:17)
    at Promise._settlePromise (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:693:18)
    at Promise._fulfill (/Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/promise.js:638:18)
    at /Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/bluebird/js/release/nodeback.js:42:21
    at /Users/rbarilani/Workspaces/stargate/merchant-center-documentation/node_modules/graceful-fs/graceful-fs.js:78:16
    at tryToString (fs.js:448:3)
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:435:12)

Upgrade imagemin to mitigate deprecation warning

npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated

npm list resolve-url
└─┬ [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └─┬ [email protected]
          └─┬ [email protected]
            └─┬ [email protected]
              └── [email protected] 

Imagemin has new version https://www.npmjs.com/package/imagemin

Plugin load failed - clean_css of undefined

I've installed the package and when I start hexo server I get these errors at the beginning, although the server starts up

ERROR Plugin load failed: hexo-asset-pipeline
TypeError: Cannot read property 'clean_css' of undefined
    at /Users/ak/Documents/GitHub/website/node_modules/hexo-asset-pipeline/index.js:14:109
    at /Users/ak/Documents/GitHub/website/node_modules/hexo/lib/hexo/index.js:232:12

My package.json

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.3.7"
  },
  "engines": {
    "node": "6.10"
  },
  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-asset-pipeline": "^1.1.2",
    "hexo-autoprefixer": "^1.0.0",
    "hexo-browsersync": "^0.2.0",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.0",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-renderer-scss": "^1.0.2",
    "hexo-server": "^0.2.0"
  }
}