2014-04-22 8 views
16

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

+0

सिर्फ btw के लिए आसान है: मैं उपयोग करने में आसान बनाने के लिए, गुलप प्लगइन्स का एक सेट, साथ ही एक यमन जनरेटर लिख रहा हूं। इसे स्ट्रैटिक कहा जाता है: https://github.com/strugee/generator-stratic। जब मैं करूँगा तो मैं एक उचित उत्तर छोड़ दूंगा। – strugee

उत्तर

19

यदि आप चाहते हैं कि एक .json संरचना उत्पन्न करें और इसे Gulp के साथ फ़ाइल में जोड़ें, तो आप इसे कई तरीकों से कर सकते हैं। पहले दो उपयोग शुद्ध Gulp तकनीक:

  • आप जो मूल रूप से ऊपर एक समय में डेटा संरचना एक फ़ाइल का निर्माण करना होगा एक धारा प्लगइन through या through2 का उपयोग कर, लिख सकते हैं, तो एक दूसरे ऑपरेशन में, पैदा करेगा (यानी push() या queue())

  • आप एक Highland पाइपलाइन .reduce() करने के लिए फ़ाइलों एक डेटा संरचना करने के लिए तो .map() परिणाम एक फाइल करने के लिए उपयोग कर सकते हैं,, शायद मूल धारा के साथ एक .merge() कर अंत में एक फ़ाइल

  • +०१२३५१६४१०

दोनों ही मामलों में, आप एक उपयुक्त .base और .path, जो आपके प्लगइन वास्तव में पता नहीं होगा, कारण फाइल करने के लिए आप अभी तक मौजूदा नहीं बना रहे हैं करने के लिए अपने उत्पन्न नई vinyl फ़ाइल की आवश्यकता होगी। इस प्रकार, आपके कोड को एक पूर्ण पूर्ण पथ बनाना होगा ताकि gulp.dest() इसे सही जगह पर रखे।

तीसरे तकनीक के बजाय एक Metalsmith प्लगइन लिखने के लिए, कुछ इस तरह दिखेगा जो है:

function generate_json(files, smith, done) { 
    var menu = {}; 
    Object.keys(files).forEach(function(path) { 
     var file = files[path]; 
     if (path.slice(-5)===".html") { 
      menu[path] = ... // whatever you want to store about `file` 
     } 
    }); 
    files["path/to/menu.json"] = { contents: new Buffer(JSON.stringify(menu)) }; 
    done(); 
} 

नहीं जबकि ज्यादा से कम कोड अन्य तरीकों के लिए आवश्यक है, तो आप एक को समझने के लिए की आवश्यकता होगी इसे सही तरीके से करने के लिए बहुत कम है। बस सुनिश्चित करें कि अगर आपको कोई त्रुटि है, तो आप त्रुटि को पारित करने के लिए done(err) पर कॉल करें।

आप एक Gulp पाइप लाइन के साथ इस प्लगइन गठबंधन करने के लिए चाहते हैं, तो आप यह इतना की तरह लपेट कर सकते हैं, Gulpsmith का उपयोग कर:

