topechelon / gulp-fingerprint

A gulp task to update fingerprinted assets from a rev-manifest.json file

gulp-fingerprint

Install

$ npm install --save-dev gulp-fingerprint

Usage

Update a source file with fingerprinted assets.

var gulp = require('gulp');
var fingerprint = require('gulp-fingerprint');

// rev-manifest.json produced from gulp-rev
var manifest = require('../../dist/rev-manifest');

gulp.task('default', function () {
  var options = {
    base: 'assets/',
    prefix: '//cdn.example.com/',
    verbose: true
  };

  return gulp.src('.tmp/styles/app.css')
    .pipe(fingerprint(manifest, options))
    .pipe(gulp.dest('dist'));
  });

API

fingerprint(manifest, [options])

manifest

Type: object, string

Example: rev-manifest.json produced from using gulp-rev

{
  "images/logo.jpg": "images/logo-2d4a1176.jpg",
  "images/some-image.png": "images/some-image-abd84705.png",
  "images/some-logo2.png": "images/some-logo2-abd84715.png"
}

If a string is passed in as the manifest, gulp-fingerprint will interpret this as a path and automatically require the json file.

options

mode

Type: string

Default: regex

Usage: Setting a mode will change the method of url replacing. There are two methods: regex and replace. The replace method is less accurate but doesn't require specifying a regular expression.

regex

Type: RegExp

Usage: Sets a custom regex to match on your file.

_ Note The default regex, /(?:url\(["']?(.*?)['"]?\)|src=["'](.*?)['"]|src=([^\s\>]+)(?:\>|\s)|href=["'](.*?)['"]|href=([^\s\>]+)(?:\>|\s))/g, will match:

• url('path/to/resource')
• url("path/to/resource")
• url(path/to/resource)
• href='path/to/resource'
• href="path/to/resource"
• href=path/to/resource
• src='path/to/resource'
• src="path/to/resource"
• src=path/to/resource

prefix

Type: string

Usage: Setting a prefix will prepend the string to a match in the src

...
.pipe(fingerprint(manifest, {prefix: '//cdn.example.com/'}))
...
// Original: `background-image: url("/images/some-logo.png");`
// Replaced: `background-image: url("//cdn.example.com/images/logo-2d4a1176.jpg");` in src file

base

Type: string

Usage: Setting a base will remove that string from the beginning of a match in the src

...
.pipe(fingerprint(manifest, {base: 'assets/'}))
...

// Original: `background-image: url("assets/images/some-logo2.png");`
// Replaced: `background-image: url("images/some-logo2-abd84715.png");` in src file

strip

Type: string

Usage: Setting a strip will remove that string from the beginning of a result path

...
.pipe(fingerprint(manifest, {strip: 'images/'}))
...

// Original: `background-image: url("/images/some-logo2.png");`
// Replaced: `background-image: url("some-logo2-abd84715.png");` in src file

verbose

Type: boolean

Usage: Outputs to stdout.

[gulp] gulp-fingerprint Found: images/some-logo.png
[gulp] gulp-fingerprint Replaced:   background-image: url("//cdn.example.com/images/logo-2d4a1176.jpg"); }

License

MIT © Vincent Mac