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

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