हम अपने निर्माण उपकरणों के साथ निश्चित रूप से थोड़ा निर्वस्त्र हो सकते हैं। इसे पोस्ट करते समय, बिल्ड टूल्स का पोस्टर बच्चा ग्रंट है। प्रतिस्पर्धी हैं, लेकिन ग्रंट काफी समय से सबसे लोकप्रिय है। यदि आप ग्रंट के लिए बिल्कुल नए हैं, तो मेरे पास कई तरह की चीजें हैं जो मैंने लिखी हैं और इसके बारे में बताया है:
- ग्रंट जो लोग सोचते हैं कि ग्रंट जैसी चीजें अजीब और कठिन हैं
- # 130: ग्रंट के साथ पहले पल
- # 134: Jekyll, ग्रंट, सैस, एक एसवीजी सिस्टम, और अधिक के साथ निर्मित एक साइट इन-प्रोग्रेस की एक यात्रा
यहां तक कि अगर आपने कभी भी ग्रंट का इस्तेमाल नहीं किया है, तो इस पेंचकस में हम बहुत ज्यादा खरोंच से शुरू करते हैं और यह सब हो रहा है। विचार यह है कि हम क्विंटेसिएंट "एसवीजी से भरा फ़ोल्डर" से काम कर रहे हैं। प्रत्येक file.svg कुछ ग्राफिक का प्रतिनिधित्व करता है जिसे हम साइट पर उपयोग करना चाहते हैं। हम एक एसवीजी डिस्क्स ब्लॉक का उपयोग करने के लिए तैयार है जो सभी को निचोड़ना चाहते हैं। बनाए गए प्रतीक, पहुंच की जानकारी हमारी स्वचालित क्षमता आदि में सबसे अच्छी तरह से जुड़ गई।
एक बार जब हम ग्रंट जा रहे हैं, और हम यहाँ पर ध्यान केंद्रित कर रहे हैं निर्माण उपकरण स्थापित, grunt-svgstore, हम जाने के लिए अच्छा कर रहे हैं।
हमारे छोटे डेमो में हमने ग्रंट को ग्रांटफाइल.जेएस के माध्यम से कॉन्फ़िगर किया है, हमारे फ़ोल्डर को एसवीजी से भरा हुआ देखने के लिए और एक सम्मिलित फ़ोल्डर में हमारे द्वारा डाली गई एक डीफ़ेस्विग फ़ाइल बनाएं।
module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );यहाँ से लेवलिंग में SVGs के उस फोल्डर को देखने के लिए "वॉच" प्लगइन का उपयोग करना शामिल होगा और किसी भी फाइल के बदलने (या जोड़े या हटाए जाने पर) अपने आप यह काम चला लेगा। यदि आप Jekyll जैसी साइट बिल्डर का उपयोग कर रहे हैं, तो आप jekyll buildयह सुनिश्चित करने के लिए बाद में भी ट्रिगर कर सकते हैं कि नई फ़ाइल बिल्ट साइट में उपलब्ध है।
फ़ाइलें
- 18-project-example.zip