Gulp-header plus merge-stream results in a glitch? - gulp

Question

Here’s some puzzling behavior.
I want to create a gulp task that will 1) build js-files into one file using gulp-requirejs-optimize and place it into the build directory, 2) copy a couple of config js-files into relevant subfolders of the build directory, and 3) add a header to these files.
Here’s how I am attempting to do this:
In a banner.js file, I create a header using gulp-header:
var header = require('gulp-header');
var bannerTemplate = [
'/**',
' * Hello ${name}',
' */'
].join('\n');
var banner = header(bannerTemplate, {name: 'world'});
module.exports = banner;
Then, in the file that is building javascript, I do the following:
var gulp = require('gulp');
var merge = require('merge-stream');
var requirejsOptimize = require('gulp-requirejs-optimize');
var banner = require('./banner.js');
gulp.task('js:build:test', function() {
// this is the entry point for our javascript files;
// will produce a single main.js file
var jsEntry = path.join(global.paths.jsDirectory, 'main.js');
var options = {
baseUrl: global.paths.jsDirectory,
mainConfigFile: path.join(global.paths.jsDirectory,
'libs/customized/requirejs/require.config.js'),
preserveLicenseComments: false
};
var jsOutput = path.join(global.paths.buildDirectory, 'js');
// I am also copying the require.js library and its customization; don't ask why
var jsForCopy = [
path.join(global.paths.jsDirectory, 'libs/vendors/requirejs/require.js'),
path.join(global.paths.jsDirectory, 'libs/customized/requirejs/**/*.js')
];
var requirejsOptimized = gulp.src(jsEntry)
.pipe(requirejsOptimize(options))
.pipe(banner)
.pipe(gulp.dest(jsOutput));
var copiedJS = gulp.src(jsForCopy, {base: global.paths.root})
.pipe(banner) // having this line will cause a glitch
.pipe(gulp.dest(global.paths.buildDirectory));
return merge(requirejsOptimized, copiedJS);
});
So here is where it is getting interesting. If I pipe through my banner only the stream that is building the main.js file (var requirejsOptimized in my code sample), then everything is fine — I get a build folder with correct files and correct structure:
if, however, I also pipe through the banner the stream that is copying other js files (var copiedJS in my code sample), then the structure of my build directory gets all jumbled up:
(notice the duplication of main.js and the absence of the libs folder with its subfolders)
So my question is, am I doing something obviously wrong with my gulp task here? Is it an expected result or is it a glitch of some kind?

Answer 1

I wouldn't reuse the banner stream in both pipelines. Both pipelines are writing to and reading from the same stream. That is why the output is weird.
Instead, use a new banner stream for each pipeline:
Change banner.js so it exports a function that creates a new banner stream
module.exports = function createBannerStream() {
return header(bannerTemplate, {name: 'world'});
};
In your main file invoke the function when you need a banner stream
var requirejsOptimized = gulp.src(jsEntry)
.pipe(requirejsOptimize(options))
.pipe(banner()) // <-- note the function call here
.pipe(gulp.dest(jsOutput));
var copiedJS = gulp.src(jsForCopy, {base: global.paths.root})
.pipe(banner()) // <-- note the function call here
.pipe(gulp.dest(global.paths.buildDirectory));