Grunt-hash-res NPM

grunt-hash-res v0.1.4

Hash static resource files (JS, CSS, images, fonts) and replace the reference url

Getting Started

This plugin requires Grunt >=0.4.0

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-hash-res --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-hash-res');

The "hash_res" task

Task targets, files and options may be specified according to the grunt Configuring tasks guide.

Options

resDir

Type: String
(Required)

Sets the base directory to find resource files.

resReg

Type: Array
(Required)

Sets regular expressions to find reference urls in target files. Example: [ /\.\.\/(images\/[^.]+\.(?:png|gif|jpg))(\??)/g ], the first parentheses should match resource path which relative to resDir, and the sececond parentheses should match an optional query question mark.

force

Type: Boolean
Default: false

If true, will ignore any errors.

hashLen

Type: Number
Default: 7

Usage Examples

grunt.initConfig({
  hash_res: {
    html: {
      options: {
          resDir: './src',
          resReg: [
            /\.\.\/(css\/[^.]+\.css)(\??)/g,
            /\.\.\/(images\/[^.]+\.(?:png|gif|jpg))(\??)/g,
            /\/\/cdn.com\/static\/(js\/[^.]+\.js)(\??)/g
          ]
      },
      files: [
        {
          expand: true,
          cwd: 'src/html',
          src: ['**/*.html'],
          dest: 'dist/html'
        }
      ]
    }
  }
});

Target file src/html/demo.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
  <link rel="stylesheet" href="../css/demo.css">
</head>
<body>
  <img src="../images/demo.png?type=2" alt="demo">
  <script src="//cdn.com/static/js/demo.js"></script>
</body>
</html>

Run hash_res, it will output dist/html/demo.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
  <link rel="stylesheet" href="../css/demo.css?v=2f8dx7d">
</head>
<body>
  <img src="../images/demo.png?v=s93jxu8&type=2" alt="demo">
  <script src="//cdn.com/static/js/demo.js?v=2h7h2gc"></script>
</body>
</html>

Release History

2016-12-06 v0.1.1 Published.

gruntplugin

@infinitebrahmanuniverse/nolb-grunt-h @everything-registry/sub-chunk-1794

7 years ago

7 years ago

7 years ago

7 years ago