title: gulp-useref – relative output paths in different level folders
body: <p>Is there currently a way to do relative <strong>output</strong> paths? Within <code>gulp-useref</code> or otherwise?</p>
  
  <p>My current situation:</p>
  
  <pre><code>project_folder/
    app/ 
      index.html
      about/
        index.html
    scripts/
      index.js
      about.js
  </code></pre>
  
  <p>In the <code>index.html</code> based out of <code>app/</code>, everything works fine:</p>
  
  <pre><code>&lt;!-- build:js scripts/main.min.js --&gt;
  &lt;script src="/scripts/main.js"&gt;&lt;/script&gt;
  &lt;!-- endbuild --&gt;
  </code></pre>
  
  <p>The <code>index.html</code> file sits next to the <code>scripts</code> folder so the relative path syncs up properly.</p>
  
  <p>But here's the <code>about/index.html</code>:
      
      
      </p>
  
  <p>If I pass in the path like this – <code>../scripts/about.min.js</code> – the generated <code>about.min.js</code> gets output one folder too far back, resulting in this situation:</p>
  
  <pre><code>project_folder/
    scripts/
      about.min.js
    dist/
      index.html
      about/
        index.html
      scripts/
        index.min.js
  </code></pre>
  
  <p>With the <code>about/index.html</code> looking for it in <code>&lt;script src="../scripts/about.min.js"&gt;&lt;/script&gt;</code>.</p>
  
  <p>If I don't pass in the relative path in <code>about/index.html</code>:
      
      
      </p>
  
  <p><code>about.min.js</code> ends up in the proper location, but then the path is incorrect in <code>about/index.html</code> – set to <code>&lt;script src="scripts/about.min.js"&gt;&lt;/script&gt;</code>.</p>
  
  <p>Suggestions? I could have a different version of the <code>useref</code> 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.</p>
  
  <p>Because this is meant to be a feature in a tool I'm putting together, doing it manually each time isn't really viable.</p>
  
  <p>Here's the snippet from my <code>gulpfile.js</code> that's relevant to this. I have a <code>nunjucks</code> template that runs before this happens, so that's why it works from <code>.tmp</code>:</p>
  
  <pre><code>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'}));
  });
  </code></pre>
  
  <p>Any help would be appreciated! Thanks for tool!</p>