Ответ 1
Вы отметили gulp-replace-task
?
Что-то вроде
[...]
.pipe(gulpSourcemaps.init())
.pipe(replace({
patterns: [{
match: '{{{appConfigObj}}}',
replacement: config
}],
usePrefix: false
})
.pipe(gulpUglify())
[...]
Мне удалось выполнить мою задачу, используя плагин gulp под названием 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());
});
Что я делаю, так это чтение нашего файла конфигурации приложения, который управляется модулем config на npm. Получение нашего конфигурационного файла из кода на стороне сервера происходит с помощью var config = require('config');
, но мы одностраничное приложение и часто нуждаемся в доступе к настройкам конфигурации на стороне клиента. Для этого я помещаю объект конфигурации в службу Angular.
Здесь Angular служба до gulp построит.
angular.module('app')
.factory('appConfig', function () {
return '{{{appConfigObj}}}';
});
Заполнитель находится в строке, чтобы он был действительным JavaScript для некоторых других плагинов gulp, которые обрабатывают файл в первую очередь. Утилита gulpInsert
позволяет мне вставлять такую конфигурацию.
.pipe(gulpInsert.transform(function (contents) {
return contents.replace("'{{{appConfigObj}}}'", JSON.stringify(config));
}))
Это работает, но чувствует себя немного взломанным. Не говоря уже о том, что он должен буферизировать весь связанный файл, чтобы я мог выполнить операцию. Есть ли более элегантный способ сделать то же самое? Предпочтительно тот, который позволяет потоку беспрепятственно течь без буферизации всего пакета в конце? Спасибо!
Вы отметили gulp-replace-task
?
Что-то вроде
[...]
.pipe(gulpSourcemaps.init())
.pipe(replace({
patterns: [{
match: '{{{appConfigObj}}}',
replacement: config
}],
usePrefix: false
})
.pipe(gulpUglify())
[...]
По общему признанию, это тоже немного взломано, но, может быть, немного лучше... Я использую envify
и gulp-env
в проекте React. Вы могли бы сделать что-то вроде этого.
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`
});
factory:
angular.module('app')
.factory('appConfig', function () {
return process.env.APP_CONFIG;
});