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.

Rory O'Kane
  • 29,210
  • 11
  • 96
  • 131
Rodney
  • 5,417
  • 7
  • 54
  • 98

4 Answers4

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

Pedro Lescano
  • 86
  • 4
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

jonkemp
  • 86
  • 2
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 -->
Vince
  • 461
  • 4
  • 8
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.

Adam
  • 1,932
  • 2
  • 32
  • 57