Migrating to Grunt/Bower from ASP.NET MVC bundling? - asp.net-mvc

Question

With ASP.NET 5, I am moving from ASP.NET MVC's bundling system to a Bower/Grunt workflow for my client-side package management and bundling/minification. I'm trying to figure out how to closely replicate the MVC bundling functionality.
With MVC bundling, I manually created all of my bundles and then call out to a helper method such as: #Styles.Render("~/bundles/styles/site"). In development I get separate link element for each CSS file in the bundle and in production I get a single combined and minified CSS file.
I have successfully set up Grunt with Bower to pull down packages and copy them into the appropriate final destination, but there's no differentiation between development and production. What's the closest functionality to my existing MVC bundling workflow?

Answer 1

This article below explain a very nice way to have both (Bower and .NET Bundle Config) playing nicely together...
http://robertnoack.com/x86/2014/07/asp-net-mvc-using-bowergruntwiredep-to-inject-javascript-dependencies-into-bundleconfig-cs/
The key info, is to use a Grunt Task (wiredep) to target the BundleConfig.cs file so you could still use bower to manage your dependencies and still use BundleConfig to let .NET minify your stuff for you.

Answer 2

After a day of pain, I have got grunt basically behaving in the same manner as asp.net minification with debug & release builds.
I have put together a git repo so you can just pull all the relevant files and mod as required.
https://github.com/glaidler/grunt-equivalent-asp.net-minification

Answer 3

You can use the grunt contrib css min task to create a bundle of your css
Read this post : http://love2dev.com/#!article/Using-GruntJS-to-Bundle-and-Minify-JavaScript-and-CSS

Answer 4

I'm a pretty big fan of the way Yeoman handles assets in the angular generator. It uses wiredep to automatically include Bower packages in your index.html. Usemin is used to group files you want in bundles and Filerev updates the asset locations and adds a cache breaker. Here is the a sample of some of the Grunt settings I have.
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
exclude: ['bootstrap.css'],
fileTypes: {
html: {
replace: {
js: '<script src="/{{filePath}}"></script>',
css: '<link rel="stylesheet" href="/{{filePath}}" />'
}
}
},
ignorePath: /\.\.\//
}
},
// Renames files for browser caching purposes
filerev: {
dist: {
src: [
'<%= yeoman.dist %>/scripts/{,*/}*.js',
'<%= yeoman.dist %>/styles/{,*/}*.css',
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/styles/fonts/*'
]
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
},
// Performs rewrites based on filerev and the useminPrepare configuration
usemin: {
html: ['<%= yeoman.dist %>/**/*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'],
patterns: {
js: [
[/templateUrl:"(templates[/A-Za-z0-9]*\.html)"/]
]
}
}
},
The relevant npm packages are grunt-wiredep, grunt-filerev, and grunt-usemin
You will need to add a grunt build process after MSBuild that takes the files in your bin folder and runs these grunt tasks on them.