Bests अभ्यास - Gulp

Question

यहाँ, बात यह है

मैं ऐसी दुनिया में जहां आप कई js फ़ाइलों एक वेब पेज के लिए शामिल है से आते हैं। कुछ हमेशा पृष्ठ में शामिल हैं (आपकी libs, मेनू आदि ...) और अन्य वर्तमान पृष्ठ (लॉगिन पृष्ठ के लिए जेएस, सदस्यता आदि के लिए जेएस ...) के आधार पर हैं। मूल रूप से मान लें कि मेरे पास प्रति पृष्ठ 1 अलग जेएस फ़ाइल प्लस libs है।

अब मैं browserify के साथ एक नई परियोजना शुरू करना चाहते हैं और मैं एक बड़ी समस्या के सामने हूँ:

• सभी उदाहरण मैंने देखा है में, हमेशा है एक एकल प्रवेश बिंदु (app.js की तरह)।
• मेरे मामले में मेरे पास एन प्रवेश बिंदु (1 प्रति पृष्ठ) होगा।

तो मेरे सवालों का हैं:

• यह प्रति पेज 1 प्रवेश बिंदु के लिए अच्छा प्रथाओं के खिलाफ है? क्यूं कर ?
  • यदि हाँ, पृष्ठ-विशिष्ट जे एस का बहुत कुछ के साथ एक बड़ी एप्लिकेशन browserifying के लिए अच्छा तरीका क्या है?
  • यदि कोई, गुलप के साथ इसे स्वचालित कैसे करें। मैंने पाया हर उदाहरण में। आपको हर फाइल का नाम जानना होगा और इसे एक के बाद एक प्रक्रिया करना होगा। (उदाहरण के लिए सैकड़ों पृष्ठों के साथ एक बड़ी परियोजना में बहुत परेशान है)
• आप अपनी परियोजनाओं में इस से कैसे निपट रहे हैं? क्या मुझे पेज-विशिष्ट जेएस कोड से निपटने के लिए अपने तरीके पर पूरी तरह से पुनर्विचार करना है?

Answer 1

यह आपके विशेष मामले पर निर्भर करता है। ब्राउज़रइफ़ को अक्सर एकल पृष्ठ ऐप्स के लिए उपयोग किया जाता है जहां एकल बंडल अक्सर सबसे अच्छा समाधान होता है। आप इसे एक गैर-पेज एप्लिकेशन में उपयोग कर रहे हैं।

1. बंडल सब कुछ एक साथ:

   मैं दो विकल्प देखें। यदि आपके पास अपेक्षाकृत छोटा ऐप है, तो यह सबसे आसान और शायद सबसे कुशल समाधान होगा (ब्राउज़र कैशिंग के कारण)। बस अपने सभी पेज विशिष्ट मॉड्यूल को अपने अन्य लोगों के साथ शामिल करें।

2. अलग बंडल बनाएं। आप प्रत्येक पृष्ठ के लिए एक बंडल बना सकते हैं, या संबंधित पृष्ठों के समूहों के लिए एक बंडल बना सकते हैं। ब्राउज़रइफ़ प्रत्येक बंडल के लिए एक अलग फ़ाइल बनाएगा और आप उन्हें प्रत्येक पृष्ठ पर स्वतंत्र रूप से शामिल कर सकते हैं।

<script src="common-bundle.js"></script> 
<script src="bundle-for-this-page.js"></script> 

तुम अब भी मॉड्यूल भर में require() उपयोग करने के लिए सक्षम हो जाएगा।

आप प्रत्येक पृष्ठ की जावास्क्रिप्ट को एक अलग निर्देशिका में अलग कर सकते हैं और गल्फ को स्वचालित करने के लिए इसका उपयोग कर सकते हैं।

var pageDirs = ['page1', 'page2']; 

pageDirs.forEach(function(pageDir) { 
    gulp.task('browserify-' + pageDir, function() { 
     gulp.src(pageDir + '/index.js') 
      .pipe(browserify()) 
      .on('prebundle', function(bundle) { 
       bundle.external('./common-bundle'); 
      }) 
      .pipe(gulp.dest('./build/' + pageDir)) 
    }); 
}); 

gulp.task('browserify-all', pageDirs.map(function(pageDir) { 
    return 'browserify-' + pageDir; 
}); 

अपने सामान्य बंडल browserifying के लिए एक अलग कार्य बनाएँ: घूंट के साथ यह कुछ की तरह लग सकता है।

Answer 2

आपके उत्तर के लिए धन्यवाद। यह मुझे ट्रैक पर ले जाता है।

var gulp = require('gulp'); 
var gutil = require('gulp-util'); 
var browserify = require('browserify'); 
var transform = require('vinyl-transform'); 

// BROWSERIFY 
gulp.task('browserify', function(){ 
    var browserified = transform(function(filename) { 
     var b = browserify(filename); 
     b.transform(reactify); 
     return b.bundle(); 
    }); 

    return gulp.src(JS_SRC) 
     .pipe(browserified) 
     //.pipe(uglify()) 
     .pipe(gulp.dest(JS_DEST)) 
     .pipe(notify({message: 'Browserify task completed.'})); 
}); 

यह स्क्रिप्ट हर JS_SRC निर्देशिका में फ़ाइल जे एस और लेता है: अन्य अनुसंधान के एक बहुत बाद, मैं सही स्क्रिप्ट मैं कई प्रविष्टि उनमें से हर पर मैन्युअल रूप से इसे कहते हैं havin whithout फ़ाइलों अंक browserify को needet पाया मान लें कि यह एक ब्राउज़र प्रवेश प्रविष्टि बिंदु है।

यह मेरे लिए ठीक काम करता है।