gulp-html-替换流无法按预期工作

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(...),

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

在我看来我应该做类似 gulp.src(...).pipe(somethingElse()) 的事情来获得我想要的结果，但我不确定 somethingElse() 应该是什么，因为我只想要原始内容的流。这肯定是一件非常简单的事情，但我仍然对这些东西有足够的了解，所以我认为它会丢失。

请问大家有什么建议吗？

编辑

值得指出的是，我已经尝试使用 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>'
}

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

谢谢，

巴特

Answer 1

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

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

这很完美，但我很乐意接受更惯用的 gulp 答案，而不是上面的，感觉有点像破解。

gulp-html-替换流无法按预期工作

gulp-html-replace not working as expected with stream

html

css

node.js

gulp

gulp-html-replace