Gulp का उपयोग कर विभिन्न निर्देशिकाओं में SASS फ़ाइलों को संकलित कैसे करें?

Question

मैं अपने जेएस और एसएएस को संकलित करने के लिए गल्प-रूबी-सास का उपयोग कर रहा हूं।

मैं यह त्रुटि पहले लेखन त्रुटि में भाग: Arguments to path.join must be strings

मिले this answer और यह था, क्योंकि मैं घूंट-सास साथ sourcemaps उपयोग कर रहा था और जवाब घूंट-माणिक सास बजाय का उपयोग कर की सिफारिश की।

gulp.task('sass', function() { 
    return sass('public/_sources/sass/**/*.scss', { style: 'compressed' }) 
     .pipe(sourcemaps.init()) 
     .pipe(concat('bitage_public.css')) 
     .pipe(sourcemaps.write('./maps')) 
     .pipe(gulp.dest('public/_assets/css')) 
     .pipe(livereload()); 
}); 

कौन इस त्रुटि का उत्पादन: gulp-ruby-sass stderr: Errno::ENOENT: No such file or directory - public/_sources/sass/**/*.scss

मैं तो इस सवाल का जवाब मैंने पाया में देखा लेखक ने लिखा है कि ग्लोब ** नहीं कर रहे

अगला मैं इस सिंटैक्स का उपयोग अपने सभी एस.ए.एस.एस. फ़ाइलों को संकलित करने की कोशिश की अभी तक समर्थित नहीं है:

यह भी ध्यान रखें, इस लेखन के रूप में gulp-ruby-sass 1.0.0-alpha का उपयोग करते समय, ग्लोब अभी तक समर्थित नहीं हैं।

मैं और अधिक खुदाई किया था और मेरी एस.ए.एस.एस. फ़ाइलों के लिए पथ निर्दिष्ट करने के लिए किसी सरणी का उपयोग करने के लिए एक रास्ता मिल गया है, तो फिर मैं करने की कोशिश की है:

gulp.task('sass', function() { 
    return sass(['public/_sources/sass/*.scss', 
      'public/_sources/sass/layouts/*.scss', 
      'public/_sources/sass/modules/*.scss', 
      'public/_sources/sass/vendors/*.scss'], { style: 'compressed' }) 
    // return sass('public/_sources/sass/**/*.scss', { style: 'compressed' }) 
    .pipe(sourcemaps.init()) 
    .pipe(concat('bitage_public.css')) 
    .pipe(sourcemaps.write('./maps')) 
    .pipe(gulp.dest('public/_assets/css')) 
    .pipe(livereload()); 
}); 

लेकिन फिर भी मैं Errno::ENOENT: No such file or directory हो रही है और यह सूचीबद्ध करता है मैं उस सरणी में डाल दिया सभी dirs।

आप कई निर्देशिकाओं में एसएएसएस को गल्प के साथ कैसे संकलित करते हैं?

सास स्रोत फ़ोल्डर संरचना:

_sources 
    layouts 
     ...scss 
    modules 
     ...scss 
    vendors 
     ...scss 
    main.scss 

Answer 1

यह पता चल!

अच्छी तरह से 100% नहीं, अभी भी सुनिश्चित नहीं है कि एकाधिक पथ सरणी क्यों काम नहीं करती है।

फिर भी तो मैं भूल गया कि मेरा मुख्य web.scss फ़ाइल में मैं पहले से ही कई आयात बयान सेटअप था:,

@import "vendors/normalize"; // Normalize stylesheet 
@import "modules/reset";  // Reset stylesheet 
@import "modules/base";   // Load base files 
@import "modules/defaults";  // Defaults 
@import "modules/inputs";  // Inputs & Selects 
@import "modules/buttons";  // Buttons 
@import "modules/layout";  // Load Layouts 
@import "modules/svg";   // Load SVG 
@import "modules/queries";  // Media Queries 

इसलिए मैं वास्तव में उपयोग करने की कोशिश करना तरह से मैं कोशिश कर रहा था Gulp जरूरत नहीं थी मैं तो बस 1 .scss फ़ाइल को सीधे लक्षित करने के लिए आवश्यक है। तो मैंने किया है कि यहाँ:

// Compile public SASS 
gulp.task('sass', function() { 
return sass('public/_sources/sass/bitage_web.scss', { style: 'compressed' }) 
    .pipe(sourcemaps.init()) 
    .pipe(sourcemaps.write('./maps')) 
    .pipe(gulp.dest('public/_assets/css')) 
    .pipe(livereload()); 
}); 

अब यह काम करता है क्योंकि यह लक्षित करते हैं और संकलन

Answer 2

मैं का उपयोग कर '* .scss' भी

Git प्रलेखन में परेशानी हो रही किया गया था (करने के लिए एक विशिष्ट फ़ाइल देखता है https://github.com/sindresorhus/gulp-ruby-sass) वे इस sintax का उपयोग करें:

gulp.task('sass', function(){ 
    return sass('public/_sources/sass/', 
    { style: 'compressed'}) 
.pipe(sourcemaps.init()) 
}); 

मैं इसे परीक्षण किया है और यह, काम करता है यह फ़ोल्डर के भीतर सभी फाइलों को संकलित करता है।

शायद ज़रुरत पड़े किसी एक ही समस्या पहले और उसके बाद पाइप यह सास प्लगइन के साथ के रूप में