All geek questions in one place

Migration to Grunt / Bower from ASP.NET MVC?

With ASP.NET 5, I am moving from the ASP.NET MVC binding system to the Bower / Grunt workflow for managing client packages and binding / minimization. I am trying to figure out how to closely replicate MVC binding functionality.

With the MVC suite, I manually created all my packages and then turned to a helper method, for example: @Styles.Render("~/bundles/styles/site") . In development, I get a separate link element for each CSS file in the kit, and during production I get one combined and smaller CSS file.

I successfully installed Grunt with Bower to pull the packages and copy them to the appropriate final destination, but there is no differentiation between development and production. What is the closest functionality to my existing MVC binding workflow?

+6
source share
4 answers

This article explains a very good way to share both (Bower and .NET Bundle Config) ...

http://robertnoack.com/x86/2014/07/asp-net-mvc-using-bowergruntwiredep-to-inject-javascript-dependencies-into-bundleconfig-cs/

Key information is to use the Grunt Task (wiredep) for the target BundleConfig.cs file so that you can use bower to manage your dependencies and still use BundleConfig to let .NET minimize your stuff for you.

+1
source

After a day of pain, I have a grunt, basically in the same manner as with asp.net minification with debugging and release builds.

I put together a git repository so you can just pull all the necessary files and mod as needed.

https://github.com/glaidler/grunt-equivalent-asp.net-minification

+1
source

I'm a pretty big fan of how Yeomen handles assets in an angular generator. It uses wiredep to automatically include Bower packages in your index.html. Usemin is used to group the files you want in packages, and Filerev updates the location of the assets and adds a cache breaker. Here is an example of some Grunt options that 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)"/] ] } } },

Corresponding npm packages grunt-wiredep , grunt-filerev and grunt-usemin

You will need to add the grunt build process after MSBuild, which takes the files in your bin folder and runs these tasks on them.

0
source

Source: https://habr.com/ru/post/983870/

More articles:


All Articles