Replace the asset parts of html with revisioned filename. You can find some example code here.
$ npm install --save gulp-rev-repvar 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']);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>Type: String
Required: Yes
Path to the asset_manifest.json file generated by https://www.npmjs.com/package/gulp-asset-manifest;
Type: String
Required: Yes
Base path of site's js path.
Type: String
Required: Yes
Base path of site's css path.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent