Gulp-assets-version-replace NPM

gulp-assets-version-replace

Grunt version is here

中文文档

Gulp plugin for managing version of assets, easy to build new version to commit and deploy.

Features

Generate new file for js,css etc. based on md5 of file contents
Create new version only for changed assets
Auto replace versioned assets in template files, like php, python Django, Expressjs ejs and etc.

Examples

1. File structure

Assets structure：

js_build/app.js
css_build/webapp.css

Files under js_build and css_build are generated by compass uglify

Links in templates：

<link href="static/dist/css_build/webapp.__placeholder__.css" />

Note: __placeholder__ is a placeholder when it has not been versioned yet

2. Configs in gulpfile.js：

gulp.task('assetsVersionReplace', function () {
  gulp.src(['css_build/*.css', 'js_build/*.js'])
    .pipe(assetsVersionReplace({
      replaceTemplateList: [
        'php-templates/header.php',
        'php-templates/footer.php'
      ]
    }))
    .pipe(gulp.dest('dist/'))
});

3. Run gulp task

gulp assetsVersionReplace in your terminal.

Your get these result:

Files named with generated version

dist/js_build/app.c7ccb6b8ce569a65ed09d4256e89ec30.js
dist/css_build/webapp.2af81cda4dacbd5d5294539474076aae.css

Links in templates have been replaced with generated version

<link href="static/dist/css_build/webapp.2af81cda4dacbd5d5294539474076aae.css" />

4. Commit

The changes of template contain version string, commit directly if you are deployoing a static site.

More Example

In some case templates are created by other gulp task before replacing version string. versionsAmount: 0 option is introduced for this reason.
See following example, the templates in the dist folder are always have __placeholder__ as they are copied from dev folder each time run gulp task. Setting versionsAmount: 0 will make version replacing works in this case.

gulp.task('copyTemplates', function () {
  return gulp.src('php-templates-dev/*.php')
        .pipe(usemin({
            jsmin: uglify()
        }))
        .pipe(gulp.dest('php-templates-dist'));
})
gulp.task('assetsVersionReplace', ['copyTemplates'], function () {
  return gulp.src(['css_build/*.css', 'js_build/*.js'])
    .pipe(assetsVersionReplace({
      versionsAmount: 0,
      replaceTemplateList: [
        'php-templates-dist/header.php',
        'php-templates-dist/footer.php'
      ]
    }))
    .pipe(gulp.dest('dist/'))
});

Gulp4 Example

A gulp4 example of using this plugin is here: gulp-workflow

Install

npm install gulp-assets-version-replace --save-dev

In your gulpfile.js place this line:

var assetsVersionReplace = require('gulp-assets-version-replace');

A json file called gulp-assets-version-replace-version.json will be created beside your gulpfile.js to store versions.

Form asset link as following in your template:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>test</title>
  <link href="static/dist/css_build/app.__placeholder__.css" />
  <link href="static/dist/css_build/desktop.__placeholder__.css" />
</head>
<body>

Notes: __placeholder__ is a placeholder for replacing with generated versions at first time

Gulp Plugin Options

options.versionsAmount

How many versions to keep in your local json file. Set 0 to disable local save.

options.replaceTemplateList

List of templates which contain assets links of tsFiles . Support whatever extension like php, python Django, Express and etc. Make sure give templates paths relative to gulpfile.js.

Optional: true Value Type: Array Default Value: []