为什么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