请选择 进入手机版 | 继续访问电脑版

技术控

    今日:35| 主题:54646
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Bundling and Minification in ASP.net Core

[复制链接]
我们只是孩子 发表于 2016-10-3 16:26:42
97 0

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
In this article, we will learn:

  
       
  • What is Bundling and Minification in ASP.net Core?   
  • Bundler and Minifier Extension   
  • How to Bundle your files   
  • How to minify your Bundles   
  • How to automate Bundling and Minification for your project   
  • Dotnet bundle command : BundlerMinifier.Core  
  What is Bundling and Minification in ASP.net Core?

  Bundling is a technique to combine multiple files into a single file. Minification is a technique to perform a variety of different code optimizations to scripts and CSS.Bundling and Minification is used to enhance/improve performance of your web application.
  Bundler and Minifier Extension:

   Visual studio provides an extension, that allows you to easily select and bundle the files you need without writing a line of code.You can install the extension from here .
   

Bundling and Minification in ASP.net Core

Bundling and Minification in ASP.net Core-1-技术控-

  – After installing the extension, you can select all of the specific files that you want to include within a bundle and use the Bundle and Minify Files option from the extension.
  – You can name your bundle and save it at your prefered location.
  – bundleconfig.json file will be created within your project.
  – The order in which the files are selected will determine the order that they appear in within the bundle.
  1. [
  2.   {
  3.     "outputFileName": "wwwroot/app/bundle.js",
  4.     "inputFiles": [
  5.       "wwwroot/lib/jquery/dist/jquery.js",
  6.       "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
  7.       "wwwroot/lib/jquery-validation/dist/jquery.validate.js",
  8.       "wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"
  9.     ]
  10.   }
  11. ]
复制代码
Minifying your Bundles:

  After Bundling your files, you can minify your files by adding a minify block to your existing bundle. Let’s look at an example:
  1. [
  2.   {
  3.     "outputFileName": "wwwroot/app/bundle.js",
  4.     "inputFiles": [
  5.       "wwwroot/lib/jquery/dist/jquery.js",
  6.       "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
  7.       "wwwroot/lib/jquery-validation/dist/jquery.validate.js",
  8.       "wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"
  9.     ],
  10.     "minify": {
  11.       "enabled": true
  12.     }
  13.   }
  14. ]
复制代码
Automate Bundling & Minification for your project:

  Rather doing it manually, you can automate the process.To automate the process, you can schedule a task to run whenever your application is built to ensure that your bundles reflect any changes within your application.
  – Open the Task Runner Explorer (via Tools > Task Runner Explorer).
  – Right-click on the Update All Files option below bundleconfig.json.
  – Select your preferred binding from the Bindings context menu.
   

Bundling and Minification in ASP.net Core

Bundling and Minification in ASP.net Core-2-技术控-

  The Dotnet Bundle Command: BundlerMinifier.Core

  Microsoft introduced a new Bundling and Minification tool, BundlerMinifier.Core,that can be easily integrated into existing ASP.NET Core applications and doesn’t require any external extensions or script files.
  How to use BundlerMinifier.Core Tool:

  You need to add a reference to BundlerMinifier.Core within the tools section of your existing project.json file as seen below :
  1. "tools": {
  2.   "BundlerMinifier.Core": "2.0.238",
  3.   "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final",
  4.   "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"
  5. }
复制代码
Configuring Your Bundles:

  After adding the tool, you need to add a bundleconfig.json file in your project that will be used to configure the files that you wish to include within your bundles.
  1. [
  2.   {
  3.     "outputFileName": "wwwroot/css/site.min.css",
  4.     "inputFiles": [
  5.       "wwwroot/css/site.css"
  6.     ]
  7.   },
  8.   {
  9.     "outputFileName": "wwwroot/js/site.min.js",
  10.     "inputFiles": [
  11.       "wwwroot/js/site.js"
  12.     ],
  13.     "minify": {
  14.       "enabled": true,
  15.       "renameLocals": true
  16.     },
  17.     "sourceMap": false
  18.   },
  19.   {
  20.     "outputFileName": "wwwroot/js/semantic.validation.min.js",
  21.     "inputFiles": [
  22.       "wwwroot/js/semantic.validation.js"
  23.     ],
  24.     "minify": {
  25.       "enabled": true,
  26.       "renameLocals": true
  27.     }
  28.   }
  29. ]
复制代码
Creating / Updating Bundles:

  After your bundles have been configured, you can bundle and minify your existing files using below commands :
  1. dotnetbundle
复制代码
Available Commands:

  1. dotnetbundle - Executesthebundlecommandusingthebundleconfig.jsonfileto bundleand minifyyourspecifiedfiles.
  2. dotnetbundleclean - Clearsalloftheexistingoutputfilesfromdisk.
  3. dotnetbundlewatch - Creates a watchersthatwillautomaticallyrundotnetbundlewheneveranexistinginputfilefromthebundleconfig.jsonconfigurationto bundleyourfiles.
  4. dotnetbundlehelp - Displaysallavailablehelpoptionsand instructionsfor usingthecommand-lineinterface.
复制代码
Automated Bundling:

  The Bundling and Minification process can be automated as part of the build process by adding the dotnet bundle command in the precompile section of your existing project.json file :
  1. "scripts": {
  2.   "precompile": [
  3.     "dotnet bundle"
  4.   ]
  5. }
复制代码
Summary:

  In this article, we have discussed:
  
       
  • What is Bundling and Minification in ASP.net Core?   
  • Bundler and Minifier Extension   
  • How to Bundle your files   
  • How to minify your Bundles   
  • How to automate Bundling and Minification for your project   
  • Dotnet bundle command : BundlerMinifier.Core  
  Thanks for visiting !!
   © 2016,CsharpStar. All rights reserved.



上一篇:谈谈 DSL 以及 DSL 的应用(以 CocoaPods 为例)
下一篇:CSS Selectors Level 4 中的新东西
*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表