# 134: Jekyll, ग्रंट, सैस, एक SVG सिस्टम, और अधिक के साथ निर्मित एक साइट की प्रगति का एक टूर सीएसएस-ट्रिक्स

Anonim

चेतावनी: यह एक मध्यस्थ, मध्यवर्ती स्तर का पेंचकस है जिसमें हम उस कोड को देखते हैं जो किसी साइट के लिए निर्माण प्रक्रिया को अधिकार देता है। हम कोई कोड नहीं लिखते हैं।

एक "बिल्ड प्रोसेस" वह सभी सामग्री है जो आपके द्वारा लिखे गए कोड और कोड के बीच होती है जो एक लाइव वेबसाइट पर जाती है। हमने इसके लिए ग्रंट का उपयोग करने से पहले बात की है। सैस को संसाधित किया जाता है, संपत्ति संयुक्त की जाती है, न्यूनतमकरण और अनुकूलन होता है, आदि अंतहीन चीजें हैं जो एक निर्माण प्रक्रिया आपके लिए कर सकती हैं।

मैं उसके लिए एक नई व्यक्तिगत साइट बनाने पर केटी कोवलिन के साथ काम कर रहा हूं। यह नई प्रक्रियाओं को सीखने और नए सामान की कोशिश करने में हम दोनों के लिए एक प्रयोग है। इस मामले में, मैं पहली बार Jekyll का उपयोग कर रहा हूं, और मैं पहली बार SVG सिस्टम को स्वचालित कर रहा हूं।

स्क्रैंकास्ट के समय, मैं इस सब के बीच में सही हूं, लेकिन मुझे बिल्ड सिस्टम सुचारू रूप से काम कर रहा है इसलिए मुझे लगा कि यह साझा करने का एक अच्छा समय था। मुझे हमेशा लगता है कि यह साझा करने का एक अच्छा समय है - ठीक उसी समय जहां आपके लिए कुछ क्लिक होता है।

चीजें चल रही हैं:

  • ग्रंट सभी कार्यों को चलाता है।
  • साइट Jekyll के साथ बनाया जा रहा है। मतलब यह लेआउट और सामग्री को पूर्ण वेब पृष्ठों में संसाधित करता है। जब सामग्री या लेआउट बदलते हैं, तो ग्रंट जेकेल बिल्ड चलाता है।
  • Jekyll स्थानीय सर्वर भी चलाता है।
  • Sass CSS प्रीप्रोसेसर है। जब एक Sass फ़ाइल बदलती है, तो ग्रंट Sass की जटिलता को चलाता है। फिर ग्रंट परिणाम पर ऑटोप्रेक्सिफ़र चलाता है। फिर ग्रंट ने जेकल बिल्ड को फिर से चलाया ताकि यह सुनिश्चित हो सके कि सभी नया सामान संसाधित साइट द्वारा उपयोग करने योग्य है।
  • साइट एसवीजी प्रणाली का उपयोग करती है। आइकनों के लिए, बल्कि लोगो के लिए, और कौन-कौन जानता है-इसके अंत तक और क्या-क्या है। SVG फ़ाइलों को एक "svg" फ़ोल्डर में अलग रखा जाता है। जब उनमें से कोई भी परिवर्तन होता है, तो ग्रंट उन सभी को एक साथ संसाधित करने के लिए svgstore कार्य चलाता है। फिर ग्रंट जेकिल बिल्ड चलाता है ताकि साइट पर सभी वर्तमान एसवीजी उपलब्ध हो।
  • क्योंकि यह GitHub, और GitHub पेज पर एक रेपो, Jekyll का समर्थन करता है, हम स्वचालित रूप से इस साइट का लाइव, होस्ट किया गया संस्करण प्राप्त कर सकते हैं। हम इस साइट पर एक और डोमेन भी इंगित कर सकते हैं।