@4awpawz/buster

A configurable cache buster called Buster. Buster busts your browser cache problems.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
92May 9, 2021Apr 15, 2018Minified + gzip package size for @4awpawz/buster in KB

Readme

A Cache Buster Called Buster

Buster busts your browser cache problems!

Version

1.0.0

Features

  • Cache busts your project's files in place.

  • Fingerprints (renames) files using MD5 hash-based cache busting file names.

  • Replaces references in files to original file names with their MD5 hash-based file names.

  • Optionally outputs a manifest file to buster.manifest.json.

  • Simple and intuitive configuration using .buster.json.

  • Invokable via the command line and scriptable.

  • Easily integrates into your project workflow.

Installation

Install Globally

$ npm install -g @4awpawz/buster

Install Locally

$ npm install --save-dev @4awpawz/buster

Buster Primer

Project Relative File Paths And Site Relative URLs

In the documentation that follows, references are made to project relative file paths and to site relative URLs.

  1. "Project relative file paths" pertain strictly to your project's file structure. They are used to declare the input in operational directives when declaring the file paths to assets in your project that you want targeted by Buster for cache busting.

  2. "Site relative URLs" pertain strictly to your website's runtime environment and are used to reference assets throughout your site (e.g. the src attribute of an img tag, the href attribute of a link tag, the URL() CSS function declared inside of a CSS stylesheet).

The important thing here is to understand that in order for Buster to perform its cache busting you, the developer, must insure that your site employs site relative URLs when referencing its assets. This is because Buster converts your project relative file paths to site relative URLs which it then uses to search the content of your site's files for site relative URLs that need to be updated to point to the assets it has fingerprinted with unique hashes.

A Typical Buster Work Flow

Your development build tool generates your production ready site (as opposed to development) into your project's release folder. When configuring Buster to cache bust your site, you would target your project files in the release folder by using project relative file paths in your Buster configuration's operational directives. Then from the root of your project you can use the command line to run Buster to cache bust your site in the release folder. You can then run your site from the release folder to insure that it is functioning as expected and once it is determined that it is functioning as expected you can then deploy your site directly from the release folder to its server using a command line utility such as rsync.

In a typical website project with the following or similar project structure

|- myproject
|- |- release/
|- |- |- media/
|- |- |- |- housecat.jpg
|- |- |- index.html
|- |- .buster.json

the project relative file path used in an operational directive to target housecat.jpg would be release/media/housecat.jpg and the site relative URL used to identify the image file in the browser would be media/housecat.jpg.

Operational Directives

Buster employs a concept called an Operational Directive, abbreviated od, which you declare in your .buster.json configuration file and which Buster uses to direct the operations it performs on your project's files. Each od is comprised of 2 parts, an input, and an operation.

Input

A project relative file path to one or more files.

Supports globs/wildcard patterns.

Important Buster assumes that all project relative file paths are relative to process.cwd().

Important Buster implements its glob support using node package glob. Please refer to node package glob should you need additional information on using globs with Buster.

Operation

Indicates the actions that Buster is to perform on the od's input file(s). It is a number preceded by a colon which separates the number from the input (e.g. ":1"). The following 3 operations are currently supported:

:1

Apply this operation only to those files whose own file names are to be fingerprinted for cache busting purposes (e.g. .jpg, .gif, .map).

The format of each unique MD5 hash-based file name will be [original file's base name].[unique hash].[original file's extension] (e.g. cat.[unique hash].jpg). Should the original file's base name contain 1 or more periods (e.g. main.js.map) the format of the MD5 hash-based file name will, as an example, be main.[unique hash].js.map.

:2

Apply this operation only to those files whose contents are to be searched for site relative URLs that point to assets whose file names have been fingerprinted and therefor need to be updated and whose own file names are not to be fingerprinted for cache busting purposes.

:3

Apply this operation only to those files whose own file names are to be fingerprinted for cache busting purposes (e.g. .jpg, .gif, .map) and whose contents are to be searched for site relative URLs that point to assets whose file names have been fingerprinted and therefor need to be updated.

The format of each unique MD5 hash-based file name will be [original file's base name].[unique hash].[original file's extension] (e.g. cat.[unique hash].jpg). Should the original file's base name contain 1 or more periods (e.g. main.js.map) the format of the MD5 hash-based file name will, as an example, be main.[unique hash].js.map.

Operational Directive Examples

Example Operational Directives Using Project Relative File Path:

Given the following project structure

|- myproject
|- |- release/
|- |- |- media/
|- |- |- |- housecat.jpg
|- |- |- index.html => contains img tag with a site relative url for its src i.e. <img src="/media/housecat.jpg">
|- |- .buster.json

and running Buster from the command line in the myproject folder with the following operational directives

`release/media/housecat.jpg:1`
`release/index.html:2`

will result in the following:

|- myproject
|- |- release/
|- |- |- media/
|- |- |- |- housecat.[unique hash].jpg
|- |- |- index.html => now contains img tag whose src attribute points to hashed img i.e. <img src="/media/housecat.[unique hash].jpg">
|- |- .buster.json

Example Operational Directives Using Project Relative File Paths And Globs:

Given the following project structure

|- myproject
|- |- release/
|- |- |- media/
|- |- |- |- housecat.jpg
|- |- |- |- purringcat.jpg
|- |- |- |- bigcats/
|- |- |- |- |- lion.jpg
|- |- |- |- |- tiger.jpg
|- |- |- index.html => contains img tags with site relative urls for its src e.g. <img src="/media/housecat.jpg">, <img src="/media/bigcats/lion.jpg">
|- |- .buster.json

and running Buster with the following directives

