टास्क रनर (गुलप, ग्रंट, आदि) और बुंडलर (वेबपैक, ब्राउजरिफ़)। एक साथ उपयोग क्यों करें?


117

मैं टास्क रनर और बंडलर वर्ल्ड के लिए थोड़ा नया हूं और जैसी चीजों से गुजर रहा हूं

ग्रन्ट, गल्प, वेबपैक, ब्राउजरिफ़

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

यह नया होने के नाते, मैं गलत दिशा में चीजों को ले जा सकता हूं। यह बहुत अच्छा होगा यदि आप इंगित कर सकते हैं कि मैं क्या याद कर रहा हूं। किसी भी उपयोगी लिंक का स्वागत है।

अग्रिम में धन्यवाद।

जवाबों:


226

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

Webpack और Browserify पैकेज बंडलर्स हैं। मूल रूप से, वे एक पैकेज की निर्भरता के सभी के माध्यम से चलाने के लिए डिज़ाइन किए गए हैं और अपने स्रोत को एक फ़ाइल में संग्रहीत करते हैं जिसे (आदर्श रूप से) एक ब्राउज़र में उपयोग किया जा सकता है। वे आधुनिक वेब विकास के लिए महत्वपूर्ण हैं, क्योंकि हम बहुत सारे पुस्तकालयों का उपयोग करते हैं जिन्हें Node.js और v8 संकलक के साथ चलाने के लिए डिज़ाइन किया गया है । फिर से, पेशेवरों और विपक्षों और विभिन्न कारणों से कुछ डेवलपर्स एक या दूसरे (या कभी-कभी दोनों!) को पसंद करते हैं। आमतौर पर इन समाधानों के आउटपुट बंडलों में कुछ प्रकार के बूटस्ट्रैपिंग तंत्र होते हैं जो आपको संभावित फ़ाइल बंडल में सही फ़ाइल या मॉड्यूल को प्राप्त करने में मदद करते हैं।

धावकों और बंडलों के बीच की धुंधली रेखा यह हो सकती है कि बंडलर अपने रन-टाइम के दौरान जटिल परिवर्तन या ट्रांस- पाइलशन भी कर सकते हैं, इसलिए वे कई काम कर सकते हैं जो कार्य धावक कर सकते हैं। वास्तव में, ब्राउज़र और वेबपैक के बीच संभवतः लगभग सौ ट्रांसफार्मर हैं जो आप अपने स्रोत कोड को संशोधित करने के लिए उपयोग कर सकते हैं। तुलना के लिए, npm पर अभी कम से कम 2000 gulp प्लगइन्स सूचीबद्ध हैं। तो आप देख सकते हैं कि आपके आवेदन के लिए सबसे अच्छा काम करता है की स्पष्ट (उम्मीद है ...?) परिभाषाएँ हैं।

कहा जा रहा है, आप वास्तव में एक ही समय में या अग्रानुक्रम में दोनों टास्क-रनर और पैकेज बंडलर्स का उपयोग करके एक जटिल प्रोजेक्ट देख सकते हैं। मेरे कार्यालय में उदाहरण के लिए, हम अपने प्रोजेक्ट को शुरू करने के लिए gulp का उपयोग करते हैं, और webpack वास्तव में एक विशिष्ट gulp कार्य से चलाया जाता है जो स्रोत बंडल बनाता है जिसे हमें ब्राउज़र में अपना ऐप चलाने की आवश्यकता होती है। और क्योंकि हमारा ऐप isomorphic है , हम कुछ सर्वर कोड को भी बंडल करते हैं

मेरी विनम्र राय में, आप इन सभी तकनीकों से परिचित होना चाह सकते हैं क्योंकि संभावना है कि आप अपने करियर के दौरान इन सभी का उपयोग (उपयोग) देखेंगे।


22
एसओ पर सबसे अच्छे उत्तरों में से एक मैंने कभी पढ़ा है और वास्तव में मैं क्या देख रहा था। धन्यवाद। शायद एक ब्लॉग पोस्ट में लिखें?
अंजबरास

1
अच्छी तरह से यहाँ आपको बहुत अच्छी व्याख्या मिल सकती है - Survjs.com/webpack/appendices/comparison
अंशुल

0

मैंने अभी अपना खुद का टास्क रनर / बंडलर बनाया है।

यह गल्प और शायद वेबपैक की तुलना में उपयोग करने के लिए सरल है (हालाँकि मैंने कभी वेबपैक का उपयोग नहीं किया है)।

यह बहुत ही सरल है और इसमें बॉक्स से बाहर की ओर बबेल, ब्राउजराइज़, क्रॉलिज़, मिनिफाई और हैंडलबार हैं।

सिंटैक्स इस तरह दिखता है:

const Autumn = require("autumn-wizard");




const w = new Autumn();

//----------------------------------------
// CSS
//----------------------------------------
var cssFiles = [
    './lib/pluginABC/src/css/**/*.{css,scss}',
];
w.forEach(cssFiles, srcPath => {
    var dstPath = w.replace('/src/', '/dist/', srcPath);
    dstPath = w.replace('.scss', '.css', dstPath);
    dstPath = w.replace('.css', '.min.css', dstPath);
    w.minify(srcPath, dstPath, {
        sourceMap: useSourceMap,
    });
});


//----------------------------------------
// BUNDLE THE JS MODULE
//----------------------------------------
var srcPath = "./lib/pluginABC/src/main.js";
var dstPath = "./lib/pluginABC/dist/bundled.min.js";
w.bundle(srcPath, dstPath, {
    debug: useSourceMap,
});


//----------------------------------------
// CREATE THE HANDLEBARS TEMPLATES
//----------------------------------------
var tplPaths = [
    "./lib/pluginABC/src/templates/**/*.hbs",
];
dstPath = "./lib/pluginABC/dist/templates/bundled.js";
w.precompile(tplPaths, dstPath);

और डॉक यहां है: https://github.com/lingtalfi/Autumn

उम्मीद है कि यह मदद करता है।


लिंग: मैं हर समय कक्षाओं और "आयात" का उपयोग करता हूं। क्या आपकी परियोजना आयातित फ़ाइलों को ट्रांसपाइल करती है?
रॉबर्ट वाइल्डलिंग
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.