How should I organize client-side assets in an ASP.NET 5 project before minification?

Other Questions JavaScript
1

I’m trying to figure out the best way to structure my ASP.NET 5 project for client-side assets. I want to keep my source files (JS, CSS, fonts, images) separate from the minified versions.

Here’s what I’m thinking:

MyProject/
  ├── src/
  │   ├── scripts/
  │   ├── styles/
  │   ├── images/
  │   └── fonts/
  ├── wwwroot/
  │   ├── js/
  │   ├── css/
  │   ├── img/
  │   └── fonts/
  └── gulpfile.js

Is this a good approach? Should I use wwwroot as my ‘dist’ folder for processed files? Or should both src and dist be inside wwwroot?

I’m planning to use Gulp for minification and file copying. Any advice on best practices for organizing client-side code in ASP.NET 5 would be super helpful!

2

Your proposed structure is solid and aligns well with ASP.NET 5 best practices. Keeping source files separate from the wwwroot folder is indeed recommended. This separation allows for better organization and ensures that only processed, production-ready assets are served.

For your Gulp setup, consider adding tasks for linting, concatenation, and sourcemap generation alongside minification. This can significantly improve your development workflow. Also, you might want to include a ‘watch’ task to automatically process files as you work.

One suggestion: consider adding a ‘vendor’ folder in both src and wwwroot for third-party libraries. This can help distinguish between your custom code and external dependencies.

Remember to configure your .gitignore file to exclude the processed files in wwwroot, keeping your repository clean.

3

hey amelial, ur structure looks pretty good! i’d keep src outside wwwroot like u have it. wwwroot is perfect for the processed files. makes it easy to serve only minified stuff. just make sure ur gulpfile is set up to output to wwwroot correctly. good luck with ur project!

4

I’ve been using a similar setup in my ASP.NET 5 projects, and it’s worked well for me. One thing I’d suggest is adding a ‘dist’ folder inside ‘src’ for intermediate build outputs. This helps when you need to debug minification issues.

Also, consider using Webpack instead of Gulp. It’s more powerful for module bundling and has better integration with modern JS frameworks. I switched recently and it’s been a game-changer for managing dependencies.

For images, I’ve found it useful to have subfolders in both src and wwwroot (like ‘icons’, ‘backgrounds’, etc.). Makes it easier to optimize specific types of images differently.

Don’t forget to set up browser caching for your static assets in wwwroot. It can significantly improve load times for returning visitors.

Lastly, if you’re using any CSS preprocessors like Sass, you might want to add a separate folder for those files in your src directory.