npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

grunt-bustr

v1.4.1

Published

A static asset versioning plugin for gruntjs which can be used to bust browser cache on a per file basis.

Downloads

28

Readme

Build Status Built with Grunt

Grunt Bustr

A static asset versioning plugin for gruntjs which can be used to bust browser cache on a per file basis.

Methodology

Lots of cache busting plugins append a MD5 or similar hash to the file name in order to get the user's browser to request the new file. A hash proves uniqueness but is not meaningful to humans, a number that is simply incremented gives uniqueness and shows direction. When something is broken in production and you need to know is the browsers is processing an old version of your js or css a simple number can help. Timestamps are even better, they add a third dimension to this by telling you exactly when the file was built while providing uniqueness and direction.

This plugin uses the mtime of the files it finds in the directories you provide and writes those values along with the file name to a version file which your server code would use when including these assets in you html files/templates. The date format that is written in ascending resolution: YYYYMMDDHHMMSS. The reason this version file is needed because each file gets its own version number which means if you only change one file, only that file has its cache busted.

Getting started

Requirements

  • Grunt >= 0.4
  • An empty json file to store the values

Installing

Install to your project by either adding grunt-bustr to you package.json as a dependency or simple run npm install grunt-bustr. Create an empty file to store the values by running touch version.json, then specify that file in the config (example below).

Sample config

module.exports = function(grunt) {
  grunt.initConfig({
		bustr: {
			css: {
				src: 'src/css/', // top level directory to look for files
					options: {
						version: 'version.json' // file that the build values will be written to
					}
			},
			js: {
				src: 'src/js/',
				options: {
					version: 'version.json'
				}
			}
		}
	});
  grunt.loadNpmTasks('grunt-bustr');
};

Contributing

Patches and/or ideas for improvement are welcome.

License

Copyright (c) 2014 Kevin Mulvey, Shutterstock Inc.
Licensed under the Apache v2 license.