html - gulp-html-replace 无法按预期使用流

Question

我正在尝试使用 gulp-html-replace 使用流的内容进行替换。文档清楚地表明这是可能的 ( https://www.npmjs.com/package/gulp-html-replace )，但对我来说，它不起作用。

这是一个有问题的 gulp 任务:

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

问题是在标记中:

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

被替换为:

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

很明显，我希望将其替换为文档头部的内联 CSS。

我所做的与文档中的示例之间的一个明显区别是:

文档:src: gulp.src(...).pipe(sass()),

我的:src: gulp.src(...),

也就是说，我没有在其他任何地方传输流，因为不需要进一步处理:我已经在我所有的 CSS 上运行了 sass，并且如果需要的话根据目标环境进行了缩小，到此任务运行时。

在我看来我应该做一些像 gulp.src(...).pipe(somethingElse()) 这样的事情来获得我想要的结果，但我不确定是什么somethingElse() 应该是因为我只想要流的原始内容。这注定是一件非常简单的事情，但我仍然是一个拥有这些东西的 n00b，我认为我不会错过它。

请问大家有什么建议吗？

编辑

值得指出的是，我已经尝试使用 gulp-util 的 ( https://github.com/gulpjs/gulp-util ) noop，如下所示:

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

...

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

结果相同 - 我只是在处理后的 View 中得到 [object Object] 而不是 CSS。

谢谢，

巴特

Answer 1

好吧，所以我可能会为此下 hell ，但有一个相当简单的同步解决方案:

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

这非常有效，但我非常乐意接受更惯用的 gulp 答案，而不是上面的答案，这感觉有点像 hack。