Dipendenze Gulp, Wiredep e Bower

Question

Desidero adattare un gulpfile.js e cambiare la cartella bower_components/ a app/bower_components/.

ho aggiornato la directory in .bowerrc, così ora ogni volta che faccio un bower install userà quella giusta:

{ 
    "directory": "app/bower_components" 
} 

Ora, come si può gulp-wiredep scrivere la corretta posizione del percorso Sass all'interno del file il mio principale Sass?

Per esempio, gulp-wiredep aggiunge la seguente riga nel mio file main.scss, subito dopo // bower:scss:

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

Dovrebbe essere ormai @import "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";

Come posso cambiare questa strada? Credo che sia un po 'di configurazione sul compito wiredep:

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

Ma io non so come posso configurare che per fare quello che mi serve, non riuscivo a trovare alcuna documentazione al riguardo.

so che se cambio manuale che percorso nel mio file sass al "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss", il gulp serve funzionerà, ma non appena si installa un componente di pergolato che cambierà il percorso per l'una senza l'app/ all'inizio di nuovo e romperà il compito.

Come risolvere quello?

Fatto:

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

Answer 1

È possibile utilizzare l'opzione directory di 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')); 

Inoltre, vedere their documentation

Answer 2

Invece wiredep è possibile utilizzare bindep (ad installazione NPM bindep o https://github.com/publicocean0/bindep). Permette di creare progetti complessi con sottomoduli opzionali, mappatura delle risorse, conversioni di file (ad esempio meno file) e preelaborazione personalizzata. In html è possibile specificare quali sottomoduli all'interno di un singolo componente del bower si desidera, è possibile filtrare i file, preelaborare i file passando i paramter ... Nella configurazione è possibile impostare dove si desidera inserire ogni tipo di risorsa, modelli, convertitori, locale dipendenze, ....