ASP.NET Core's wwwroot is included in path by wiredep and gulp-inject..how can I exclude it?

Question

We have a *.sln that includes an ASP.NET Core RC2 *.csproj for client html only (ASP.NET Controllers are in another *.csproj).

This gives the following folder/file structure:

• SolutionRoot/

  • ClientProjectRoot/ <- project root, npm root folder
    • wwwroot_dev/ <- location of src dev files,
    • wwwroot/ <- where gulp concats, minimifies, optimises, and root of static pages
      • bower_packages/
    • node_modules/
    • package.json
    • bower.json
    • .bowerrc <- where 'directory' is set to 'wwwroot/bower_packages/'
    • gulpfile.js

• Requirements I'd like to meet are:

  • The csproj is only client artifacts, with no asp.net C# code, so that we can give the whole project to external devs with UI expertise, and slot it back into the solution when done.
  • The wwwroot/index.html file should be accessible as http://example.com/index.html -- not http//example.com/wwwroot.html
  • CSS and JS should be minified, and in wwwroot, and html picked up from there (ie wwwroot_dev is there just for editing purposes but never served from directly).
  • No idea where bower packages should be -- part of this question.

The gulpfile has tasks defined, which correctly minify the css and scripts found in wwwroot_dev into app.min.js and app.min.css within wwwroot.

It's the html files, passed through gulp-inject and wiredep that get their relative pathing wrong. They both include wwwroot in the output.

My files so far are:

 .bowerrc:
 {
 "directory":"wwwroot/bower_components"
 }

And in gulpfile.js, the html task looks as follows:

 gulp.task('dist:html',['dist:scripts'],function(){
   //get the dest js and css that previous tasks have already minifieded:
   var sources = gulp.src(
     ['wwwroot/scripts/**/*.js', 'wwwroot/scripts/**/*.css'],  
     {read:false}
   );

   return gulp
    .src("wwwroot/scripts/**/*.html", {})
    .pipe(plugins.inject(sources, {relative:true}))
    .pipe(plugins.wiredep(sources,{relative:true}))    
    .pipe(gulp.dest("wwwroot/");
 });

The output is (wrong) as it mentions wwwroot/, when it simply be ../js/ etc:

<!-- bower:js -->
<script src="../wwwroot/bower_components/jquery..."></script>
<!-- endbower -->

<!-- inject:js -->
<script src="/wwwroot/js/main.min.js"></script>
<!-- endinject -->

I serve from wwwroot:

gulp.task('serve',function(){
  return gulp
  .src('wwwroot')
    .pipe(plugins.webserver( 
          { directoryListing:false,open:"http://localhost:8000/"}))
}

I've tried lots of different inject and wiredep option flags (relative:true, ignorePath, cwd, -- but wwwroot is always mentioned. Can't get rid of it!)

So my question is... a) is my directory structure approximately right -- or totally flawed b) if basically right, what tweak can I do to get the paths generated by inject and wiredep to be relatively right?

Thank you!

Answer 1

Try this

gulp.task('render', function () {
var target = gulp.src('./Views/Shared/_Layout.cshtml');
var sources = gulp.src([path.wwwroot + "/**/*.js", path.wwwroot + "/**/*.css"], { read: false });

return target.pipe(inject(sources, {
    transform: function (filepath) {
        //Delete wwwroot
        for (var i = 0; i < arguments.length; i++) {
            if (typeof (arguments[i]) == 'string')
                arguments[i] = arguments[i].replace("/wwwroot", '');
        }

        return inject.transform.apply(inject.transform, arguments);
    }
}))
.pipe(gulp.dest('./Views/Shared'));

Answer 2

Had the same issue, solved it based on this solution: https://stackoverflow.com/a/34581414

gulp.task('inject', function () {
var target = gulp.src('src/_Layout.cshtml');

return target.pipe(inject(
    gulp.src(paths.wwwroot + 'css/**/*.css', { read: false }),
    {

        transform: function (filePath) {
            var newPath = filePath.replace('/wwwroot', '');

            return '<link rel="stylesheet" href="' + newPath + '"/>';
        }
    })
    )
    .pipe(gulp.dest('Views/Shared'));

});