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>

留言

熱門文章