2

So I've used gulp-usemin for a while and generally like it. In particular, I love the built in cache-busting ability

Before 

<!-- build:js js/app.js -->
<script type="text/javascript" src="js/script1.js"></script>
<script type="text/javascript" src="js/script2.js"></script>
<script type="text/javascript" src="js/script3.js"></script>
<!-- endbuild -->

Run

return gulp.src( './public/index.html')
    .pipe( usemin({
        js: [uglify(), rev()]
    }))
    .pipe( gulp.dest('./dist') );

After

<script type="text/javascript" src="js/app-d8ce9cc5.js"></script>

However, recently I've been using browserify, which builds the source tree via node-style require statements.

Before

// index.html
<script type="text/javascript" src="js/app.js"></script>

// js/app.js
require('angular');
require('./ngmodules/customFilters');
require('./components/feature/feature');

Run

return browserify( './public/js/app.js' )
    .bundle()
    .pipe( source('bundle.js') ) 
    .pipe( streamify(uglify()) )
    .pipe( buffer() )
    .pipe( rev() )
    .pipe( gulp.dest('./dist/js') )

After

// index.html (no reference update)
<script type="text/javascript" src="js/bundle.js"></script>

The problem is if I use rev I have no ability to hash/cachebust the file. Is there any way to use the two in tandem? Or a an easy way to point my dist/index.html reference to bundle.js to the hashed version? I've read the gulp-rev recommendations but they seem horrible in comparison.

For context, I'm using Python/Django/Jade/Sass/Compass in the project.

4

1 回答 1

2

原来解决方案是使用gulp-inject而不是gulp-usemin

前

<!-- inject:js -->
<!-- endinject -->

跑

var jsStream = browserify( POINT_OF_ENTRY )
    .bundle()
    .pipe( source('bundle.js' ) )
    .pipe( streamify( uglify() ) )
    .pipe( streamify( rev() ) )
    .pipe( gulp.dest( PATHS.dest.js ));

return gulp.src( PATHS.src.html )
    .pipe( inject(jsStream) )
    .pipe( gulp.dest( DIST ) );

后

<script src="/js/bundle-b2fbae2b.js"></script>
于 2014-12-18T00:00:23.657 回答