जुटना/Gulp

Question

मैं Gulp साथ उपयोग करने के लिए एक प्लगइन श्रृंखला प्रदान करता है कि के लिए देख रहा हूँ के साथ सीएसएस फ़ाइलें स्थानांतरित:

• स्रोत नक्शा समर्थन
• कम
• minification
• संयोजन
• यूआरएल स्थानांतरण/कॉन्सट

I cu को संबोधित करने के लिए प्रतिस्थापन (रीबेस) पहले से चार हैं, लेकिन मुझे मौजूदा प्लगइन का संयोजन नहीं मिल रहा है जो मुझे अंतिम (यूआरएल रीबेसिंग) भी देगा। मुझे कोई भी यूआरएल रिबेसिंग प्लगइन्स नहीं मिला है जो स्रोतमैप उत्सर्जित करता है।

बस स्पष्ट होने के लिए, मेरी समस्या यह है कि जब मैं अपने प्रोजेक्ट डेवलपमेंट फ़ोल्डर्स से कई छोटी सीएसएस फाइलों को संकलित करता हूं, और उन्हें एक सामान्य फ़ोल्डर में आउटपुट करता हूं, तो कॉन्सटेनेशन के परिणामस्वरूप चाल संबंधित छवियों को तोड़ देती है, जैसे पृष्ठभूमि छवियों के लिए।

संपादन:

यह उपकरण श्रृंखला मैं वर्तमान में पहले से ही इस समस्या को हल करने का इरादा है का उपयोग जैसा लगता है। तो, यह स्पष्ट रूप से जवाब है। हालांकि, यह एक और सवाल उठाता है, कैसे आवश्यक वाक्यविन्यास काम करना चाहिए।

यही सवाल सैद्धांतिक रूप से वहाँ बाहर डुप्लिकेट के बहुत सारे है:

• clean-css #152: Rebasing functionality very frustrating
• clean-css #195: root option on Windows
• clean-css #263: How to get relativeTo option working with CSS files in different paths
• http://adilapapaya.com/docs/clean-css/#howtorebaserelativeimageurls
• Grunt cssmin rebasing a relative URI?

दुर्भाग्य से कोई जवाब वास्तव में वाक्यविन्यास की व्याख्या नहीं करता है, वे सिर्फ वूडू का प्रदर्शन करते हैं; इसलिए मुझे नहीं पता कि निम्नलिखित क्यों काम नहीं कर रहा है। अगर मैं इसे हल कर सकता हूं तो मैं यहां वापस आऊंगा और इस टूल श्रृंखला को इंगित करने के लिए इसे स्वीकार कर दूंगा जो वास्तव में मुझे चाहिए।

स्रोत फ़ाइलें:

/assets 
    /site 
     styleInput1.less "url(../site/logo.png)" 
     logo.png 
     background.png 
    /application 
     styleInput2.less "url(../site/background.png)" 

घूंट कार्य:

gulp.task(filename, function() { 
    return gulp.src(files) 
     .pipe(sourcemaps.init()) 
     .pipe(less()) 
     .pipe(minifyCss({ relativeTo: './compiled' })) 
     .pipe(concat(filename)) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('./compiled')); 
}); 

उत्पादन, टूटे यूआरएल के साथ। कई दोषों पर ध्यान दें। हालांकि सीएसएस को आवश्यक संपत्तियों के सापेक्ष एक निर्देशिका स्तर उठाया गया है, एक अतिरिक्त मूल निर्देशिका जोड़ा गया है (!)। इसके अलावा, यूआरएल में से एक में हार्ड एस्टेट फ़ोल्डर का नाम बदल गया है (!)।बहुत ही अजीब:

.pipe(minifyCss({ relativeTo: './compiled', target: './compiled' })) 

और सही उत्पादन:

/compiled 
    styleOutput1.css "url(../../compiled/logo.png)" 
    styleOutput2.css "url(../../site/background.png)" 

वूडू जारी है, लेकिन यहां के लिए मेरे क्षमायाचना मेरी काम कर घूंट पाइप है

/compiled 
    styleOutput1.css "url(../assets/site/logo.png)" 
    styleOutput2.css "url(../assets/site/background.png)" 

Answer 1

मैं व्यक्तिगत रूप से घूंट का उपयोग -minify-css और relativeTo विशेषता निर्दिष्ट करें। https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-programmatically

विशेष रूप से

:

gulp.task('css', function() { 
    gulp.src('./assets/css/main.css') 
// Here I specify the relative path to my files 
     .pipe(minifyCSS({keepSpecialComments: 0, relativeTo: './assets/css/', processImport: true})) 
     .pipe(autoprefixer({ 
     browsers: ['last 2 versions'], 
     cascade: false 
     })) 
     .pipe(gulp.dest('./assets/css/dist/')) 
     .pipe(notify({ 
      "title": "Should I Go?", 
      "subtitle": "Gulp Process", 
      "message": '<%= file.relative %> was successfully minified!', 
      "sound": "Pop", 
      "onLast": true 
     })); 
    }); 

है कि आप के लिए काम नहीं करता है, वे अन्य पैरामीटर का एक बहुत यूआरएल rebase करने के लिए है

• rebase - यूआरएल रिबेसिंग
छोड़ गलत पर सेट
• relativeTo - रिश्तेदार @import नियमों और यूआरएल को हल करने के लिए पथ
• restructuring - सेट टी ओ उन्नत अनुकूलन
• root में पुनर्गठन निष्क्रिय करने के लिए झूठी - पूर्ण @import नियमों को हल करने और रिश्तेदार यूआरएल