Zależności Gulp, Wiredep i Bower

Question

Chcę zaadaptować plik gulpfile.js i zmienić folder bower_components/ na app/bower_components/.

I aktualizowany katalog w .bowerrc, więc teraz za każdym razem zrobić bower install będzie korzystał z prawa One:

{ 
    "directory": "app/bower_components" 
} 

Teraz, w jaki sposób można gulp-wiredep pisać poprawną lokalizację ścieżki Sass wewnątrz pliku moim głównym Sass?

Na przykład gulp-wiredep dodaje następującą linię w moim pliku main.scss, tuż po // bower:scss:

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

Powinno być teraz @import "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";

Jak mogę zmienić tę ścieżkę? Wierzę, że to jakiś konfiguracja na zadaniu 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')); 
}); 

Ale nie wiem, w jaki sposób można skonfigurować, że aby zrobić to, co muszę, nie mogłem znaleźć żadnej dokumentacji na ten temat.

wiem, że jeśli zmienię ręcznie tę ścieżkę w moim pliku Sass do "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss" The gulp serve będzie działać, ale jak tylko mogę zainstalować komponent altana będzie zmienić tę ścieżkę do jednego bez app/ się ponownie na początku i złamie to zadanie.

Jak to naprawić?

Sporządzono:

// 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

Można użyć opcji directory z 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')); 

również zobaczyć their documentation

Answer 2

Zamiast wiredep można użyć bindep (dla typu instalacja npm bindep lub https://github.com/publicocean0/bindep). Umożliwia tworzenie złożonych projektów z opcjonalnymi submodułami, mapowaniem zasobów, konwersjami plików (na przykład mniej plików) i niestandardowym przetwarzaniem wstępnym. W html możesz określić, które submikle wewnątrz pojedynczego komponentu altankowego chcesz, możesz filtrować pliki, przetwarzać wstępnie pliki przechodzące przez twoje parametry ... W konfiguracji możesz ustawić gdzie chcesz umieścić każdy rodzaj zasobów, szablonów, konwerterów, lokalnych zależności, ....