gulp.src(...) 
.pipe(things()) 
.pipe(gulpsmith().use(generate_json)) 
.pipe(other_stuff()) 
.pipe(gulp.dest(...); 

यह सच है Gulp metalsmith पर कुछ फायदे हैं। लेखन प्लगइन की आसानी, दुख की बात है, उनमें से एक है। एक Gulp प्लगइन से नई फाइलें बनाना मुश्किल है, जैसा कि सही त्रुटि हैंडलिंग है। स्ट्रीमिंग दृष्टिकोण और क्रॉस-फाइल ऑपरेशंस की आवश्यकता के लिए स्थिर साइटों की प्रकृति के बीच एक मजबूत प्रतिबाधा विसंगति भी है।

उदाहरण के लिए, यदि आप एम्बेड करना चाहते हैं तो इसे बनाने के बाद प्रत्येक .html पृष्ठ में आपका मेनू, आपको एक और जटिल गुलप प्लगइन की आवश्यकता होगी, क्योंकि जब तक आपकी प्लगइन ने सभी फाइलें "देखी" थीं, तो वे "डाउनस्ट्रीम चला गया" है, या फिर आपको उन पर लटका देना होगा, फिर पूरा होने के बाद उन्हें फिर से स्ट्रीम करना होगा। मेटलस्मिथ प्लगइन में, डेटा को इन-प्लेस में डालने के लिए फ़ाइलों को फिर से वापस जाने के लिए, मेनू को जेनरेट करने के बाद आप केवल दूसरा लूप जोड़ देंगे। आपको उन फ़ाइलों के साथ पास करने के लिए कुछ भी करने की ज़रूरत नहीं है जिन्हें आप कुछ भी नहीं कर रहे हैं।

इस तरह के कार्यों के लिए, मेटलस्मिथ प्लगइन एपीआई गुलप के लिए स्पष्ट रूप से बेहतर है। लेकिन उन कार्यों के लिए जो अकेले स्ट्रीम की गई फ़ाइलों पर काम कर सकते हैं, जीत के लिए मौजूदा गुल प्लगइन का उपयोग करें।

असल में, मेटलस्मिथ वास्तव में स्थिर साइट जेनरेटर का गुलप है, जबकि गुलप स्ट्रीमिंग सिस्टम सिस्टम का गुलप है। और आप Gulpsmith का उपयोग कर दोनों की ताकत को जोड़ सकते हैं।

(वैसे, अपने वास्तविक कार्य पर निर्भर करता है, तो आप कुछ मौजूदा metalsmith प्लगइन्स सभी या इसे का हिस्सा है कि मिल सकता है। उदाहरण के लिए metalsmith-collections प्लगइन निश्चित पैटर्न मिलान फ़ाइलों के लिए अनुक्रमणिका बनाता है, वहाँ एक metalsmith-title कि एक HTML निकालता है शीर्षक शीर्षक, आदि के लिए शीर्षलेख)

+0

* वास्तव में * अच्छा टूटना और महान उदाहरण। धन्यवाद! – Ian

+0

अच्छा लेखन! स्थली साइट जनरेटर के रूप में गुलप का उपयोग करने के बारे में एक और अच्छा ब्लॉग पाया जा सकता है [यहां] (https://medium.com/objects-in-space/considering-a-static-site-tool-learn-gulp-2fd5f9821fc4) – vanthome

4

हां, आप स्थिर पीढ़ी में गलती कर सकते हैं।

आपको शायद सोचने से कम प्लगइन की आवश्यकता है। गिनती शायद शून्य से नीचे हो सकती है।

विचार करें कि आप घूंट और कोई प्लग इन के साथ कर सकते हैं:

var gulp = require('gulp'), 
    browserify = require('browserify'); 

gulp.task('browserify', function(callback) { 
    browserify('app.js').bundle() 
     .pipe(fs.createWriteStream('dist/app.js') 
     .on('close', callback); // why? read on... 
}); 

Too many gulp plugins don't need to exist। वे कुछ मूल मॉड्यूल को gulp.src और gulp.dest के बीच उपयोग की जाने वाली विनाइल ऑब्जेक्ट स्ट्रीम में अनुकूलित करते हैं, लेकिन विनाइल ऑब्जेक्ट स्ट्रीम अनिवार्य नहीं हैं।

मॉड्यूल एक्स आपके लिए अपनी स्थिर पीढ़ी के कुछ हिस्से को करने की आवश्यकता है? callback अपने कार्य फ़ंक्शन के लिए तर्क के रूप में लें, और इसे अपने तर्कों के साथ एक्स पर पास करें। अक्सर पर्याप्त, यह एक लाइनर है: require -एक प्लगइन करने से आपका कोड अधिक लंबा हो जाएगा।

यहां तक ​​कि आपके वर्कफ़्लो के उन हिस्सों के लिए भी "सब कुछ पढ़ें, इसे स्मृति में संभाल लें, और इसे एक बार लिखें" के रूप में वर्णित है, आप vinyl ऑब्जेक्ट्स को बदलने के लिए through2.obj का उपयोग कर सकते हैं या gulp-filter उन्हें बाहर निकालने के लिए उपयोग कर सकते हैं। Gulp plugins (या, बदतर, metalsmithgulpsmith के माध्यम से प्लगइन्स) अंतिम उपाय हैं।

var gulp = require('gulp'), 
    filter = require('gulp-filter'), 
    through2 = require('through2'); 

gulp.task('generate-assets', function() { 
    return gulp.src('path/to/your/content/and/templates/**') 
       .pipe(filter(shouldFileSurvive)) 
       .pipe(through2.obj(makeFileDifferent)) 
       .pipe(gulp.dest('dist/')); 
}); 

नोट: अगर तुम वापस बुला नहीं कर रहे हैं, आप अंतिम pipe का परिणाम लौट जाना चाहिए। अन्यथा, गल्प सोचेंगे कि आपका कार्य तुल्यकालिक है और निर्भर कार्यों को लात मारने से पहले प्रतीक्षा न करें।

यदि अंतिम पाइप gulp.dest की बजाय सामान्य स्ट्रीम देता है, तो b59182c7 भूमि तक कॉलबैक लें (पहला उदाहरण देखें)।

3

मैं ऐसी प्लगइन लिख रहा हूं, यह gulp-static-site है। दूसरे दो उत्तरों को देखते हुए मैं कहूंगा कि इसकी कार्यक्षमता कहीं भी वेनिला गल्प और gulpsmith के बीच फिट बैठती है।

Gulp-filetree

मुख्य कार्यक्षमता वास्तव में एक पेड़ की तरह डेटा संरचना है, जो gulp-filetree द्वारा किया जाता है की कंप्यूटिंग है। यह धारा समाप्त होने तक वृद्धिशील रूप से एक पेड़ बनाता है। फिर प्रत्येक फ़ाइल (vinyl ऑब्जेक्ट) .tree संपत्ति के साथ फिर से शुरू की जाती है।

उस डेटा संरचना के बारे में कुछ और जानकारी प्राप्त करने के लिए tree.js पर एक नज़र डालें।

Gulp-static-site

इस प्लगइन HTML फ़ाइलों की एक धारा लेता gulp-filetree के माध्यम से और एक जेड टेम्पलेट है कि एक निर्देशिका वृक्ष मेनू और फ़ाइल की सामग्री के साथ एक मूल लेआउट कहते हैं में उन्हें भेजता है।

लूकी मुख्य पाइपलाइन के लिए यहां देखें। https://github.com/0x01/gulp-static-site/blob/master/index.js#L146 (आप इसे के रूप में यह प्लगइन बाहर घूँट में किया जा सकता है सबसे सुंदर लेकिन ठीक Markdown रूपांतरण हटा दिया जाना चाहिए नहीं है, यह देखने के रूप में कर सकते हैं शायद वही तर्क अन्य सामान के लिए चला जाता है ...।।)

प्रश्न: क्या यह gulpsmith से संबंधित है?

गुलस्मिथ निश्चित रूप से शक्तिशाली और पूर्ण प्रतीत होता है, मैं शायद इसका उपयोग करता हूं, जब मैंने इसे शुरू में इस समय कोड किया था।

कहा जा रहा है; यह प्लगइन सरल, हल्का वजन वाला है और इसमें एक छोटा कोडबेस है। मुझे लगता है यह समझ में यह क्या करता है और अपनी पसंद के अनुसार बदलने के लिए, खींच अनुरोध निश्चित रूप से स्वागत करते हैं :-)

तो कुछ और स्पष्ट नहीं है, एक मुद्दा फ़ाइल या मुझे यहाँ से अवगत कराएं, धन्यवाद

+0

क्या समस्याएं क्या 'गल्प-स्टेटिक साइट' हल करता है कि @ गर्थ-किड का जवाब मेटलमिथ/गिल्स्मिथ के साथ संबोधित नहीं करता है? – Sukima

+0

शायद उस समय मैंने विंटरस्मिथ के लिए मेटलमिथ को नोटिस या भ्रमित नहीं किया था (जिसे मुझे पसंद नहीं आया)। किसी भी मामले में मुझे निश्चित रूप से 'गिल्स्मिथ' के बारे में पता नहीं था। अब उस पर ध्यान दिया, मुझे लगता है कि यह बहुत साफ है। यह प्लगइन निश्चित रूप से बहुत अधिक बुनियादी, अनुमानित है क्योंकि मैं एक नीचे-नीचे कोडर हूं। यह भी बहुत हल्का और सरल हैकबल कोड है; जो पहले से ही बहुत कुछ करता है। मैं जवाब अपडेट करूंगा, धन्यवाद! – wires

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

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