gulp-useref – relative output paths in different level folders

Question

Is there currently a way to do relative output paths? Within gulp-useref or otherwise?

My current situation:

project_folder/
  app/ 
    index.html
    about/
      index.html
  scripts/
    index.js
    about.js

In the index.html based out of app/, everything works fine:

<!-- build:js scripts/main.min.js -->
<script src="/scripts/main.js"></script>
<!-- endbuild -->

The index.html file sits next to the scripts folder so the relative path syncs up properly.

But here's the about/index.html:

If I pass in the path like this – ../scripts/about.min.js – the generated about.min.js gets output one folder too far back, resulting in this situation:

project_folder/
  scripts/
    about.min.js
  dist/
    index.html
    about/
      index.html
    scripts/
      index.min.js

With the about/index.html looking for it in <script src="../scripts/about.min.js"></script>.

If I don't pass in the relative path in about/index.html:

about.min.js ends up in the proper location, but then the path is incorrect in about/index.html – set to <script src="scripts/about.min.js"></script>.

Suggestions? I could have a different version of the useref task running at different folder levels. I've also considered figuring out some way to alter the path after everything runs through based on how far away it is from the base folder, but I'm not quite sure where to start if that's a viable choice. I just don't know if I'm missing something more obvious.

Because this is meant to be a feature in a tool I'm putting together, doing it manually each time isn't really viable.

Here's the snippet from my gulpfile.js that's relevant to this. I have a nunjucks template that runs before this happens, so that's why it works from .tmp:

gulp.task('html', ['templates'], function() {
  var assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});

  return gulp.src('.tmp/**/*.html')
    .pipe(assets)
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.csso()))
    .pipe($.rev())
    .pipe(assets.restore())
    .pipe($.useref())
    .pipe($.revReplace())
    .pipe($.gzip({append: false}))
    .pipe(gulp.dest('dist'))
    .pipe($.size({title: 'html'}));
});

Any help would be appreciated! Thanks for tool!

Answer 1

I had a similar issue. I would try adjusting your search path. Mine originally looked like this:

  var assets = $.useref.assets({searchPath: './'});

changing it to this fixed it:

  var assets = $.useref.assets({searchPath: ''});