为什么gulp-useref在replace部分似乎不能使用注释？

我正在尝试构build一个gulppipe道 – 我想在我的index.html （这个工作正常）中注入一些CSS，然后从源index.html获取所有其他的链接，并将其replace为输出的版本。

我注意到， 如果要replace的模板部分包含HTML注释 ，请参阅useref调用来修改输出（有关注释 ，请参阅下面的示例）。 用代码演示最简单：

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注释放弃了标签的尾部，所以它后面的所有内容都认为它是一个注释。

我想在replace部分中添加注释的原因是，注释实际上是一个吞咽注入语句，在我使用useref之前注入其他一些参考。 我把它简化成了一个简单的HTML注释，导致了这个问题。

这是导致问题的行： .pipe($.useref())

仅供参考我遵循John Papa关于Pluralsight的课程 ，他使用这种确切的机制来注入一些CSS，然后replace它们 – （ inject:css HTML注释分隔符在useref之后被破坏）： 

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

我怎样才能得到的useref()用正确的链接replace模板， 但保持HTML评论完好？

谢谢。

原因是版本更改检查文档https://www.npmjs.com/package/gulp-useref在这里你有一个例子：; 

  gulp.task（'optimize'，['templateCache'，'images']，function（）{

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

    返回吞咽
    的.src（config.index）
     .pipe（$。pipe道工（））
     .pipe（$。inject（gulp.src（templateCache，{read：false}，{starttag：''}）））
     .pipe（$。useref（{searchPath：'./'}））
     .pipe（gulp.dest（config.build））;
 }）;

希望能帮助到你

评论被删除，但也有例外。 IE的条件注释被保留，所以你可以在那里发出一个请求，或者写一个请求，看它是否被接受。 这里是回购：

https://github.com/digisfera/useref

您可以尝试node-useref而不是保留IE条件注释的gulp-useref 

 <!-- 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]-->

或者试着把你的评论放在你的build筑物代码中，如下所示： 

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

我想在replace部分中添加注释的原因是，注释实际上是一个吞咽注入语句，在我使用ref之前注入了一些其他的引用。

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

Interesting Posts