The gulp useref + rev setting record
Use gulp-useref
to concat assets and revisioning by gulp-rev
. And use gulp-rev-replace
to rewrite path.
Plugin List:
- gulp-useref
- gulp-rev
- gulp-rev-replace
- gulp-filter
Gulp task example:
gulp.task('useref', () => {
let jsFilter = gulpFilter('*.js', {
restore: true
}),
cssFilter = gulpFilter('*.css', {
restore: true
}),
revFilter = gulpFilter(['**/*', '!**/*.template'], {
restore: true
});
return gulp.src('./views/*.template')
.pipe(useref())
.pipe(jsFilter)
.pipe(uglify())
.pipe(jsFilter.restore)
.pipe(cssFilter)
.pipe(csso())
.pipe(cssFilter.restore)
.pipe(revFilter)
.pipe(rev())
.pipe(revFilter.restore)
.pipe(revReplace({
replaceInExtensions: ['.template']
}))
.pipe(gulp.dest('./public/.tmp'));
});
Assets:
<!-- build:js /javascripts/assets.js -->
<script src="/static/js1.js"></script>
<script src="/static/js2.js"></script>
<!-- endbuild -->
Result:
The xxxxxxxxx
is hash string.
<script src="/javasacripts/assets-xxxxxxxxx.js"></script>
留言