技术控

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

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

[复制链接]
我们只是孩子 发表于 2016-10-3 16:26:42
72 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-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.
  [code][
  {
    "outputFileName": "wwwroot/app/bundle.js",
    "inputFiles": [
      "wwwroot/lib/jquery/dist/jquery.js",
      "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
      "wwwroot/lib/jquery-validation/dist/jquery.validate.js",
      "wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"
    ]
  }
]
[/code]  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:
  [code][
  {
    "outputFileName": "wwwroot/app/bundle.js",
    "inputFiles": [
      "wwwroot/lib/jquery/dist/jquery.js",
      "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
      "wwwroot/lib/jquery-validation/dist/jquery.validate.js",
      "wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"
    ],
    "minify": {
      "enabled": true
    }
  }
]
[/code]  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-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 :
  [code]"tools": {
  "BundlerMinifier.Core": "2.0.238",
  "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final",
  "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"
}
[/code]  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.
  [code][
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  },
  {
    "outputFileName": "wwwroot/js/semantic.validation.min.js",
    "inputFiles": [
      "wwwroot/js/semantic.validation.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  }
]
[/code]  Creating / Updating Bundles:

  After your bundles have been configured, you can bundle and minify your existing files using below commands :
  [code]dotnetbundle
[/code]  Available Commands:

  [code]dotnetbundle - Executesthebundlecommandusingthebundleconfig.jsonfileto bundleand minifyyourspecifiedfiles.
dotnetbundleclean - Clearsalloftheexistingoutputfilesfromdisk.
dotnetbundlewatch - Creates a watchersthatwillautomaticallyrundotnetbundlewheneveranexistinginputfilefromthebundleconfig.jsonconfigurationto bundleyourfiles.
dotnetbundlehelp - Displaysallavailablehelpoptionsand instructionsfor usingthecommand-lineinterface.
[/code]  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 :
  [code]"scripts": {
  "precompile": [
    "dotnet bundle"
  ]
}
[/code]  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 中的新东西
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

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

返回顶部 返回列表