Gulp - 将一个文件的内容添加到多个文件的末尾
Gulp - add contents of one file to end of multiple files
我是 Gulp 的新手,希望这是一个简单的问题。我的项目包含许多文件(比下面示例中显示的更多),Gulp 的魔力让我可以组合、缩小、babel 等。一切都很好——我已经使用 G运行t 多年了所以我了解基本概念,但是这个项目需要 Gulp for ((reasons)),所以我来了。
该项目产生了几个输出脚本。每一个基本上都是用不同的配置选项编译的同一个核心应用程序。配置很大,因此不适合在实例化时传入。不管怎样,一切都很好,只是一些背景。
我遇到的问题是该项目依赖于一个供应商脚本。我不想 运行 该脚本通过所有处理,而是我需要在应用程序代码库上进行所有处理后(最好)将其添加到每个输出脚本中。
这是我尝试做的,但失败了。我也尝试了注释掉的东西(没有系列中的额外任务)但是文件不会输出到 dist 直到整个例程完成(这是有道理的,但你知道......永远充满希望)。注意:我 'anonymized' 脚本有点,所以希望我没有放入任何奇怪的语法错误......我的构建脚本 运行 很好,我只是不知道如何获得供应商脚本没有为每个实例添加一堆丑陋的硬编码任务(有几个实例,所以我不想那样做)。
提前致谢!
function instance1(cb) {
return gulp.src([
'src/app/data/data_en-us.js',
'src/app/data/data_pt-br.js',
'src/app/data/data.js',
'src/app/instances/_global/global_config.js',
'src/app/instances/_global/report_config.js',
'src/app/instances/1/config.js',
'src/app/instances/1/report_config.js',
'src/app/core/calculator.js',
'src/app/core/report.js',
'src/app/instances/_global/global.js',
'src/app/instances/1/instance.js',
])
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(concat('app.js'))
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('dist'))
.pipe(minify({preserveComments:'some'}))
.pipe(gulp.dest('dist'))
//.pipe(src(['src/vendor/script.js','dist/app.js']))
//.pipe(concat('dist/app.js'))
//.pipe(src(['src/vendor/script.js','dist/app-min.js']))
//.pipe(concat('dist/app-min.js'))
//.pipe(gulp.dest('dist'));
cb();
}
function appendVendorScript(cb) {
return gulp.src(['src/vendor/script.js','dist/*.js'])
.pipe(concat())
.pipe(gulp.dest('dist'));
cb();
}
exports.build = series(
cleanup,
parallel(
series(instance1,appendVendorScript)
//more items here for each instance
)
);
我找到了一个解决方案,它还可以让我最大限度地减少冗余。原来我们的 sourcemap 插件负责,所以我只是删除了它。与其他一些同事交谈后,我了解到他们对该插件也有疑问。我想它只是做得不好,或者旧了,或者维护得不好。这就是开源生活:)
这是我想出的。效果很好,但是当我 运行 构建一次完成所有这些时,它以某种方式破坏了代码。当我一次构建它们时完美地工作......到目前为止,还不能解释那个,但是一次一个问题!
const coreFilesList = [
//list of codebase files here
];
const vendorFilesList = [
//list of vendor files here
];
const outputFileData = {
prefix: 'app',
seperator: '_',
ext: '.js'
}
function instance1(cb) {
const token = 'instance1';
process(coreFilesList,token);
cb();
}
function instance2(cb) {
const token = 'instance2';
process(coreFilesList,token);
cb();
}
function process(srclist,token){
let outputFileName = outputFileData.prefix + outputFileData.seperator + token + outputFileData.ext;
for (let i = 0; i < srclist.length; i++){
if(srclist[i].match(/_TOKEN_/)){
srclist[i] = srclist[i].replace(/_TOKEN_/g,token);
}
}
return src(srclist)
.pipe(concat(outputFileName))
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(src(vendorFilesList))
.pipe(concat(outputFileName))
.pipe(minify({preserveComments:'some'}))
.pipe(dest('dist'));
}
exports.instance1 = series(cleanup, instance1);
exports.instance2 = series(cleanup, instance2);
//more here
exports.build = series(
cleanup,
parallel(
instance1,
instance2
//more here
)
);
我是 Gulp 的新手,希望这是一个简单的问题。我的项目包含许多文件(比下面示例中显示的更多),Gulp 的魔力让我可以组合、缩小、babel 等。一切都很好——我已经使用 G运行t 多年了所以我了解基本概念,但是这个项目需要 Gulp for ((reasons)),所以我来了。
该项目产生了几个输出脚本。每一个基本上都是用不同的配置选项编译的同一个核心应用程序。配置很大,因此不适合在实例化时传入。不管怎样,一切都很好,只是一些背景。
我遇到的问题是该项目依赖于一个供应商脚本。我不想 运行 该脚本通过所有处理,而是我需要在应用程序代码库上进行所有处理后(最好)将其添加到每个输出脚本中。
这是我尝试做的,但失败了。我也尝试了注释掉的东西(没有系列中的额外任务)但是文件不会输出到 dist 直到整个例程完成(这是有道理的,但你知道......永远充满希望)。注意:我 'anonymized' 脚本有点,所以希望我没有放入任何奇怪的语法错误......我的构建脚本 运行 很好,我只是不知道如何获得供应商脚本没有为每个实例添加一堆丑陋的硬编码任务(有几个实例,所以我不想那样做)。
提前致谢!
function instance1(cb) {
return gulp.src([
'src/app/data/data_en-us.js',
'src/app/data/data_pt-br.js',
'src/app/data/data.js',
'src/app/instances/_global/global_config.js',
'src/app/instances/_global/report_config.js',
'src/app/instances/1/config.js',
'src/app/instances/1/report_config.js',
'src/app/core/calculator.js',
'src/app/core/report.js',
'src/app/instances/_global/global.js',
'src/app/instances/1/instance.js',
])
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(concat('app.js'))
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('dist'))
.pipe(minify({preserveComments:'some'}))
.pipe(gulp.dest('dist'))
//.pipe(src(['src/vendor/script.js','dist/app.js']))
//.pipe(concat('dist/app.js'))
//.pipe(src(['src/vendor/script.js','dist/app-min.js']))
//.pipe(concat('dist/app-min.js'))
//.pipe(gulp.dest('dist'));
cb();
}
function appendVendorScript(cb) {
return gulp.src(['src/vendor/script.js','dist/*.js'])
.pipe(concat())
.pipe(gulp.dest('dist'));
cb();
}
exports.build = series(
cleanup,
parallel(
series(instance1,appendVendorScript)
//more items here for each instance
)
);
我找到了一个解决方案,它还可以让我最大限度地减少冗余。原来我们的 sourcemap 插件负责,所以我只是删除了它。与其他一些同事交谈后,我了解到他们对该插件也有疑问。我想它只是做得不好,或者旧了,或者维护得不好。这就是开源生活:)
这是我想出的。效果很好,但是当我 运行 构建一次完成所有这些时,它以某种方式破坏了代码。当我一次构建它们时完美地工作......到目前为止,还不能解释那个,但是一次一个问题!
const coreFilesList = [
//list of codebase files here
];
const vendorFilesList = [
//list of vendor files here
];
const outputFileData = {
prefix: 'app',
seperator: '_',
ext: '.js'
}
function instance1(cb) {
const token = 'instance1';
process(coreFilesList,token);
cb();
}
function instance2(cb) {
const token = 'instance2';
process(coreFilesList,token);
cb();
}
function process(srclist,token){
let outputFileName = outputFileData.prefix + outputFileData.seperator + token + outputFileData.ext;
for (let i = 0; i < srclist.length; i++){
if(srclist[i].match(/_TOKEN_/)){
srclist[i] = srclist[i].replace(/_TOKEN_/g,token);
}
}
return src(srclist)
.pipe(concat(outputFileName))
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(src(vendorFilesList))
.pipe(concat(outputFileName))
.pipe(minify({preserveComments:'some'}))
.pipe(dest('dist'));
}
exports.instance1 = series(cleanup, instance1);
exports.instance2 = series(cleanup, instance2);
//more here
exports.build = series(
cleanup,
parallel(
instance1,
instance2
//more here
)
);