gulp-html-replace not working as expected with stream

Question

I'm trying to use gulp-html-replace to make a replacement using the content of a stream. The documentation makes it clear that this is possible (https://www.npmjs.com/package/gulp-html-replace) but, for me, it's not working.

Here's one of the offending gulp tasks:

function processMarkup(sourceViewFilename, gameScriptFilename) {
    return gulp.src('build/temp/views/' + sourceViewFilename)
        .pipe(htmlReplace({
            css: {
                src: '/styles/arcadelyCommonGameStyles.min.css',
                tpl: '<link rel="preload" href="%s" as="style" onload="this.rel=\'stylesheet\'" />'
            },
            commonjs: {
                src: '/scripts/arcadely-common.min.js',
                tpl: '<script type="text/javascript" src="%s"></script>'
            },
            js: {
                src: '/scripts/' + gameScriptFilename,
                tpl: '<script type="text/javascript" src="%s"></script>'
            },
            //  THE FOLLOWING DOESN'T WORK...
            baseInlineStyles: {
                src: gulp.src('./build/temp/styles/baseInlineStyles.css'),
                tpl: '<style type="text/css">%s</style>'
            }
        }))
        .pipe(gulpif(
                options.buildTarget === 'production' || options.buildTarget === 'test',
                htmlMin({collapseWhitespace: true})))
        .pipe(gulp.dest('build/' + options.buildTarget + '/views/'));
}

...

gulp.task(
    'process-starcastle-markup',
    ['clean', 'compile-views', 'compile-pages', 'process-inline-styles'],
    function () {
        return processMarkup('starcastle.html', 'starcastle.min.js');
    });

The problem is that in the markup this:

<!-- build:baseInlineStyles-->
<!-- endbuild-->

gets replaced with this:

<style type="text/css">[object Object]</style>

Obviously what I'd like it to be replaced with is inline CSS in the head of my documents.

The one obvious difference between what I've done, versus the example in the documentation is:

Docs: src: gulp.src(...).pipe(sass()),

Mine: src: gulp.src(...),

I.e., I'm not piping the stream anywhere else because no further processing is required: I've already run sass across all my CSS, and minified if needs be depending on the target environment, by the time this task runs.

It seems to me like I should be doing something like gulp.src(...).pipe(somethingElse()) to get the result I want, but I'm not sure what the somethingElse() should be because I just want the raw content of the stream. This is bound to be something incredibly simple but I'm still enough of a n00b with this stuff to be missing it methinks.

Does anyone have any suggestions, please?

EDIT

Worth pointing out that I've tried using gulp-util's (https://github.com/gulpjs/gulp-util) noop, as follows:

var gutil = require('gulp-util');

...

baseInlineStyles: {
    src: gulp.src('./build/temp/styles/baseInlineStyles.css').pipe(gutil.noop()),
    tpl: '<style type="text/css">%s</style>'
}

with the same result - I just end up with [object Object] rather than CSS in my processed view.

Thanks,

Bart

Answer 1

OK, so I'm probably going to hell for this, but there's a fairly simple synchronous solution:

baseInlineStyles: {
    src: fs.readFileSync(
        'build/temp/styles/baseInlineStyles.css',
        {encoding: 'utf8'}),
    tpl: '<style type="text/css">%s</style>'
}

This works perfectly but I'm more than happy to accept a more idiomatic gulp answer, as opposed to the above, which feels like a bit of a hack.