ASP.NET 5 MVC6 Custom CSS & Javascript placing convention

Question

So I'm playing around with MVC6, and I've added bower.json & grunt.json, I've created my grunt tasks for generating my jQuery & bootstrap.css and its all sitting in the wwwroot folder as i expected.

But what about things like my site.css & my main.js files, the files that I will add to for the project over time.

What convention are people using when choosing a directory for this stuff?

Are we to add a Content folder and drop it in?

Is there something I'm missing, that i should also be using Grunt / bower for?

Answer 1

I do have app and vendor folders outside wwwroot. In vendor, I customize libraries like bootstrap, themes. In app I have my own css, less and js files for the application. I also have an asset path inside app for anything that needs to be copied (folder font shown in the screenshot)

Then I use the opinionated really easy to use and way better than grunt or gulp tool: brunch.

With this simple config, I get sourcemaps, concat, jshint, and with --production also uglify, minify, csso. Adding anything else to the pipeline is simple as installing a brunch-plugin, so I recommend to also check http://brunch.io/ out.

Answer 2

Any static files (.css, .js) should be added directly into the wwwroot path (e.g. wwwroot/scripts, wwwroot/css). Anything that will be compiled into static files (.ts, .less) should be put into an Assets directory (or whatever name you like) in your project and output into the wwwroot path during compilation (generally configured through grunt compilation tasks).