gulp common plug-ins use the gulp-rev

More gulp common plug-ins use please visit: gulp common plug-ins summary

---

gulp-rev This is a static file with random string of hash values, cache cdn solve the problem, a.css -> a-d2f3f35d3.css. According to the static content of the resource, generating md5 signatures, packing out the file name will be added md5 signature, while generating a json to save the file name path correspondence.

rev.manifest.json: Generate source files and add a mapping table after the hash file
gulp-revplug-in can only add a suffix, can not speak of an alternative path in html, if you want to replace the path, you need togulp-rev-collector

Greater use of the document, please click visit gulp-rev tool official website .

installation

A key installation much explanation

 npm install --save-dev gulp-rev

use

const gulp = require('gulp');
const rev = require('gulp-rev');

exports.default = () => (
    gulp.src('src/*.css')
        .pipe(rev())
        .pipe(gulp.dest('dist'))
);

API

• rev() : Static file to add hash suffix
• rev.manifest(path, options) : Makefile map

  • path(Table file storage path):
    Type: string
    Default: rev-manifest.json
    table file storage path.

  • options(Option):
    Type: object

    • base
      Type: string
      Default: process.cwd()
      covering the base of the manifest file.

    • cwd
      Type: string
      Default: process.cwd()
      covering the current working directory manifest file.

    • merge(Merger)
      Type: boolean
      Default: false
      consolidate existing manifest file.

    • transformer(Transformer)
      type: object
      Default: JSON
      with parseand stringifyobject methods. This can be used to provide a custom converter, instead of JSONthe default manifest file converter.

The original path
of the original file path stored in the plug-in source file.revOrigPath . For things like references to the rewriting of assets, which may come in handy.

Assets hash
hash is stored for each revision of the file in the plug-in source file.revHash . You can use it for custom rename the file list or build a different format.

Asset Inventory

const gulp = require('gulp');
const rev = require('gulp-rev');

exports.default = () => (
    // By default, Gulp would pick `assets/css` as the base,
    // so we need to set it explicitly:
    gulp.src(['assets/css/*.css', 'assets/js/*.js'], {base: 'assets'})
        .pipe(gulp.dest('build/assets'))  // 复制原资产build目录
        .pipe(rev())
        .pipe(gulp.dest('build/assets'))  // 写rev的资产build目录
        .pipe(rev.manifest())
        .pipe(gulp.dest('build/assets'))  // 写入清单以build目录
);

List of assets to map the original path to the revised route will be written build/assets/rev-manifest.json:

{
    "css/unicorn.css": "css/unicorn-d41d8cd98f.css",
    "js/unicorn.js": "js/unicorn-273c2c123f.js"
}
 

By default, rev-manifest.jsonit will be replaced as a whole. To merge with an existing list, merge: trueset the output destination (such as base) delivered to rev.manifest():

const gulp = require('gulp');
const rev = require('gulp-rev');

exports.default = () => (
    // By default, Gulp would pick `assets/css` as the base,
    // so we need to set it explicitly:
    gulp.src(['assets/css/*.css', 'assets/js/*.js'], {base: 'assets'})
        .pipe(gulp.dest('build/assets'))
        .pipe(rev())
        .pipe(gulp.dest('build/assets'))
        .pipe(rev.manifest({
            base: 'build/assets',
            merge: true // 与现有清单合并（如果存在）
        }))
        .pipe(gulp.dest('build/assets'))
);

You can choose to call rev.manifest('manifest.json')that which specify a different path or file name.