गलप बिल्ड के दौरान मैं फ़ाइल में सामग्री कैसे सम्मिलित कर सकता हूं?

Question

मैं एक घूंट प्लगइन gulp-insert इस तरह कहा जाता है का उपयोग कर मेरे कार्य को पूरा करने में कामयाब रहे:

gulp.task('compile-js', function() { 
    // Minify and bundle client scripts. 
    var scripts = gulp.src([ 
    srcDir + '/routes/**/*.js', 
    srcDir + '/shared/js/**/*.js' 
    ]) 
    // Sort angular files so the module definition appears 
    // first in the bundle. 
    .pipe(gulpAngularFilesort()) 
    // Add angular dependency injection annotations before 
    // minifying the bundle. 
    .pipe(gulpNgAnnotate()) 
    // Begin building source maps for easy debugging of the 
    // bundled code. 
    .pipe(gulpSourcemaps.init()) 
    .pipe(gulpConcat('bundle.js')) 
    // Buffer the bundle.js file and replace the appConfig 
    // placeholder string with a stringified config object. 
    .pipe(gulpInsert.transform(function (contents) { 
     return contents.replace("'{{{appConfigObj}}}'", JSON.stringify(config)); 
    })) 
    .pipe(gulpUglify()) 
    // Finish off sourcemap tracking and write the map to the 
    // bottom of the bundle file. 
    .pipe(gulpSourcemaps.write()) 
    .pipe(gulp.dest(buildDir + '/shared/js')); 

    return scripts.pipe(gulpLivereload()); 
}); 

क्या मैं कर रहा हूँ जो NPM पर config मॉड्यूल द्वारा किया जाता है हमारे एप्लिकेशन के विन्यास फाइल पढ़ रहा है। सर्वर-साइड कोड से हमारी कॉन्फ़िगरेशन फ़ाइल प्राप्त करना var config = require('config'); का उपयोग करके एक स्नैप है, लेकिन हम एक सिंगल-पेज ऐप हैं और अक्सर क्लाइंट-साइड पर कॉन्फ़िगरेशन सेटिंग्स तक पहुंच की आवश्यकता होती है। ऐसा करने के लिए मैं एक कोणीय सेवा में कॉन्फ़िगरेशन ऑब्जेक्ट को भरता हूं।

यहां गिल्ड बिल्ड से पहले कोणीय सेवा है। इतना है कि यह अन्य घूंट प्लगइन्स कि पहली फ़ाइल पर कार्रवाई से कुछ के लिए मान्य JavaScript है

angular.module('app') 
    .factory('appConfig', function() { 
    return '{{{appConfigObj}}}'; 
    }); 

प्लेसहोल्डर एक स्ट्रिंग में है। gulpInsert उपयोगिता मुझे इस तरह की कॉन्फ़िगरेशन डालने देती है।

.pipe(gulpInsert.transform(function (contents) { 
    return contents.replace("'{{{appConfigObj}}}'", JSON.stringify(config)); 
})) 

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

Answer 1

आप gulp-replace-task जांच की है?

कुछ

तरह

[...] 
.pipe(gulpSourcemaps.init()) 
.pipe(replace({ 
    patterns: [{ 
    match: '{{{appConfigObj}}}', 
    replacement: config 
    }], 
    usePrefix: false 
}) 
.pipe(gulpUglify()) 
[...] 

Answer 2

मान्य है, यह थोड़ा सा हैकी भी लगता है, लेकिन शायद थोड़ा बेहतर ... मैं एक प्रतिक्रिया परियोजना में envify और gulp-env का उपयोग कर रहा हूं। आप कुछ इस तरह कर सकता है।

gulpfile.js:

var config = require('config'); 
var envify = require('envify'); 

gulp.task('env', function() { 
    env({ 
     vars: { 
      APP_CONFIG: JSON.stringify(config) 
     } 
    }); 
}); 

gulp.task('compile-js', ['env'], function() { 
    // ... replace `gulp-insert` with `envify` 
}); 

कारखाना:

angular.module('app') 
    .factory('appConfig', function() { 
    return process.env.APP_CONFIG; 
    });