rev-web-assets

rev-web-assets

<img src=https://centerkey.com/graphics/center-key-logo.svg align=right width=200 alt=logo>

Revision web asset filenames with cache busting content hash fingerprints

rev-web-assets updates the asset filenames of a website to contain a eight-digit hex hash. The command's console output includes a timestamp and formatting helpful in build systems.

<img src=https://raw.githubusercontent.com/center-key/rev-web-assets/main/screenshot.png width=800 alt=screenshot>

A) Setup

Install package for node:

$ npm install --save-dev rev-web-assets

B) Usage

1. npm scripts

Run rev-web-assets from the "scripts" section of your package.json file.

The first parameter is the source folder. The second parameter is the target folder.

Example package.json scripts:

   "scripts": {
      "revision": "rev-web-assets build/dev/web-app build/prod/web-app"
   },

Try out the first script with the command: npm run revision

2. Global

You can install rev-web-assets globally and then run it anywhere directly from the terminal.

Example terminal commands:

$ npm install --global rev-web-assets
$ rev-web-assets rev-web-assets build/dev/web-app build/prod/web-app

3. CLI Flags

Command-line flags:

Flag	Description	Value
--cd	Change working directory before starting starting.	string
--manifest	Output the list of files to: manifest.json	N/A
--meta-content-base	Make og:image or other url absolute	string
--quiet	Suppress informational messages.	N/A
--summary	Only print out the single line summary message.	N/A

Examples:

• rev-web-assets --cd=web source target   Same as: rev-web-assets web/source web/target
• rev-web-assets source target --quiet   Displays no output.
• rev-web-assets source target --summary   Displays the summary but not the individual filenames.
• rev-web-assets source target --meta-content-base=https://example.net   Prepends the base to <meta> URLs.

URLs in <meta> tag content attributes generally need to be absolute URLs.  Setting the --meta-content-base flag to https://example.net will transform the line of HTML from:

<meta property=og:image content="logo.png">

into something like:

<meta property=og:image content="https://example.net/logo.ad41b20.png">

C) Application Code

Even though rev-web-assets is primarily intended for build scripts, the package can easily be used in ESM and TypeScript projects.

Example:

import { revWebAssets } from 'rev-web-assets';
const options = { saveManifest: true };
const results = revWebAssets.revision('source', 'target', options);
console.log('Number of web files processed:', results.count);

See the TypeScript Declarations at the top of rev-web-assets.ts for documentation.

---

Build Tools

• 🎋 add-dist-header:  Prepend a one-line header comment (with license notice) to distribution files
• 📄 copy-file-util:  Copy or rename a file (CLI tool designed for use in npm scripts)
• 📂 copy-folder-cli:  Recursively copy a folder (CLI tool designed for use in npm scripts)
• 🔢 rev-web-assets:  Revision web asset filenames with cache busting content hash fingerprints
• 🚦 w3c-html-validator:  Check the markup validity of HTML files using the W3C validator

Feel free to submit questions at:
github.com/center-key/rev-web-assets/issues

MIT License