为什么 gulp-useref 似乎不适用于替换部分的评论？答案

【问题标题】：Why does gulp-useref does not seem to work with a comment in the replacement section?为什么 gulp-useref 似乎不适用于替换部分的评论？
【发布时间】：2015-04-29 13:28:01
【问题描述】：

我正在尝试构建一个 gulp 管道 - 我想将一些 CSS 注入我的 index.html（这工作正常），然后从源代码 index.html 获取所有其他链接并在输出版本中替换它们。

我注意到useref 调用正在破坏输出如果要替换的模板化部分包含HTML 注释（请参阅下面的示例以获取COMMENT 行） .用代码演示最简单：

`index.html`（源文件）

<!-- build:css styles/app.css-->
<!--COMMENT-->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endbuild -->

`gulpfile.js`任务

gulp.task('optimizeReplace', function () {
    var assets = $.useref.assets({ searchPath: './' });

    return gulp
        .src('./src/client/index.html')
        .pipe(assets)
        .pipe(assets.restore())
        .pipe($.useref())  //THIS IS THE PROBLEM LINE; IF INJECT IS NOT RUN FIRST IT IS MANGLED
        .pipe(gulp.dest('./wwwroot/'));
});

输出 (`index.html`)

</style>
<link rel="stylesheet" href="styles/lib.css">
<link rel="stylesheet" href="styles/app.css-->" <!--COMMENT>
</head>

<body>
  <div>

这个问题在 HTML 中更容易看到，但是COMMENT HTML 注释丢失了它的标签的最后一半，所以后面的所有东西都认为它是一个注释。

我想在替换部分添加评论的原因是评论实际上是一个gulp-inject 语句，它在我执行useref 之前注入了一些其他引用。我将其简化为导致问题的简单 HTML 注释。

这是导致问题的行：.pipe($.useref())

仅供参考，我正在关注John Papa’s course on Pluralsight，他使用这种确切的机制来注入一些CSS，然后替换它们——（inject:css HTML 注释分隔符在useref 之后被破坏）：

<!-- build:css styles/app.css-->
<!-- inject:css -->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endinject -->
<!-- endbuild -->

我怎样才能让useref() 用正确的链接替换模板但保持 HTML 注释不变？

谢谢。

【问题讨论】：

gulp-useref的版本不同！

标签： javascript gulp gulp-useref

【解决方案1】：

原因是版本变更检查文档https://www.npmjs.com/package/gulp-useref 这里有一个例子：

gulp.task('optimize', ['templateCache', 'images'], function(){

    var templateCache = config.temp + config.templateCache.files;

    返回一口
    .src(config.index)
    .pipe($.plumber())
    .pipe($.inject(gulp.src(templateCache, {read: false}, {starttag: ''})))
    .pipe($.useref({ searchPath: './' }))
    .pipe(gulp.dest(config.build));
});

希望对你有帮助

【讨论】：

【解决方案2】：

评论被删除，但也有例外。 IE 条件 cmets 被保留，因此您可以在那里提出请求或编写拉取请求，看看它是否被接受。这是回购：

https://github.com/digisfera/useref

【讨论】：

【解决方案3】：

您可以尝试使用 node-useref 代替 gulp-useref 来保留 IE 条件注释

<!-- build:js scripts/combined.js   -->
<!--[if lt IE 9]>
<script type="text/javascript" src="scripts/this.js"></script>
<script type="text/javascript" src="scripts/that.js"></script>
<![endif]-->
<!-- endbuild -->

结果将是

<!--[if lt IE 9]>
<script src="scripts/combined.js"></script>
<![endif]-->

或者尝试将您的评论从您的构建代码中删除，如下所示：

<!--COMMENT-->
<!-- build:css styles/app.css-->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endbuild -->

【讨论】：

【解决方案4】：

我想在替换部分添加评论的原因是评论实际上是一个 gulp-inject 语句，它在我执行 use-ref 之前注入了一些其他引用。

你能用其他标签代替评论来做同样的工作吗？例如，您可以使用带有 data- 属性集的标签，该属性集包含您当前存储在评论文本中的值。

【讨论】：

index.html（源文件）

gulpfile.js任务

输出 (index.html)

`index.html`（源文件）

`gulpfile.js`任务

输出 (`index.html`)