गुलप, वायर्डेप और बॉवर निर्भरता

Question

मैं एक gulpfile.js को अनुकूलित करना चाहता हूं और bower_components/ फ़ोल्डर को app/bower_components/ में बदलना चाहता हूं।

मैं .bowerrc में निर्देशिका अद्यतन है, इसलिए अब हर मैं करना एक bower install यह सही एक का उपयोग करेगा:

{ 
    "directory": "app/bower_components" 
} 

अब, कैसे gulp-wiredep अंदर अपने मुख्य सास फ़ाइल सही सास पथ स्थान लिख सकते हैं?

उदाहरण के लिए, gulp-wiredep निम्न पंक्ति मेरी main.scss फ़ाइल में, सही // bower:scss के बाद कहते हैं:

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

यह होना चाहिए अब @import "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";

कैसे मुझे लगता है कि पथ बदल सकते हैं? मेरा मानना ​​है कि यह 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')); 
}); 

लेकिन मैं नहीं जानता कि मैं यह कैसे कॉन्फ़िगर मैं क्या जरूरत है ऐसा करने के लिए कर सकते हैं, मुझे लगता है कि इस बारे में कोई प्रलेखन नहीं मिल सका।

मुझे पता है कि अगर मैं "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss" करने के लिए मेरी सास फ़ाइल में मैन्युअल रूप से उस मार्ग बदलने के लिए, gulp serve काम करेंगे, लेकिन जैसे ही मैं एक बोवर घटक स्थापित इसे फिर से शुरू और कम से app/ बिना एक के लिए उस मार्ग बदल जाएगा यह कार्य तोड़ देगा।

इसे कैसे ठीक करें?

डन:

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

आप wiredep की directory विकल्प का उपयोग कर सकते हैं:

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

इसके अलावा, इसके बजाय their documentation

Answer 2

देख wiredep आप bindep (स्थापना प्रकार NPM bindep के लिए उपयोग कर सकते हैं या https://github.com/publicocean0/bindep)। यह वैकल्पिक पनडुब्बियों, संसाधन मैपिंग, फ़ाइल रूपांतरण (उदाहरण के लिए कम फाइलें) और कस्टम प्रीप्रोकैसिंग के साथ जटिल परियोजनाओं को बनाने की अनुमति देता है। एचटीएमएल में आप निर्दिष्ट कर सकते हैं कि एक ही बॉवर घटक के अंदर कौन से सबमिड्यूल हैं, आप फ़ाइलों को फ़िल्टर कर सकते हैं, प्रीप्रोसेस फाइलें अपने पैरामीटर को पास कर सकती हैं ... कॉन्फ़िगरेशन में आप सेट कर सकते हैं कि आप कहां से हर प्रकार के संसाधन, टेम्पलेट्स, कन्वर्टर्स, स्थानीय निर्भरता, ....