HTML 注入后 Gulp Useref 的奇怪行为答案

【问题标题】：Strange behavior of Gulp Useref after HTML injectionHTML 注入后 Gulp Useref 的奇怪行为
【发布时间】：2022-09-29 22:02:15
【问题描述】：

在src/ 目录中放置一个主页（index.html），如下所示：

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>Document</title>
    <!-- build:css styles/index.css -->
    <link rel=\"stylesheet\" href=\"styles/index.css\">
    <!-- endbuild -->
</head>
<body></body>
</html>

还有一个 CSS 文件（index.css 在styles/ 目录中），例如：

body {
    background-color: red;
}

我配置了一个 Gulp 任务，将 CSS 文件与 HTML 文件链接起来：

const gulp = require(\'gulp\'),
    injStr = require(\'gulp-inject-string\'),
    useref = require(\'gulp-useref\');

gulp.task(\'default\', () => {
    const tab = \'    \',
        nl = \'\\n\',
        nlTab = nl + tab;
    return gulp.src(\'src/index.html\')
        //.pipe(injStr.before(\'</head>\', tab + \'<!-- build:css styles/index.css -->\' + nlTab + \'<link rel=\"stylesheet\" href=\"styles/index.css\">\' + nlTab + \'<!-- endbuild -->\' + nl))
        .pipe(useref())
        .pipe(gulp.dest(\'.tmp/\'));
});

如果执行 Gulp，所有 cmets 内容都会转换为<link rel=\"stylesheet\" href=\"styles/index.css\">。好的，这很正常。

好吧，当我想简化它避免在 HTML 中手动编写 cmets 时，就会出现问题。取消注释 JS 源代码（第 10 行），删除 HTML 中的 cmets（8-10）并再次执行。 Gulp Userref 什么都不做！转换不起作用。为什么！？

Gulp HTML Replace 转换正常但不创建相应的文件。

标签： gulp gulp-useref

【解决方案1】：

我发现了解决方案！：

缺少回车符。使用'\r\n' 而不是孤独的'\n'。

【讨论】：