useref not removing scripts in build blocks

[chrisUsick]

useref is identifying the assets correctly because the minified scripts are created. The problem is that useref isn't replacing the js or css with the minified files.

[jbblanchet]

I'm not sure I understand what you're saying. Are you talking about inline css and js? Could you provide an example of both your html file and your gulp task?

[chrisUsick]

gulpfile.babel.js

gulp.task('html', ['views', 'styles'], () => {
// gulp.task('html', ['styles'], () => {
  const assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});

  // return gulp.src('app/*.html')
  return gulp.src(['app/*.html', '.tmp/*.html'])
    .pipe(assets)
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.minifyCss({compatibility: '*'})))
    .pipe(assets.restore())
    .pipe($.useref())
    .pipe($.if('*.html', $.minifyHtml({comments:true, conditionals: true, loose: true})))
    .pipe(gulp.dest('dist'));
});

index.html

    <!-- build:css styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
    <!-- endbower -->
    <!-- endbuild -->

lower down in the body:

    <!-- build:js scripts/plugins.js -->
    <script src="/bower_components/bootstrap/js/affix.js"></script>    
    <script src="/bower_components/bootstrap/js/alert.js"></script>    
    <script src="/bower_components/bootstrap/js/dropdown.js"></script>    
    <script src="/bower_components/bootstrap/js/tooltip.js"></script>
    <div id="__bs_notify__" style="display: none; padding: 15px; font-family: sans-serif; position: fixed; font-size: 0.9em; z-index: 9999; right: 0px; top: 0px; border-bottom-left-radius: 5px; margin: 0px; color: white; text-align: center; background-color: rgb(27, 32, 50);"></div>    
    <script src="/bower_components/bootstrap/js/modal.js"></script>    
    <script src="/bower_components/bootstrap/js/transition.js"></script>    
    <script src="/bower_components/bootstrap/js/button.js"></script>    
    <script src="/bower_components/bootstrap/js/popover.js"></script>    
    <script src="/bower_components/bootstrap/js/carousel.js"></script>    
    <script src="/bower_components/bootstrap/js/scrollspy.js"></script>    
    <script src="/bower_components/bootstrap/js/collapse.js"></script>    
    <script src="/bower_components/bootstrap/js/tab.js"></script>
    <!-- endbuild -->
    <!-- build:js scripts/main.js -->
    <script src="scripts/main.js"></script>
    <!-- endbuild -->

useref is creating the styles/vendor.css, scripts/plugins.js, etc. but the final outputed HTML looks the exact same. That is, useref did not replace the scripts inside the build blocks with the single generated script.

[jbblanchet]

This is a pretty standard setup. Just to be sure (the div in the middle of the scripts made me think that was maybe it), I've tried to recreate your setup as best I could, and using all the source code you provided, (except for converting your gulpfile from babel to vanilla and removing the dependencies to 'views' and 'styles'), and it's working perfectly.

Could another gulp task be overwriting the dist/index.html file? Even if gulp-useref wasn't working, your dist file should at least be minified.

Try to simplify your workflow as much as possible to isolate the problem and let me know if I missed anything.

[chrisUsick]

So you are saying that the dist file didn't contain the script tags to all the bootstrap scripts? The dist file is minfied. Thanks for the advice.

[sam-git]

I had the same issue today and found a solution.

I had multiple similar HTML files being piped through useref and only one wasn't having its asset files replaced. In my case the html file that useref wan't replacing the js or css with the minified files had a mix of line ending chracters in the file. Most line endings were the standard Unix Format Linefeed (LF) however there was a block of code using the Carriage Return (CR) character.

The solution was to convert all the line endings to LF (Unix Format).

[chrisUsick]

Thanks this is my issue too. I have a gulp task that renders a jade template into .tmp/index.html. This file is always generated with windows line endings so it doesn't work. If I manually change the line endings of the file and don't regenerate it, useref works. This means I would need to make gulp-jade return files with LF line endings or use another gulp package to change it I suppose. Do you know of a package that might work for this (I did look)? Also I made sure the jade files have LF line endings.

[sam-git]

I just had a quick look and found https://www.npmjs.com/package/gulp-eol - looks like it might do what you want.

In my case, the offending file wasn't a generated one, so I was just able to install a package in my editor that converted all line endings to Unix.

On 9 August 2015 at 15:06, chrisUsick notifications@github.com wrote:

Thanks this is my issue too. I have a gulp task that renders a jade template into .tmp/index.html. This file is always generated with windows line endings so it doesn't work. If I manually change the line endings of the file and don't regenerate it, useref works. This means I would need to make gulp-jade return files with LF line endings or use another gulp package to change it I suppose. Do you know of a package that might work for this (I did look)? Also I made sure the jade files have LF line endings.

— Reply to this email directly or view it on GitHub https://github.com/jonkemp/gulp-useref/issues/124#issuecomment-129189935 .

[chrisUsick]

Okay thanks.

[jbblanchet]

Good find. See https://github.com/digisfera/useref/issues/45

[someyoungideas]

:+1:

[Bbahri]

I have the same issue. The solution was converting my files manualy to LF. A plugin I use (gulp-include) converted my files to another line ending format !

[DaniCastilho]

In my case, on MAC, the sollution was exactly inverse conversion. LF to CRFL.

[slikNET]

@Bbahri could you explain, please?