Я пытаюсь построить конвейер 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())
FYI Я следую курс Джона Папаса на Pluralsight, где он использует этот точный механизм для ввода некоторого CSS, а затем заменяет его - (inject:css
Разделители комментариев HTML искажаются после useref
):
<!-- build:css styles/app.css-->
<!-- inject:css -->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endinject -->
<!-- endbuild -->
Как я могу заставить useref()
заменить шаблон правильными ссылками, но оставить комментарий HTML неповрежденным?
Спасибо.