Windows Enviroment: useref not injecting the files that are in "bower_components"

[eliashdezr]

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