फाउंडेशन - स्टार्टर प्रोजेक्ट

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

मूल टेम्पलेट

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

$ foundation new --framework sites --template basic

इसे सेट करने के लिए, सबसे पहले npm install , bower install चलाएं और इसे चलाने के लिए npm start कमांड का उपयोग करें । आप Github से टेम्प्लेट फ़ाइलों को भी डाउनलोड कर सकते हैं ।

ZURB टेम्पलेट

यह CSS / SCSS, JavaScript, Handlebars टेम्पलेट, मार्कअप संरचना, छवि संपीड़न का एक संयोजन है और SASS प्रोसेसिंग का उपयोग करता है। आप नीचे दिए गए कमांड का उपयोग करके यति लॉन्च या फाउंडेशन सीएलआई का उपयोग करके ZURB टेम्पलेट का उपयोग कर सकते हैं -

$ foundation new --framework sites --template zurb

इस टेम्पलेट को चलाने के लिए, मूल टेम्पलेट में निर्दिष्ट समान चरणों का पालन करें। आप Github से टेम्प्लेट फ़ाइलों को भी डाउनलोड कर सकते हैं ।

संपत्ति नकल

आप सामग्री को src / आस्तियों फ़ोल्डर में गुलप का उपयोग करके कॉपी कर सकते हैं जिसमें संपत्ति आपकी परियोजना फ़ोल्डर होगी। यहां महत्वपूर्ण बात यह है कि एसएएस फाइलें, जावास्क्रिप्ट फाइलें और चित्र इस संपत्ति की नकल प्रक्रिया के तहत नहीं आएंगे, क्योंकि वे सामग्री की प्रतिलिपि बनाने के लिए अपनी प्रक्रिया होगी।

पृष्ठ संकलन

आप अर्थात् तीन फ़ोल्डर के अंतर्गत HTML पृष्ठों बना सकते हैं पृष्ठों , लेआउट और partials जो बसता अंदर src / निर्देशिका। आप पाणिनी फ्लैट फाइल कंपाइलर का उपयोग कर सकते हैं जो टेम्प्लेट, पेज, एचटीएमएल भाग का उपयोग करके पृष्ठों के लिए लेआउट बनाता है। यह प्रक्रिया हैंडलबार्स टेम्प्लेटिंग भाषा का उपयोग करके की जा सकती है ।

एसएएस संकलन

आप Libsass का उपयोग करके SASS से CSS को संकलित कर सकते हैं और मुख्य SASS फ़ाइल को src / आस्तियों / scss / app.scss के तहत संग्रहीत किया जाएगा और साथ ही नए बनाए गए SASS भाग भी इस फ़ोल्डर में संग्रहीत किए जाएंगे। CSS का आउटपुट सामान्य CSS की तरह होगा, जो नेस्टेड स्टाइल में है। आप सीएसएस को साफ-सीएसएस के साथ संपीड़ित कर सकते हैं और अप्रयुक्त सीएसएस को UnCSS का उपयोग करके स्टाइलशीट से हटा सकते हैं ।

जावास्क्रिप्ट संकलन

जावास्क्रिप्ट फ़ाइलों को फाउंडेशन के साथ src / आस्तियों / js फ़ोल्डर के तहत संग्रहीत किया जाएगा और सभी निर्भरता app.js फ़ाइल में एक साथ बंधे हैं । नीचे दिए गए क्रम में निर्दिष्ट अनुसार फाइलें एक साथ बंधी होंगी -

• फाउंडेशन की निर्भरता।
• फ़ाइलें src / आस्तियों / js फ़ोल्डर के तहत संग्रहीत की जाएंगी।
• फ़ाइलों को एक फ़ाइल में बंडल किया जाता है, जिसे app.js कहा जाता है ।

छवि संपीड़न

डिफ़ॉल्ट रूप से, सभी छवियां संपत्ति / img फ़ोल्डर में dist फ़ोल्डर के तहत संग्रहीत की जाएंगी। आप gulp-imagemin जो JPEG, PNG, SVG और GIF फ़ाइलों का समर्थन करते हैं, का उपयोग करते हुए निर्माण के लिए छवियों को संपीड़ित कर सकते हैं ।

BrowserSync

आप एक BrowserSync सर्वर बना सकते हैं जो सिंक्रनाइज़ किए गए ब्राउज़र परीक्षण पर उपलब्ध हैhttp://localhost:8000और इस URL का उपयोग करके संकलित टेम्प्लेट देखने में सक्षम है। जब आपका सर्वर चल रहा होता है, तो फ़ाइल को सहेजते समय पृष्ठ स्वतः ही ताज़ा हो जाता है और जब आप काम करते हैं तो आप पृष्ठ में किए गए परिवर्तनों को वास्तविक समय में देख सकते हैं।