Come posso inserire il contenuto in un file durante una generazione di gulp?

Question

sono riuscito a realizzare il mio compito utilizzando un plugin chiamato sorso gulp-insert come questo:

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

Quello che sto facendo è la lettura del file di configurazione della nostra applicazione che è gestito dal modulo config su NPM. Ottenere il nostro file di configurazione dal codice lato server è un gioco da ragazzi usando var config = require('config');, ma siamo un'app a pagina singola e spesso è necessario accedere alle impostazioni di configurazione sul lato client. Per fare ciò infilo l'oggetto config in un servizio angolare.

Ecco il servizio Angolare prima di gulp build.

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

Il segnaposto è in una stringa in modo che sia valida JavaScript per alcuni degli altri plug-gulp che elaborano prima il file. L'utilità gulpInsert mi consente di inserire la configurazione come questa.

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

Questo funziona ma sembra un po 'hacky. Per non parlare del fatto che deve bufferizzare l'intero file in bundle solo così posso eseguire l'operazione. C'è un modo più elegante per realizzare la stessa cosa? Preferibilmente uno che consente al flusso di fluire senza intoppi senza dover tamponare l'intero fascio alla fine? Grazie!

Answer 1

Avete controllato gulp-replace-task?

Qualcosa di simile

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

Answer 2

Certo, anche questo sembra un po 'hacky, ma forse leggermente migliore ... Sto usando envify e gulp-env in un progetto React. Potresti fare qualcosa di simile.

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

fabbrica:

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