Gulp -useref - relative output paths in folders of different levels

Question

Is there currently a way to make relative exit paths? Within gulp-useref anyway?

My current situation:

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

In index.html from app/ everything works fine:

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

The index.html file is located next to the scripts folder so that the relative path synchronizes correctly.

But here is about/index.html :

If I go along the following path - ../scripts/about.min.js - the generated about.min.js displays one folder too far back, resulting in the following situation:

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

If about/index.html looks for it in <script src="../scripts/about.min.js"></script> .

If I do not pass the relative path to about/index.html :

about.min.js ends in the right place, but then the path is wrong 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 on different folder levels. I also thought about how to somehow change the path after everything went based on how far it is in the base folder, but I'm not quite sure where to start if this is a viable choice. I just don’t know if I am missing something more obvious.

Since this is intended to be a tool in the tool that I am assembling, doing it manually each time is not realistic.

Here is a snippet of my gulpfile.js related to this. I have a nunjucks template that runs before this happens, so why does it work 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 the tool!

Answer 1

Why not use absolute paths?

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

Then you will need to move your index files to the right places using other gulp tasks, which may depend on the above task.

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

Answer 2

I had a similar problem. I would try to customize your search path. Initially, the mine looked like this:

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

changing it to this, he fixed it:

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

Answer 3

I also ran into a similar problem and found a solution. It may help others.

My structure was like

 Project_root app scripts index.html bower_component 

And in the index.html file, he referenced the next one, which was automatically generated by the application

 <!-- 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 gulpfile I configured searchPath and got weird behavior in the output file

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

Finally, the app.js and lib.js file created using the following code

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