javascript - Gulp - add contents of one file to end of multiple files

Question

I'm fairly new to Gulp so, hopefully this is a simple question. My project comprises many files (more than shown in the example below), and the magic of Gulp lets me combine, minify, babel, etc. All good - I've used Grunt for years so I understand the basic concepts, but this project requires Gulp for ((reasons)), so here I am.

The project results in several output scripts. Each one is, basically, the same core application compiled with different configuration options. The config is substantial, so not appropriate to pass in at instantiation. Anyway, all good there, just some background.

The problem I'm having is the project is dependent on one vendor script. I don't want to run that script though all the processing, rather I need to prepend (preferably) or append it to each output script after all processing has happened on the app codebase.

Here's what I've tried to do, but it's failing. I also tried the commented out stuff (without the extra task in the series) but the files aren't output to dist until the entire routine is complete (which makes sense, but you know... ever hopeful). Note: I 'anonymized' the script a bit, so hopefully I didn't put any weird syntax errors in... my build script runs fine, I just can't figure out how to get the vendor script prepended without a bunch of ugly hardcoded tasks for each instance (there's several instances, so I'd rather not do it that way).

Thanks in advance!

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

question from:https://stackoverflow.com/questions/65946330/gulp-add-contents-of-one-file-to-end-of-multiple-files

Answer 1

I found a solution that also lets me minimize redundancy. Turns our, the sourcemap plugin was responsible, so I just removed it. Talking with some other colleagues, I learned that they too had issues with that plugin. I guess it's just poorly done, or old, or otherwise not well maintained. Such is life in open source :)

Here's what I came up with. Works well, but when I run build to do them all at once, it somehow breaks the code. Works perfectly when I build them one at a time... so far, haven't been able to explain that one, but one problem at a time!

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