Leading slash added to filenames under gulp 4

[dmellstrom]

Calling this package with gulp 4 erroneously results in template filenames with leading separators.

This seems to be due to the breaking change in vinyl, where internal path records such as file.base are now normalized: gulpjs/vinyl@9ae7cd1#diff-c49ce3c4dfcfa830e06789881dd4d5d4
That change breaks the following code:
url = path.join(root, file.path.replace(base || file.base, ''));

It is the root cause of #153

I posted a workaround in the other issue, but I'll see if I can cook something up that's compatible with all vinyl versions instead

[dmellstrom]

To add some confusion, the tests for this package use vinyl 2. As a result, they have been written to accommodate the regression. I really don't think they should expect URLs with leading slashes for the template filenames, as that doesn't match the behavior observed when running this plugin with gulp 3.

[simonua]

Reopening due to breaking change with Gulp 3 after fixing this for Gulp 4 in 2.2.4. The code has since been reverted and 2.2.5 was published to reestablish status quo prior to this fix.

[adamreisnz]

This is a problem, it's breaking all our builds now >.<
Fixed by using 2.2.4

[simonua]

@adamreisnz, but works when you continue to use transformUrl, correct?

[adamreisnz]

Yes that's right. We had 2 repositories actually with a similar build process, and one of them didn't have the transformUrl logic, hence the failure. Took us 2 hours to figure out what's happening 😢

Once we put the transformUrl in place it was working again.

[simonua]

Ugh! I'm sorry for the wasted time.

[adamreisnz]

No worries, these things happen 👍

[Towerism]

This is exactly what I'm dealing with right now. I'm upgrading dependencies of a legacy project, and upgrading gulp3->gulp4 mysteriously broke the site.

[andzejsw]

Same happened to me. Fixed by using 2.2.4 (i had v2.2.6).

[j-fulbright]

I see that 3.0.0 still is exhibiting this issue.. So I'm assuming that till whenever, that going back to 2.2.4 is still recommended?

[simonua]

Can you use the transformUrl approach with 3.0.0? I haven't dug into this much lately, admittedly, and I don't know that I am going to have the time for this, but if anyone were to put up a PR for a community review, that'd be a good step.

[roman-rr]

Hope it helps (gulp v4)

gulpfile.js

var replace = require('gulp-replace');
...
...
...
gulp.task('templatecache', function(done) {
  gulp.src(./www/js/**/**/*.html)
    .pipe(templateCache())
    .pipe(replace('put(\'/', 'put(\''))
    .pipe(gulp.dest('./www/js'))
    .on('end', done);
});

[sblandin2018]

I incurred in this problem today migrating from gulp 3.9.1 to gulp 4.0.2

The transformUrl approach works with 3.0.0 but for some reason I don't understand the url passed to transformUrl function does not contain slashes but backslashes.

ie instead of:

/session/auto-planning/AutoPlanning.html

you get:

\session\auto-planning\AutoPlanning.html

To make transformUrl approach remove the leading slash you need to write:

transformUrl: function (url) {
    return url.replace(/^\\/, '');
}

Can you use the transformUrl approach with 3.0.0? I haven't dug into this much lately, admittedly, and I don't know that I am going to have the time for this, but if anyone were to put up a PR for a community review, that'd be a good step.

[binarykitchen]

Ugh, this bug did cost me hours and was a pain until I found the above temporary solution. But really, this should be fixed eh?

[AshokKumarSharma]

@binarykitchen what was solution you take to remove the slash.
required output
$templateCache.put("directives/sy-dob-selector-directive.html","html");
but getting
$templateCache.put("/directives/sy-dob-selector-directive.html","html");

i just need to remove the slash .
i was migrating the gulp 3 to 4 version

[AshokKumarSharma]

@roman-rr that solution doesn't work

[opolo]

Thx, transformUrl fix worked just fine for our legacy solution I just upgraded to Gulp v4.

[jhlee8804]

@sblandin2018 Not working on osx.

use this:

transformUrl: function (url) {
    return url.replace(/^\//, '');
}