Jak mogę wstawić zawartość do pliku podczas budowania gulp?

Question

udało mi się zrealizować moje zadanie za pomocą wtyczki haustem nazwie gulp-insert tak:

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

Co robię czyta plik konfiguracyjny naszej aplikacji, która jest zarządzana przez moduł config na KMP. Pobieranie naszego pliku konfiguracyjnego z kodu po stronie serwera jest łatwe dzięki użyciu var config = require('config');, ale jesteśmy aplikacją składającą się z jednej strony i często potrzebujemy dostępu do ustawień konfiguracyjnych po stronie klienta. W tym celu wciskam obiekt konfiguracyjny do usługi Angular.

Oto usługa kątowa przed budową łyka.

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

zastępczy jest w ciąg tak, że jest to ważny JavaScript dla niektórych innych wtyczek haustem, które przetwarzają plik w pierwszej kolejności. Narzędzie gulpInsert pozwala mi wstawić taką konfigurację.

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

To działa, ale wydaje się nieco hacky. Nie wspominając już o tym, że musi buforować cały dołączony plik tylko po to, abym mógł wykonać operację. Czy istnieje bardziej elegancki sposób na osiągnięcie tego samego? Korzystnie taki, który pozwala na płynne płynięcie strumienia bez buforowania całego pakietu na końcu? Dzięki!

Answer 1

Czy sprawdziłeś gulp-replace-task?

Coś

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

Answer 2

Oczywiście jest to trochę hacky, ale może trochę lepiej ... Używam envify i gulp-env w projekcie React. Możesz zrobić coś takiego.

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

fabryczne:

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