Gulp browserify JS，但替换像 gulp-usemin 这样的修订引用

Question

所以我使用gulp-usemin已经有一段时间了，并且总体上喜欢它。 特别是，我喜欢内置的缓存破坏功能

以前

<!-- 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 -->

跑

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

后

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

但是，最近我一直在使用browserify，它通过节点样式的require语句构建源代码树。

以前

// index.html
<script type="text/javascript" src="js/app.js"></script>
// js/app.js
require('angular');
require('./ngmodules/customFilters');
require('./components/feature/feature');

跑

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

后

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

问题是如果我使用rev我就无法对文件进行哈希/缓存处理。 有没有办法同时使用两者？ 或者一种简单的方法可以将我的dist/index.html引用指向bundle.js哈希版本？ 我已经阅读了 gulp-rev 建议，但相比之下它们似乎很糟糕。

对于上下文，我在项目中使用了Python/Django/Jade/Sass/Compass。

Answer 1

事实证明，解决方案是使用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>