it-swarm.com.ru

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

Я пытаюсь построить конвейер gulp - я хочу вставить немного CSS в мой index.html (это нормально работает), а затем получить все остальные ссылки из исходного кода index.html и заменить их в выходной версии.

Я заметил, что вызов useref искажает вывод if заменяемый шаблонный раздел включает в себя HTML комментарий (см. Пример ниже для строки COMMENT). Проще всего продемонстрировать с помощью кода:

index.html (исходный файл)

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

gulpfile.js task

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, но HTML-комментарий COMMENT теряет конечную половину своего тега, так что все после того, как он считает, что это комментарий.

Причина, по которой я хочу поместить комментарий в раздел замены, заключается в том, что комментарий на самом деле является оператором gulp-inject , который вставляет некоторые другие ссылки, прежде чем я сделаю useref. Я упростил это до простого комментария HTML, вызывающего проблему.

Эта строка вызывает проблему: .pipe($.useref())

К вашему сведению, я следую курс Джона Папы по Pluralsight где он использует этот точный механизм для вставки некоторого CSS, а затем заменяет их - (разделители комментариев HTML inject:css искажаются после переменной useref):

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

Как я могу заставить useref() заменить шаблон правильными ссылками но оставить HTML-комментарий без изменений? 

Благодарю.

36
Rodney

Причина в том, что документация для проверки изменения версии 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)); 
}); 

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

1
Pedro Lescano

Причина, по которой я хочу поместить комментарий в раздел замены, заключается в том, что комментарий на самом деле является оператором gulp-inject, который вставляет некоторые другие ссылки перед тем, как я использую ref-use.

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

0
Adam

Вы можете попробовать 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 -->
0
Vince

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

https://github.com/digisfera/useref

0
jonkemp