Windows Enviroment: useref not injecting the files that are in "bower_components"
Opened this issue · 6 comments
Explanation:
When gulp-inject adds the references from the bower components folder, it creates them with this path:
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="../../bower_components/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="../../bower_components/toastr/toastr.css" />
<!-- endbower -->
<!-- endbuild -->
After running the optimize task, the _vendor.css_ and _vendor.js_ where not created in the build folder. The issue was that gulp-useref couldn't locate correctly the bower_components folder because was looking in a different path:
C:\Users\eliashdezr\bower_components\jquery\dist\jquery.js
C:\Users\eliashdezr\bower_components\angular\angular.js
Instead of this
C:\Users\eliashdezr\Desktop\pluralsight-gulp\bower_components\jquery\dist\jquery.js
C:\Users\eliashdezr\Desktop\pluralsight-gulp\bower_components\angular\angular.js
Solution/Workaround
I just added another pipe in the inject task using gulp-replace
gulp.task('inject', ['wiredep', 'styles', 'template-cache'], function () {
log('Wire up the bower css and js references into the index.html');
return gulp
.src(config.index)
.pipe($.inject(gulp.src(config.css)))
.pipe($.replace(/="..\/..\/bower_components\//g, '="/bower_components/'))
.pipe(gulp.dest(config.client));
});
This works for me, thank you very much.
this worked for me as well on linux(ubuntu), thanks
Awesome, thanks for this
Awesome !!! thank you very much
I was trying to figure out why the useref look two folders before like if we would used something like this:
../../
weird....
just downloaded the zip folder...it has no bower_components directory in the root..
@Dcolonel6 try and install with bower type bower install in your command line or terminal