Login/Register
Why does gulp-useref does not seem to work with a comment in the replacement section?
Asked Answered
javascriptgulpgulp-useref
G

4

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.

Gnarled answered 29/4, 2015 at 13:28 Comment(1)
The version of gulp-useref is different! – Universalize
F
1

The reason is version change check documentation https://www.npmjs.com/package/gulp-useref here you have an example:

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

hope it helps

Flo answered 4/8, 2017 at 15:37 Comment(0)
B
0

Comments are stripped out but there are exceptions. IE conditional comments are preserved so you could make a request there or write a pull request and see if it gets accepted. Here is the repo:

https://github.com/digisfera/useref

Boson answered 23/10, 2015 at 20:54 Comment(0)
E
0

You can try node-useref instead of gulp-useref which preserve IE Conditional Comments

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

Result will be

<!--[if lt IE 9]>
<script src="scripts/combined.js"></script>
<![endif]-->

Or try to put your comment out of your building code like this:

<!--COMMENT-->
<!-- build:css styles/app.css-->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endbuild -->
Equinoctial answered 28/7, 2016 at 2:26 Comment(0)
M
0

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 use-ref.

Could you use some other tag instead of a comment to do the same job? You could, for example, use a tag with a data- attribute set that contains the value that you are currently storing in the comment text.

Mandelbaum answered 5/12, 2016 at 15:47 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.