How to easily add a front-end library in ASP. NET 5, asp.net front-end

How to easily add a front-end library in ASP. NET 5, asp.net front-end

(This article is also published in my public account "dotNET daily excellent article". Welcome to the QR code on the right to follow it .)

Question: ASP. NET 5 and the previous ASP. NET versions are quite different. One of them is that Nuget is no longer used for front-end library management, but is managed by relying on Bower, a common practice in the industry. So how can I easily add a front-end library? Today I will share my experiences with you.

You need to use Bower to add the front-end Library (taking the MetroUI installation introduced in the previous article as an example) and open the bower under the project. json file. In "dependencies", add a line of Description: "metro": "3.0.5 ". When entering the package name, VS will prompt through SMART awareness, including the version number selection. The final code is as follows:

{  "name": "ASP.NET",  "private": true,  "dependencies": {    "bootstrap": "3.3.4",    "jquery": "1.10.2",    "jquery-validation": "1.11.1",    "jquery-validation-unobtrusive": "3.2.2",    "hammer.js": "2.0.4",    "bootstrap-touch-carousel": "0.8.0",    "metro": "3.0.5"  }}

After this line is added, save the bower. json file and VS will automatically restore the MetroUI package. Expand the "Bower" node under the "dependencies" node in the project, and you will see the "metro (3.0.5)" node. Depending on the network conditions and package size, you may need to wait until the "not installed" text after the node disappears, it indicates that the package has been restored successfully. If there is a problem with automatic recovery, you can also click this node and select "Update Package" from the right-click menu ".

The installed package is downloaded to the corresponding folder in the "bower_components" folder in the project folder. You also need to copy the package release file to the lib directory through the task executor such as Gulp or Grunt (the lib directory is based on the habit of VS, you can also choose another directory ). Because the default Project template of VS uses Gulp, open the gulpfile. js file and find the task "copy. In "bower", add the copy description. Because the publishing file of MetroUI is put under "build" and "fonts" under the two folders, writing the copy description requires some skills to process the copy of Multiple folders. The Code is as follows:

var bower = {    "bootstrap": "bootstrap/dist/**/*.{js,map,css,ttf,svg,woff,eot}",    "bootstrap-touch-carousel": "bootstrap-touch-carousel/dist/**/*.{js,css}",    "hammer.js": "hammer.js/hammer*.{js,map}",    "jquery": "jquery/jquery*.{js,map}",    "jquery-validation": "jquery-validation/jquery.validate.js",    "jquery-validation-unobtrusive": "jquery-validation-unobtrusive/jquery.validate.unobtrusive.js",    "metro": "metro/build/**/*.{js,map,css}",    "metro/fonts": "metro/fonts/*.{ttf,svg,woff,eot}"  }

After completing the Gulp task code, you also need to execute the copy task to copy the metro release file to a specific folder under wwwroot (lib in this example ). You can execute a Gulp Task manually in "Task Runner Explorer", or compile a solution or project for automatic execution.

Finally, after the front-end library is installed, it is referenced in HTML or view files. I will not repeat the specific method.

It should be said that VS 2015 and ASP. NET 5's front-end development model not only maintains the common practices currently popular in the industry, but also gives full play to the powerful IDE functions of Visual Studio, making it easy to add front-end libraries.