2014-11-24 10 views
13

Ich versuche, eine einfache Schluckaufgabe zu erstellen, die alle Abhängigkeiten von bower.json abruft und sie in meine index.html-Datei einfügt. DieseWie wählt man minimierte Abhängigkeiten mit Schluck und 'Main-Bower-Dateien'?

ist, wie mein gulpfile.js wie folgt aussieht:

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')); 
}); 

Und es funktioniert. Dies ist, wie meine index.html wie unter ./Build Verzeichnis aussehen:

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

Aber ich bin nicht in der Lage Haupt-Bower-Dateien zu machen, meine minimierte Abhängigkeiten zu greifen (in diesem Beispiel enthält ‚/ public /bower_components/zepto/zepto.min.js ').

Ich habe diese Überschreibungsoption versuche:

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

und diese:

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

und es hat nicht funktioniert :(

Was mache ich falsch

Vielen Dank im Voraus!

Antwort

9

Sie müssen den Namen des Pakets angeben, das Sie überschreiben möchten. BOWER-PACKAGE ist hier der zu ersetzende Text. Sie möchten nicht alle Ihre Abhängigkeiten außer Kraft setzen und deshalb ist es eine Überschreibung durch Abhängigkeit.

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

Oh ich sehe ... meine schlechte ... :(Gibt es eine Möglichkeit, eine globale Option für alle Pakete festzulegen, ohne jedes Paket manuell anzugeben? Ich kann eine Inline-Funktion erstellen, die das Ergebnis Array von bowerFiles empfängt (...) und ersetze * .js durch * .min.js, aber es fühlt sich an wie ein schlechter Workaround .... –

+0

Ich benutze nur 'main-bower-files', ich glaube nicht, dass es jetzt eine verfügbare Funktion ist –

9

Es gibt zwei Lösungen:

So Ihre bower.json wie ändern.
Zunächst können Sie bower-main verwenden, um verkleinerte von nicht-minifizierten Dateien zu unterscheiden.

Eine weitere Möglichkeit besteht darin, direkt an der von main-bower-Dateien zurückgegebenen Liste zu arbeiten und das Vorhandensein von minimierten Dateien zu überprüfen. Dieses Snippet ersetzt Dateipfade durch ihre minimierte Entsprechung, wenn sie vorhanden sind.

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; 
}); 

Siehe this gist für eine volle Gulp Aufgabe.

+0

zweite Option Snippet ist völlig nützlich – meddlesome

Verwandte Themen