Jak wybrać minified zależności za pomocą gulp i "main-bower-files"?

Question

Próbuję utworzyć proste zadanie gulp, które pobiera wszystkie zależności bower.json i wstrzykuje je do mojego pliku index.html.

ten sposób moi gulpfile.js wygląda następująco:

var gulp = require('gulp'); 
var bowerFiles = require('main-bower-files'); 
var inject = require('gulp-inject'); 

gulp.task('default', function() { 
    gulp.src('./public/index.html') 
     .pipe(inject(gulp.src(bowerFiles({ 
      paths: { 
       bowerDirectory: './public/bower_components', 
       bowerJson: './public/bower.json' 
      } 
     }), {read: false}), {name: 'bower'})) 
     .pipe(gulp.dest('./build')); 
}); 

I to działa. Jest to, jak wygląda moja index.html pod ./build katalogu:

<!-- bower:js --> 
    <script src="/public/bower_components/zepto/zepto.js"></script> 
<!-- endinject --> 

Jednak jestem w stanie dokonać główne-altana-files chwycić moje minified zależnościami (w tym przykładzie, w celu włączenia „/ publiczne /bower_components/zepto/zepto.min.js ").

Próbowałem tę funkcję opcje:

{ 
    "overrides": { 
     "BOWER-PACKAGE": { 
      "main": "**/*.min.js" 
     } 
    } 
} 

a to:

{ 
    "overrides": { 
     "BOWER-PACKAGE": { 
      "main": { 
       "development": "*.js", 
       "production": "*.min.js", 
      } 
     } 
    } 
} 

i to nie działa :(

Co robię źle

Z góry dzięki!

Answer 1

Musisz podać nazwę pakietu, który chcesz zastąpić, BOWER-PACKAGE jest tutaj tekst do zastąpienia. Nie chcesz przesłonić wszystkich swoich zależności i dlatego jest to jedna przesłonięcie zależności.

Więc zmienić bower.json jak:

{ 
    "overrides": { 
    "zepto": { 
     "main": "zepto.min.js" 
    } 
    } 
} 

Answer 2

Istnieją dwa rozwiązania.
Po pierwsze, można użyć bower-main, aby odróżnić pliki zminifikowane od nieminified.

Inną opcją jest bezpośrednia praca na liście zwróconej przez pliki główne-bower i sprawdzenie istnienia zminimalizowanych plików. Ten fragment kodu zastępuje ścieżki plików ich minified odpowiednikiem, jeśli istnieją.

var mainBowerFiles = require('main-bower-files'); 
var exists = require('path-exists').sync; 

var bowerWithMin = mainBowerFiles().map(function(path, index, arr) { 
    var newPath = path.replace(/.([^.]+)$/g, '.min.$1'); 
    return exists(newPath) ? newPath : path; 
}); 

Zobacz this gist, aby uzyskać pełne zadanie Gulp.