पोस्टसीएसएस के साथ एकाधिक सीएसएस फाइलें देखें और एक बंडल.css

Question

आउटपुट मैं पोस्टकैस से जुड़े वर्कफ़्लो को समझने की कोशिश कर रहा हूं। मेरी आवश्यकता है कि एक फ़ोल्डर में सीएसएस आंशिक है, उन्हें देखें और एक बंडल सीएसएस फ़ाइल आउटपुट करें। बंडल सीएसएस फ़ाइल में शीर्ष पर बेस.css फ़ाइल शामिल होनी चाहिए।

पोस्टकैस में एक - वॉच फ्लैग है और कई फाइलें देख सकते हैं लेकिन केवल कई फाइलें आउटपुट कर सकते हैं, न कि बंडल सीएसएस फ़ाइल। मैं सभी फ़ाइलों को गठबंधन करने के लिए cat का उपयोग कर सकता हूं और पोस्टसीएसएस पर पाइप करने के लिए stdin का उपयोग कर सकता हूं। लेकिन मैं postcss से cat कमांड को ट्रिगर नहीं कर सकता।

मेरे फ़ाइलों संरचना ऐसी लग सकता है:

partials/ 
    |_one.css 
    |_two.css 
styles/ 
    |_base.css 
    |_bundle.css 

मैं कैसे, NPM का उपयोग करके, CLI मेरा लक्ष्य को प्राप्त करने के आदेशों का उपयोग करने के लिए अपने स्क्रिप्ट खंड की व्यवस्था चाहते हैं?

मेरा मुख्य मुद्दा यह पता लगाने के लिए है कि अगले चरण को अवरुद्ध किए बिना एक चरण के बिना निर्माण चरणों को कैसे ऑर्केस्ट्रा करना है। एक काम करने वाले काम-प्रवाह उदाहरण के लिए एक लिंक बहुत अच्छा होगा!

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

निम्नलिखित संरचना का उपयोग करना:

build/ 
    |_stylesheet/ 
     |_default.css (final processed css) 
partials/ 
    |_one.css 
    |_one.htm (html snippet example) 
    |_two.css 
    |_two.htm (html snippet example) 
styles/ 
    |_base.css 
    |_bundle/ (css files from partial/ that is partly processed) 
     |_one.css 
     |_two.css 
    |_master.css (import rules) 

मैं अपने package.json में दो चरण वाली प्रक्रिया है। सबसे पहले मैं सुनिश्चित करता हूं कि मेरे पास शैलियों/बंडल फ़ोल्डर (mkdir -p) हैं और फिर मैं आंशिक/सीएसएस फ़ाइलों को देखने के लिए nodemon शुरू करता हूं। जब कोई परिवर्तन होता है, तो nodemon npm run css:build चलाता है।

css:build आंशिक रूप से सीएसएस फ़ाइलों को संसाधित करता है/और शैलियों/बंडल में आउटपुट/(याद रखें कि मुझे नहीं पता कि एकाधिक फाइलें कैसे देखें और एक बंडल फ़ाइल को आउटपुट करें)।

css:build चलाने के बाद, npm postcss:build चलाता है जो master.css फ़ाइल को संसाधित करता है जो @import css फ़ाइलों को शैलियों/बंडल/से करता है। मैं फिर stdout से निर्माण/स्टाइलशीट/default.css से संसाधित सामग्री आउटपुट (>)।

{ 
    "css": "mkdir -p styles/bundle && nodemon -I --ext css --watch partials/ --exec 'npm run css:build'", 
    "css:build": "postcss --use lost --use postcss-cssnext --dir styles/bundle/ partials/*.css", 
    "postcss:build": "postcss --use postcss-import --use postcss-cssnext --use cssnano styles/master.css > build/stylesheet/default.css", 
} 

Answer 1

आप NPM से watch और parallelshell संकुल की जाँच कर सकते हैं। मेरा मानना ​​है कि उन दोनों का कॉम्बो चाल करेगा। उस पर और अधिक: http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/

Answer 2

शायद आपको एक एकल सीएसएस फ़ाइल और अन्य संसाधनों के निर्माण के लिए webpack का उपयोग करने पर विचार करना चाहिए, जिसमें घड़ी झंडा भी है। यह बहुत ही कुशल है और संसाधनों/फ़ाइलों में बदलाव के बाद आपको हर समय मैन्युअल रूप से पुनर्निर्माण की आवश्यकता नहीं है।