Gulp-rev-rep NPM

gulp-rev-rep

Replace the asset parts of html with revisioned filename. You can find some example code here.

Install

$ npm install --save gulp-rev-rep

Usage

var rep = require('gulp-rev-rep');
var rev = require('gulp-rev');

// group the asset files
var config = {};

config['csses'] = {
	libs: [
		'libfile1.css',
		'libfile2.css',
		'libfile3.css'
	],
	user: [
		'assets/user/*.css'
	]
};

config['jses'] = {
	libs: [
		'libfile1.js',
		'libfile2.js',
		'libfile3.js'
	],
	user: [
	    'assets/user/*.js'
	]
}

// css & js tasks
gulp.task('scss', function(){ /* function */ });
gulp.task('js', function(){ 
    // use gulp-rev to version the asset files and generate the 'asset-manifest.json' file
});
gulp.task('css', ['scss'], function(){
    // use gulp-rev to version the asset files and generate the 'asset-manifest.json' file
});


/*
asset_manifest.json file contents:

{ libs:
   [ 'libfile1.min-eedf9ee80c.css',
    'libfile2.min-jokf9ee80c.css',
    'libfile3.min-eedoefe80c.css',
     'libfile1.min-5b860c722c.js',
     'libfile2.min-5b8oke722c.js',
     'libfile3.min-5b8lkj722c.js' ],
  user: [ 'user1-07422103d7.css', 'user1-fdfsdkflj.js' ] }
*/

// replacement task
gulp.task('rep', ['js', 'css'], function(){
	gulp.src(['html/**/*.html'])
		.pipe(rep({
		    manifestPath: 'asset_manifest.json',
			jsPath: '/static/js',
			cssPath: '/static/css/'
		}))
		.pipe(gulp.dest('public'))
});

gulp.task('default', ['css', 'js', 'rep']);

Result

from html/index.html:

<html>

<!-- libs assets -->
<% bundleName:libs %>

<!-- user page assets -->
<% 
 bundleName :
 user  %>

</html>

to public/index.html:

<html>

<!-- libs assets -->
<link rel="stylesheet" href="/static/css/libfile1.min-eedf9ee80c.css" />
<link rel="stylesheet" href="/static/css/libfile2.min-jokf9ee80c.css" />
<link rel="stylesheet" href="/static/css/libfile3.min-eedoefe80c.css" />
<script src="/static/js/libfile1.min-5b860c722c.js"></script>
<script src="/static/js/libfile2.min-5b8oke722c.js"></script>
<script src="/static/js/libfile3.min-5b8lkj722c.js"></script>

<!-- user page assets -->
<link rel="stylesheet" href="/static/css/user1-07422103d7.css" />
<script src="/static/js/user1-fdfsdkflj.js"></script>

</html>