Почему gulp -useref не работает с комментарием в разделе замены?

Я пытаюсь построить конвейер 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 неповрежденным?

Спасибо.

Ответы

Ответ 1

Причина заключается в проверке проверки версий. https://www.npmjs.com/package/gulp-useref здесь у вас есть пример:

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

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

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

надеюсь, что это поможет

Ответ 2

Комментарии удаляются, но есть исключения. Условные комментарии IE сохранены, поэтому вы можете сделать запрос там или написать запрос на перенос и посмотреть, будет ли он принят. Вот репо:

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, который вводит некоторые другие ссылки, прежде чем я буду использовать-ref.

Не могли бы вы использовать какой-то другой тег вместо комментария для выполнения той же работы? Например, вы можете использовать тег с набором атрибутов data-, который содержит значение, которое вы в настоящее время сохраняете в тексте комментария.