35

I am trying to build a gulp pipeline – I want to inject some CSS into my index.html (this works fine) and then grab all the other links from source index.html and replace them in the outputted version.

I noticed that the useref call is mangling the output if the templated section to replace includes an HTML comment (see example below for the line COMMENT). It’s easiest to demonstrate with code:

index.html (source file)

<!-- 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/'));
});

Output (index.html)

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

<body>
  <div>

The problem is easier to see in HTML, but the COMMENT HTML comment looses the end half of its tag, so everything after it thinks it is a comment.

The reason I want to put a comment inside the replacement section is that the comment is actually a gulp-inject statement which injects some other references before I do the useref. I simplified it down to a simple HTML comment causing the problem.

This is the line that causes the problem: .pipe($.useref())

FYI I am following John Papa’s course on Pluralsight where he uses this exact mechanism to inject some CSS and then replace them – (the inject:css HTML comment delimiters are mangled after a useref):

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

How can I get the useref() to replace the template with the correct links but leave the HTML comment intact?

Thanks.

4

4 回答 4

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));
});

希望能帮助到你

于 2017-08-04T15:37:12.920 回答
0

您可以尝试使用 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 -->
于 2016-07-28T02:26:32.553 回答
0

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

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

于 2016-12-05T15:47:02.427 回答
0

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

https://github.com/digisfera/useref

于 2015-10-23T20:54:50.087 回答