gulp: uglify और sourcemaps

Question

मैं गल्प का उपयोग कर रहा हूं।

मैं एक या एकाधिक जेएस फाइलें (jQuery कहें) रखना चाहता हूं ताकि उन्हें एक साथ गठबंधन किया जा सके, इसे छोटा करें, और इसे वितरण फ़ोल्डर में लिखें।

इस तरह मैं यह कर:

minifyJS(['/js/myModule.file1.js', 
      '/js/myModule.file2.js'], '/dist/js', 'myModule') 

समारोह:

function minifyJS(sourceFiles, destinationFolder, filenameRoot) { 
    return gulp.src(sourceFiles) 
     .pipe(plumber()) 

     // .pipe(sourcemaps.init()) here ??? 
     .pipe(concat(filenameRoot + '.js')) 
     .pipe(sourcemaps.init()) // or here ??? 

     .pipe(gulp.dest(destinationFolder)) // save .js 
     .pipe(uglify({ preserveComments: 'license' })) 
     .pipe(rename({ extname: '.min.js' })) 
     .pipe(gulp.dest(destinationFolder)) // save .min.js 
     .pipe(sourcemaps.write('maps')) 
     .pipe(gulp.dest(destinationFolder)) // save .map 
} 

क्या मैं के बारे में निश्चित नहीं हूँ sourcemaps.init() स्थान ...

मैं बनाना चाहिए कई है (2 मेरे मामले में) मैप फाइलें (यदि ब्राउज़र द्वारा समर्थित है तो यह अच्छा होगा) या केवल एक (/maps/myModule.map)?

Answer 1

तो इस प्रकार गुलप में स्रोतमैप कैसे काम करते हैं: gulp.src के माध्यम से आपके द्वारा चुने गए प्रत्येक तत्व को एक वर्चुअल फ़ाइल ऑब्जेक्ट में स्थानांतरित किया जाता है, जिसमें बफर में सामग्री शामिल है, साथ ही मूल फ़ाइल नाम भी शामिल है। वे आपकी धारा के माध्यम से पाइप होते हैं, जहां सामग्री बदल जाती है।

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

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

return gulp.src(sourceFiles) 
    .pipe(sourcemaps.init()) 
    .pipe(plumber()) 
    .pipe(concat(filenameRoot + '.js')) 
    .pipe(gulp.dest(destinationFolder)) // save .js 
    .pipe(uglify({ preserveComments: 'license' })) 
    .pipe(rename({ extname: '.min.js' })) 
    .pipe(sourcemaps.write('maps')) 
    .pipe(gulp.dest(destinationFolder)) // save .min.js 

sourcemaps.write वास्तव में sourcemaps बारे में नहीं है, यह सिर्फ Gulp बताता है उन्हें एक भौतिक फ़ाइल में अमल में लाना करने के लिए जब आप gulp.dest फोन:

यह आपके धारा है।

बहुत ही sourcemap प्लगइन Gulp 4 देशी रूप में शामिल किया जाएगा: http://fettblog.eu/gulp-4-sourcemaps/ - आप कैसे sourcemaps Gulp साथ आंतरिक रूप से काम के बारे में अधिक जानकारी चाहते हैं, वे मेरी Gulp पुस्तक के अध्याय 6 में हैं: http://www.manning.com/baumgartner