Gulp, Wiredep et Bower dépendances

Je veux adapter un gulpfile.js et de changer mon bower_components/ dossier de app/bower_components/.

J'ai mis à jour le répertoire dans .bowerrc, alors maintenant, chaque fois que je fais un bower install il va utiliser la bonne:

{
  "directory": "app/bower_components"
}

Maintenant, comment peut - gulp-wiredep écrire le bon Sass emplacement du chemin d'accès à l'intérieur de mon principal Sass fichier?

Par exemple, gulp-wiredep ajoute la ligne suivante dans mon main.scss fichier, juste après //bower:scss:

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

Il devrait être maintenant @import "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";

Comment puis-je modifier ce chemin d'accès? Je crois que c'est un peu de configuration sur le wiredep tâche:

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

Mais je ne sais pas comment puis-je configurer que, pour faire ce dont j'ai besoin, je ne pouvais pas trouver toute la documentation à ce sujet.

Je sais que si je change manuellement le chemin de mon fichier sass pour "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss", le gulp serve de travail, mais dès que j'ai installer une charmille composant, il va modifier ce chemin d'accès à l'un sans l' app/ au début de nouveau et il va se casser la tâche.

Comment résoudre ce problème?

Fait:

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

OriginalL'auteur zok | 2015-01-29

  1. 3

    Vous pouvez utiliser le directory option de wiredep: 

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

    Aussi, voir leur documentation

    J'ai essayé mais ça ne fonctionne pas. Il est dit dans la documentation, il utilise la valeur par défaut".bowerrc' répertoire, alors que ce serait inutile de toute façon, non?
    J'ai aussi essayé de changer cwd, mais apparemment c'est là que wiredep recherche bower.json
    Il semble fonctionner pour moi, si vous devez ajouter l'option répertoire de la tâche dans laquelle le flux de app/styles/*.scss, de ne pas le html un, comme indiqué dans ma réponse. Si vous supprimez l'ancien bower_components dossier et wiredep se cherche encore là, alors la tâche doit échouer avec wiredep se plaindre qu'il ne peut pas trouver toutes les dépendances. De toute façon, vous pouvez utiliser le remplacer remplacer, mais vous devez le spécifier de manière différente. Voir mu mise à jour de la présente réponse.
    oui, je sais, le problème c'est que j'avais oublié de les envelopper dans fileTypes ! merci!

    OriginalL'auteur knutwalker

  2. 0

    Au lieu wiredep vous pouvez utiliser bindep (pour le type d'installation mnp bindep ou https://github.com/publicocean0/bindep). Il permet de créer des projets complexes avec l'option submodules , les ressources de la cartographie, des conversions de fichier(par exemple moins de fichiers) et la coutume de prétraitement.
    En html, vous pouvez spécifier les submodules l'intérieur d'un seul bower composant que vous souhaitez,vous pouvez filtrer les fichiers,prétraiter les fichiers en passant vos paramètres...
    Dans la configuration, vous pouvez définir l'endroit où vous voulez mettre chaque type de ressource,des modèles,des convertisseurs,des dépendances locales,....

    OriginalL'auteur