`release/media/**/*.jpg:1
`release/**/*.html:2`

will result as follows:

|- myproject
|- |- release/
|- |- |- media/
|- |- |- |- housecat.[unique hash].jpg
|- |- |- |- purringcat.[unique hash].jpg
|- |- |- |- bigcats/
|- |- |- |- |- lion.[unique hash].jpg
|- |- |- |- |- tiger.[unique hash].jpg
|- |- |- index.html => now contains img tags whose src attributes point to hashed img i.e. <img src="/media/housecat.[unique hash].jpg">, <img src="/media/bigcats/lion.[unique hash].jpg">
|- |- .buster.json

buster.json Configuration

Important Buster expects .buster.json to reside in your project's root folder, alongside package.json.

{
    "options": {
        "manifest": true,
        "verbose": true,
        "ignore": "media/original/**/*.jpg,media/original/**/*.gif"
    },
    "directives": [
        "release/media/**/*.jpg:1",
        "release/./index.html:2",
        "release/css/test.css:3",
        "release/script/test.js:3"
    ]
}

Options

Buster supports the following configuration options:

ignore

A quoted list of one or more comma separated project relative file paths to files that are to be ignored, defaults to "".

Supports globs and wildcard characters patterns.

manifest

A boolean, true to save the manifest to buster.manifest.json in the project's root folder, defaults to false.

verbose

A boolean, true to output verbose logging, defaults to false.

Typical Workflows

Using Buster In Node Projects

When using Buster in a Node project, install Buster locally:

~/Development/myproject > $ npm install --save-dev @4awpawz/buster

Then create .buster.json in your project's root folder, alongside package.json.

{
    "directives": [
        "release/media/**/*.jpg:1",
        "release/css/**/*.css.map:1",
        "release/scripts/**/*.js.map:1",
        "release/**/*.html:2",
        "release/css/**/*.css:3",
        "release/scripts/**/*.js:3"
    ]
}

Then create an NPM script to call buster to cache bust your site:

"scripts": {
    "bust": "buster"
}

From the root folder of your project, enter the following to cache bust your project:

~/Development/myproject $ npm run bust

Calling Buster From A Script

Buster can be called from a script, allowing it to be used as part of a greater workflow.

Scripting Buster to cache bust your project:

const buster = require("@4awpawz/buster");

const paramsConfig = {
    options: {
        manifest: true
    },
    directives: [
        "release/media/**/*.jpg:1",
        "release/css/**/*.css.map:1",
        "release/scripts/**/*.js.map:1",
        "release/**/*.html:2",
        "release/css/**/*.css:3",
        "release/scripts/**/*.js:3"
    ]
}

await buster(paramsConfig);

Filing Bugs And Feature Requests

Changelog

v1.0.0

This is the first major release of Buster and incorporates many breaking changes from prior versions. Most notably, prior versions had a "safe mode" configuration option that would instruct Buster to cache bust "in place", meaning that it would not create backups and would not be able to restore files to their prior state. As it turns out, the vast majority of Buster's users are using "safe mode" because it fits their workflow of generating their site into a dedicated folder that can be cache busted and that could easily be repopulated by just regenerating the site. These changes were implemented to refactor Buster to precisely match this typical workflow. You can read more about the decision to refactor Buster at https://gettriossg.com/blog/news/2021/03/23/next-feature-release/.

v0.3.1

This release addresses fixes for security warnings for packages used internally by Buster only. There are no changes to the code base.

v0.3.0

This release addresses one bug and fixes for security warnings for packages used internally by Buster only. Also landing with this release is reduced console output; use the verbose config option if needed.

Major bug fixes:

  • Addresses issue #14 which could cause Buster to mangle hashed file names. *Please note that beginning with this release, Buster now generates hashed file names as [hash]-[file name].[file extension]. You are strongly advised to upgrade your projects and rebuild them.*

v0.2.4

This release addresses fixes for security warnings for packages used internally by Buster only. There are no changes to the code base.

v0.2.3

Major bug fixes:

  • Addresses issue #13 which would cause Buster to crash when reading a configuration file that doesn't exist.
  • Addresses issue #12 which would cause Buster to crash when setting paramsConfig to a default value of {} to indicate that it wasn't passed.

v0.2.2

This release includes no changes to the code base.

  • Addresses issue #11 which seeks to lockdown all project dependencies including descendants using NPM's shrinkwrap.

v0.2.1

Major and minor bug fixes - includes but not limited to the following:

  • Addresses issue 10 which would cause buster to fail when reading command line configuration data belonging to the application that launched it with paramsConfig.

  • Addresses issue #9 which would sometimes cause restore to fail. This fix totally replaces the one introduced in v0.2.0, and now handles the issue earlier in the restore processing cycle.

v0.2.0

Major refactor - includes but not limited to the following:

  • Introduces experimental "safe mode" feature, resolves #6.

  • v0.1.6 breaks handling of backup files bug, fixes #5.

  • Removes hashed files from the manifest returned by glob during restore.

  • Implements new resolution of destination paths.

  • Removes the "file-exists" package from the project.

  • Catching some async exceptions to prevent unresolved promise exceptions.

  • Configuration attempts to resolve from paramsConfig (i.e. passed via a script) first.

  • Updated README.md

v0.1.6

  • Addresses a bug in command-line processing which would cause Buster to crash when the user enters only "bust" or "restore" from the command-line.

  • Addresses a bug in od processing which would cause Buster to crash when attempting to create folders that already exist.

  • Addresses a bug in od processing which would cause Buster to crash when attempting to delete files that no longer exist.

Copyright And License

Copyright © 2018, Jeffrey Schwartz. Released under the MIT license.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.