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

【问题标题】：gulp-html-replace not working as expected with streamgulp-html-replace 无法按预期使用流
【发布时间】：2016-10-31 03:03:00
【问题描述】：

我正在尝试使用 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>'
}

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

谢谢，

巴特

【问题讨论】：

标签： html css node.js gulp gulp-html-replace

【解决方案1】：

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

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

这很好用，但我很乐意接受一个更惯用的 gulp 答案，而不是上面的，这感觉有点像 hack。

【讨论】：