CODEWITHSUNDEEP
javascriptnode.jsgulp
rdmurphy
rdmurphy

Reputation: 105

gulp-useref – relative output paths in different level folders

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!

Upvotes: 8

Views: 7496

Answers (3)

Aftab
Aftab

Reputation: 41

I also faced similar kind of issue and find a solution. It may help others

My dir structure was like

Project_root
   app
      scripts
      index.html
   bower_component

And in the index.html file it was referencing like the following which was auto generated by inject

<!-- build:js js/lib.js -->
  <!-- bower:js -->
   <script src="../bower_components/jquery/dist/jquery.js"></script>
   <script src="../bower_components/angular/angular.js"></script>    
  <!-- endbower -->
<!-- endbuild -->

<!-- build:js js/app.js-->
  <!-- inject:js -->    
   <script src="/app/scripts/app.js"></script>
   <script src="/app/scripts/controllers/authentication.js"></script>
  <!-- endinject -->
<!-- endbuild -->

In the gulpfile I was setting up the searchPath and got some strange behavior in the output file

$.useref.assets({searchPath: ''});  >> it generated only lib.js file
$.useref.assets({searchPath: ['']}); >> it generated only app.js file

Finally both app.js and lib.js file generated with the following code 

$.useref.assets({searchPath: ['./bower_components','']});

Upvotes: 1

trees_are_great
trees_are_great

Reputation: 3911

Why not use absolute paths? 

<!-- build:js /scripts/main.min.js -->
<!-- build:js /scripts/about.min.js -->

You would then need to move your index files to the correct locations using other gulp tasks that could depend on the above task. 

gulp.task('full-build', ['partial-build'], function () {
      gulp.src('index.html', { base: './' })
        .pipe(gulp.dest(buildLocation));
});

Upvotes: 2

TechnoTim
TechnoTim

Reputation: 3205

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: ''});

Upvotes: 2

Related Questions