webentwicklung-frage-antwort-db.com.de

Gulp-, Wiredep- und Bower-Abhängigkeiten

Ich möchte eine gulpfile.js anpassen und meinen Ordner bower_components/ in app/bower_components/ ändern.

Ich habe das Verzeichnis in .bowerrc aktualisiert, daher wird jedes Mal, wenn ich einen bower install mache, der richtige verwendet:

{
  "directory": "app/bower_components"
}

Nun, wie kann gulp-wiredep den richtigen Sass-Pfad in meine Hauptsass-Datei schreiben?

Beispielsweise fügt gulp-wiredep direkt nach main.scss die folgende Zeile in meine // bower:scss-Datei ein:

@import "bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";

Es sollte jetzt @import "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss"; sein

Wie kann ich diesen Pfad ändern? Ich glaube, es ist eine Konfiguration für die wiredep Aufgabe:

gulp.task('wiredep', function () {
  var wiredep = require('wiredep').stream;

  gulp.src('app/styles/*.scss')
    .pipe(wiredep({
      ignorePath: /^(\.\.\/)+/
    }))
    .pipe(gulp.dest('app/styles'));

  gulp.src('app/*.html')
    .pipe(wiredep({
      exclude: ['bootstrap-sass-official'],
      ignorePath: /^(\.\.\/)*\.\./
    }))
    .pipe(gulp.dest('app'));
});

Aber ich weiß nicht, wie ich das konfigurieren kann, um das zu tun, was ich brauche, ich konnte keine Dokumentation darüber finden.

Ich weiß, dass, wenn ich diesen Pfad in meiner sass-Datei manuell in "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss" ändere, der gulp serve funktionieren wird, aber sobald ich eine Bower-Komponente installiere, wird dieser Pfad wieder in den Pfad ohne den app/ am Anfang geändert und der wird unterbrochen Aufgabe.

Wie kann man das beheben?

Erledigt:

// inject bower components
gulp.task('wiredep', function () {
  var wiredep = require('wiredep').stream;

  gulp.src('app/styles/*.scss')
    .pipe(wiredep({

      fileTypes: {
        scss: {
          replace: {
            sass: '@import "app/{{filePath}}";',
            scss: '@import "app/{{filePath}}";'
          }
        }
      },

      ignorePath: /^(\.\.\/)+/
    }))
    .pipe(gulp.dest('app/styles'));

  gulp.src('app/*.html')
    .pipe(wiredep({
      exclude: ['bootstrap-sass-official'],
      ignorePath: /^(\.\.\/)*\.\./
    }))
    .pipe(gulp.dest('app'));
});
8
zok

Sie können die Option directory von wiredep verwenden:

  gulp.src('app/styles/*.scss')
    .pipe(wiredep({
      directory: 'app/bower_components',
      fileTypes: {
        scss: {
          replace: {
            scss: '@import "src/app/{{filePath}}";'
          }
        }
      },
      ignorePath: /^(\.\.\/)+/
    }));

gulp.src('app/*.html')
    .pipe(wiredep({
      directory: 'app/bower_components',
      exclude: ['bootstrap-sass-official'],
      ignorePath: /^(\.\.\/)*\.\./
    }))
    .pipe(gulp.dest('app'));

Siehe auch ihre Dokumentation

3
knutwalker

Anstelle von wiredep können Sie bindep verwenden (für den Installationstyp npm bindep oder https://github.com/publicocean0/bindep ). Es ermöglicht die Erstellung komplexer Projekte mit optionalen Submodulen, Ressourcenzuordnung, Dateikonvertierungen (z. B. weniger Dateien) und benutzerdefinierter Vorverarbeitung. In html können Sie angeben, welche Submodule in einer einzelnen Bower-Komponente Sie möchten, Sie können Dateien filtern, Dateien vorverarbeiten, die Ihre Parameter übergeben ... In der Konfiguration können Sie festlegen, wo Sie jeden Ressourcentyp, Vorlagen, Konverter, lokale Abhängigkeiten, ....

0
user6228847