2014-12-17 3 views
2

Так что я использовал gulp-usemin какое-то время и вообще нравится. В частности, я люблю встроенный кэш-перебора способностьGulp Browsify JS, но замените ссылки на редакцию, такие как 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 --> 

Run

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> 

Тем не менее, в последнее время я использовал браузер, который строит исходное дерево с помощью команд node-style require.

Перед

// 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')) 

После

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

Проблема в том, если я использую rev У меня нет возможности хешировать/кэшировать файл. Есть ли способ использовать их в тандеме? Или простой способ указать мою ссылку bundle.js на хешированную версию? Я прочитал рекомендации gulp-rev, но они кажутся ужасными в сравнении.

Для контекста я использую Python/Django/Jade/Sass/Compass в проекте.

ответ

2

Оказывается, решение было использовать gulp-inject, а не gulp-usemin

Перед

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

Run

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>