jamesknelson / gulp-rev-replace

Rewrite occurences of filenames which have been renamed by gulp-rev
MIT License
389 stars 62 forks source link

HTML file in a subfolder gets different asset hash #43

Closed nring closed 8 years ago

nring commented 8 years ago

I'm wondering how to get gulp-rev-replace to replace file references with the same hash across multiple html files. Considering the following:

And the following html statements:

index.html:

    <!-- build:css styles/main.css -->
    <link rel="stylesheet" href="/bower_components/normalize-css/normalize.css">
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->

subfolder/index.html:

    <!-- build:css ../styles/main.css -->
    <link rel="stylesheet" href="/bower_components/normalize-css/normalize.css">
    <link rel="stylesheet" href="../styles/main.css">
    <!-- endbuild -->

And the following in my Gulpfile

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

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

index.html will get replaced with the correct styles and scripts reference, while subfolder/index.html will get an entirely new hash.

Am I setting up my Gulpfile incorrectly?

nring commented 8 years ago

Nevermind, this was more of an issue with gulp-useref than gulp-rev-replace. I ended up setting the style references in each HTML file to the root of the app directory and supplying 3 directories to search:

<!-- build:css({.tmp,app,.}) /styles/main.css -->
<link rel="stylesheet" href="/bower_components/normalize-css/normalize.css">
<link rel="stylesheet" href="/styles/main.css">
<!-- endbuild -->

Which matches the three directories supplied to gulp-useref

const assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});