4

我正在尝试使用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 而不是 CSS。

谢谢，

巴特

4

1 回答 1

1

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

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

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

于 2016-06-28T17:43:37.823 回答