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