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>

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

1 个答案: