Wie kann ich während eines Kultivierungsvorgangs Inhalte in eine Datei einfügen?

Question

ich es geschafft, meine Aufgabe mit einem großen Schluck Plugin namens gulp-insert wie folgt zu erreichen:

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()); 
}); 

Was ich tue unsere App-Konfigurationsdatei liest, die durch das config Modul auf npm verwaltet wird. Die Verwendung unserer Konfigurationsdatei aus serverseitigem Code ist mit var config = require('config'); ein Kinderspiel, aber wir sind eine Single-Page-App und benötigen häufig Zugriff auf die Konfigurationseinstellungen auf der Client-Seite. Dazu stecke ich das Konfigurationsobjekt in einen Angular-Dienst.

Hier ist der Angular Service vor dem Schluckaufbau.

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

Der Platzhalter ist in einer Reihe, so dass es für einige der anderen schlucken Plugins gültig JavaScript ist, dass die Datei zuerst verarbeiten. Das gulpInsert Dienstprogramm lässt mich die Konfiguration wie folgt einfügen.

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

Dies funktioniert, fühlt sich aber ein wenig hacky. Ganz zu schweigen davon, dass es die gesamte gebündelte Datei puffern muss, damit ich die Operation ausführen kann. Gibt es einen eleganteren Weg, um das Gleiche zu erreichen? Vorzugsweise eine, die es dem Strom ermöglicht, fließend weiterzufließen, ohne das ganze Bündel am Ende zu puffern? Vielen Dank!

Answer 1

Haben Sie schon gulp-replace-task?

So etwas wie

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

Answer 2

Zugegeben, das fühlt sich ein bisschen hacky an, aber vielleicht etwas besser ... Ich benutze envify und gulp-env in einem React-Projekt. Du könntest so etwas tun.

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` 
}); 

Fabrik:

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