gulp-fingerprint

Rename assets with fingerprinted assets

gulp-fingerprint

$ npm install --save-dev gulp-fingerprint

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'));
  });

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 it's a string, it will be interpretered as path to json file.

Type: string

Default: regex

Usage: Setting a prefix will change the method of url replacing. There are two methods: regex and replace. Second method is less accurate but doesn't require to specify complicated regular expression.

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

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 

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 

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 

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"); }

MIT © Vincent Mac