Gulp, Wiredep ve Bower bağımlıları

Question

Bir gulpfile.js uyarlamak ve bower_components/ klasörümü app/bower_components/ olarak değiştirmek istiyorum. Şimdi

{ 
    "directory": "app/bower_components" 
} 

, nasıl gulp-wiredep benim ana Sass dosyası içindeki doğru Sass yol konumunu yazabilirsiniz:

nedenle şimdi her şey i bu hakkı kimse kullanacağı bir bower install yapın .bowerrc yılında dizini güncellenen?

Örneğin, gulp-wiredep sağ // bower:scss sonra, benim main.scss dosyasında aşağıdaki satırı ekler:

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

Öyle olmalı şimdi

@import "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss"; nasıl bu yolu değiştirebilirim? Ben wiredep görev bazı yapılandırma olduğuna inanıyoruz:

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

Ama ihtiyacım olanı yapmak için o nasıl yapılandırabileceğinizi O konuda herhangi bir belge bulamadık, bilmiyorum.

Ben "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss" benim küstahlık dosyasında elle bu yolu değiştirirseniz, gulp serve çalışacağını biliyorum, ama bir kameriye bileşeni yüklemek en kısa sürede tekrar başlayan ve en app/ olmadan birine bu yolu değişecek görevi bozacak.

Bunu nasıl düzeltebilirim?

Done:

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

Sen wiredep ait directory seçeneğini kullanabilirsiniz: Eğer kurulum tipi npm bindep için (bindep kullanabilirsiniz wiredep yerine their documentation

Answer 2

Ayrıca

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

bakın veya https://github.com/publicocean0/bindep). İsteğe bağlı alt modüller, kaynak haritalama, dosya dönüşümleri (örneğin daha az dosya) ve özel ön işleme ile karmaşık projeler oluşturulmasına izin verir. html'de, istediğiniz tek bir bower bileşeninin içindeki alt modülleri belirtebilirsiniz, dosyaları filtreleyebilir, ön parametrelerinizi geçen parametrelerden geçirebilirsiniz. Yapılandırmada, her tür kaynağı, şablonu, dönüştürücü, yerel yeri nereye koymak istediğinizi ayarlayabilirsiniz. Bağımlılıklar, ....