2015-08-03 6 views
9

मैं अपने गल्प-आधारित फ्रंटएंड टूलचेन के साथ सेमेन्टिक यूआई को एकीकृत करने का तरीका जानने का प्रयास कर रहा हूं।अर्थात् यूआई के साथ मुख्य निर्माण से उत्पन्न कलाकृतियों को अलग कैसे कर सकता हूं?

एनपीएम आर्टिफैक्ट semantic-ui में एक इंटरैक्टिव इंस्टॉलर शामिल है जो semantic.json फ़ाइल को मेरी प्रोजेक्ट की जड़ पर लिख देगा और कम फाइल, गल्प कार्य और मेरे प्रोजेक्ट में कुछ कॉन्फ़िगरेशन स्थापित करेगा। इन सभी फ़ाइलों को semantic.json में निर्दिष्ट एक एकल आधार निर्देशिका की उपनिर्देशिका में रखा जाएगा।

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

हालांकि, अगर मैं ऐसा करता हूं, तो इंस्टॉलर एक संदेश के साथ असफल हो जाएगा कि यह अद्यतन करने के लिए निर्देशिका नहीं ढूंढ सकता है और मुझे इसके बजाय इंटरैक्टिव इंस्टॉलर में छोड़ सकता है। यह वही नहीं है जो मैं चाहता हूं, क्योंकि इसका मतलब है कि मेरा निर्माण अब गैर-इंटरैक्टिव नहीं है (जिससे सीआई निर्माण विफल हो जाएगा)।

मैं अपने गिट भंडार में सेमेन्टिक और इसके जेनरेट किए गए कलाकृतियों को किए बिना मेरे निर्माण में सेमेन्टिक यूआई को कैसे एकीकृत कर सकता हूं?

+0

आप किसी भी तरह से सिमेंटिक यूआई संशोधित नहीं किया है (अर्थात विषयों जोड़ा या बदल जाता चर/ओवरराइड) और बस इसे और निर्माण डाउनलोड कर रहे हैं, क्यों तुम वैसे भी अपने निर्माण प्रणाली का उपयोग करना चाहते हैं? क्यों न केवल बोवर से निर्माण का उपयोग करें? – fstanis

+0

यही वह है जो मैं कर रहा था, लेकिन भविष्य में थीमिंग की आवश्यकता होगी। तो सवाल अभी भी मान्य है। –

उत्तर

12

यही वह है जो हमने अपने समान परिदृश्य में किया था। निम्नलिखित सत्य हैं:

  • सब कुछ सिमेंटिक यूआई उत्पन्न .gitignore में है। इसलिए, केवल सिमेंटिक यूआई फ़ाइलें हम अपने रेपो में कर रहे हैं:
    • semantic.json
    • अर्थ/src फ़ोल्डर (यह वह जगह है जहाँ हमारे विषय संशोधनों वास्तव में कर रहे हैं)
    • अर्थ/कार्य फ़ोल्डर (शायद Git पर होने की जरूरत नहीं है, लेकिन क्योंकि यह इमारत के लिए आवश्यक है, सब कुछ आसान है अगर हम हमारे रेपो में रखने)
  • हम करने के लिए (फिर) सिमेंटिक चलाने की जरूरत कभी नहीं यूआई इंस्टॉलर, सब कुछ हमारे gulpfile.js में एकीकृत है।
  • हमारे संपत्तियों में सेमेन्टिक यूआई आउटपुट फ़ोल्डर जो उसके स्रोत के समान फ़ोल्डर में नहीं है।
  • अर्थात् यूआई को पैकेज.जेसन में नियमों के अनुसार स्वचालित रूप से एनपीएम का उपयोग करके अपडेट किया जाता है।

    1. सिमेंटिक यूआई स्थापित करें:

ये कदम उठाएँ इस लक्ष्य को हासिल करने के लिए आवश्यक हैं। इसके द्वारा मैं मानता हूं कि आपने या तो एनपीएम का इस्तेमाल किया है या इसे गिट से क्लोन किया है (एनपीएम का उपयोग अत्यधिक अनुशंसित है), या तो, आपके पास अर्थपूर्ण है।अपनी परियोजना के मुख्य फ़ोल्डर में json और gulpfile.js, src और कार्यों के साथ एक अर्थ फ़ोल्डर।

  • सुनिश्चित करें कि अर्थात् यूआई बनाया जा सकता है। अर्थात्/ पर नेविगेट करें और gulp build चलाएं। यह dist फ़ोल्डर को अर्थात्/ निर्देशिका में बनाना चाहिए। इसे हटाएं और सेमेन्टिक यूआई के gulpfile.js को हटाएं क्योंकि अब आपको इसकी आवश्यकता नहीं होगी।

  • semantic.json संपादित करें।

    1. बदलें "packaged": "dist/", पथ के लिए जहां उत्पादन semantic.css और semantic.js सिमेंटिक यूआई के फ़ोल्डर के सापेक्ष करना चाहते हैं: आप दो लाइनों को संपादित करने की जरूरत है। हमारे मामले में, यह उसी तरह से "packaged": "../../assets/semantic/",
    2. बदलें "themes": "dist/themes/" था, विषयों के बाद से/ फ़ोल्डर सिमेंटिक यूआई का उपयोग करता है तो यह semantic.css को उसी फ़ोल्डर में होने की जरूरत है फ़ॉन्ट और चित्र शामिल हैं। हमारे मामले में, यह "themes": "../../assets/semantic/dist/themes/" था।
  • संपादित अपने gulpfile.js तो यह का उपयोग करता है सिमेंटिक यूआई का निर्माण कार्य। var semanticBuild = require('./semantic/tasks/build'); जोड़ें (यदि अर्थात्/ आपके gulpfile.js) के समान फ़ोल्डर में है और फिर उस पर निर्भर करता है जो उस पर निर्भर करता है, उदाहरण के लिए gulp.task('semantic', semanticBuild);

  • वैकल्पिक रूप से, स्वच्छ कार्य बनाएं। हमने इसके लिए del का उपयोग किया।

    gulp.task('clean:semantic', function(cb) { 
        del(['assets/semantic'], cb); 
    }); 
    
  • +0

    आशाजनक लग रहा है, धन्यवाद! हालांकि, क्या आप निश्चित हैं कि आपके 'अर्थपूर्ण' कार्य पर निर्भर कार्य केवल आपके 'अर्थपूर्ण' कार्य पूरा होने के बाद ही शुरू हो जाते हैं? चूंकि अर्थपूर्ण उपयोग के लिए गल्प स्क्रिप्ट्स 'gulp.start()' का अर्थ है, जिसका अर्थ है कि निर्माण के पूरा होने पर गल्प को जानने का कोई तरीका नहीं है। –

    +0

    मैं नहीं हूं - हम अर्थपूर्ण को एक अलग कार्य के रूप में रखते हैं क्योंकि इसे बनाने में काफी समय लगता है और इसलिए हमें केवल तभी ऐसा करना पड़ता है जब हमें आवश्यकता होती है। आप जो चाहते हैं उसे प्राप्त करने के लिए शायद आप [gulp-chug] (https://www.npmjs.com/package/gulp-chug) का उपयोग कर सकते हैं और वास्तव में अर्थात् UI के gulpfile.js को आवेक कर सकते हैं, लेकिन मैं इसके बारे में निश्चित नहीं हूं। – fstanis

    संबंधित मुद्दे

     संबंधित मुद्दे