gulp-rev-collector

Static asset revision data collector from manifests, generated from different streams, and replace their links in html template.

Install

1$ npm install --save gulp-rev-collector

Usage

We can use gulp-rev to cache-bust several assets and generate manifest files for them. Then using gulp-rev-collector we can collect data from several manifest files and replace links to assets in html templates.

1var gulp         = require('gulp');
2var rev = require('gulp-rev');
3
4gulp.task('css', function () {
5    return gulp.src('src/css/*.css')
6        .pipe(rev())
7        .pipe(gulp.dest('dist/css'))
8        .pipe( rev.manifest() )
9        .pipe( gulp.dest( 'rev/css' ) );
10});
11
12gulp.task('scripts', function () {
13    return gulp.src('src/js/*.js')
14        .pipe(rev())
15        .pipe(gulp.dest('dist/js'))
16        .pipe( rev.manifest() )
17        .pipe( gulp.dest( 'rev/js' ) );
18});
19
20...
21
22var revCollector = require('gulp-rev-collector');
23var minifyHTML   = require('gulp-minify-html');
24
25gulp.task('rev', function () {
26    return gulp.src(['rev/**/*.json', 'templates/**/*.html'])
27        .pipe( revCollector({
28            replaceReved: true,
29            dirReplacements: {
30                'css': '/dist/css',
31                '/js/': '/dist/js/',
32                'cdn/': function(manifest_value) {
33                    return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value;
34                }
35            }
36        }) )
37        .pipe( minifyHTML({
38                empty:true,
39                spare:true
40            }) )
41        .pipe( gulp.dest('dist') );
42});

Options

collectedManifest

Type : String

It is a filename for collecded and merged manifest data in json format.

replaceReved

Type : Boolean

You set a flag, replaceReved, which will replace alredy replaced links in template's files. Default value is false.

dirReplacements

Type : Object

Specifies a directories replacement set. gulp-rev creates manifest files without any info about directories. E.c. if you use dirReplacements param from Usage example, you get next replacement:

"/css/style.css" => "/dist/css/style-1d87bebe.css"
"/js/script1.js" => "/dist/script1-61e0be79.js"
"cdn/image.gif"  => "//cdn8.example.dot/img/image-35c3af8134.gif"

revSuffix

Type : String

It is pattern for define reved files suffixes. Default value is '-[0-9a-f]{8,10}-?'. This is necessary in case of e.c. gulp-rename usage. If reved filenames had different from default mask.

extMap

Type : Object

If You use some methods to modify the rev_manifest.json after use gulp-rev and get a result like this:

{
    "assets/less/common.less": "assets/css/common-2c0d21e40c.css"
}

It means that keys and values in the rev_manifest.json have different ext : less & css.

You can define extentions maping rules for correct manifest file processing.

Default value is:

{
    '.scss': '.css',
    '.less': '.css',
    '.jsx': '.js'
}

Works with gulp-rev-collector

• gulp-rev

License

MIT © Oleksandr Ovcharenko