How to easily add a front end library in ASP. NET 5

(This article also published in my public number "dotnet daily Essence article", Welcome to the right QR code to pay attention to. )

Preface: There is a big difference between the ASP. NET 5 and the previous ASP, one of which is that the management of the front-end library is no longer using nuget, but rather is managed using the industry's common practice of relying on bower. So how to easily add the front-end library, today simply share my experience.

To add a front end library via Bower (as an example of the Metroui installation described earlier in this article), open the Bower.json file below the project, and in "dependencies", add a line description: "Metro": "3.0.5". When you enter a package name, VS is prompted by IntelliSense, including the selection of the version number. The final code is as follows:

{ "name" :  "ASP" ,  "Private" : true ,  "dependencies" : { " Bootstrap ": " 3.3.4 ", " jquery ": , " jquery-validation ": " 1.11.1 ", " Jquery-validation-unobtrusive ": " 3.2.2 ", " hammer.js ": span class= "str" > "2.0.4" ,  "Bootstrap-touch-carousel" :  "0.8.0" ,  "Metro" :  "3.0.5" }} 

After adding this line, save the Bower.json file, vs will automatically recover the Metroui package. Expand the Bower node under the Dependencies node in your project and you'll see the node for Metro (3.0.5). Depending on the network situation and the packet size, you may need to wait until the word "not installed" after the node disappears, indicating that the package recovery was successful. 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 appropriate folder in the Bower_components folder in the project folder. You also need to copy the package's release file into the Lib directory by a task executor such as Gulp or grunt (the Lib directory is based on the VS habit, you can also choose a different directory). Since the VS Default project template uses gulp, open the Gulpfile.js file and locate the "copy" task. In "Bower", add a copy description. Since Metroui's release files are placed under "build" and "fonts" under two folders, writing a copy description requires a bit of skill to handle copy of multiple folders. See the following code:

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/build/**/*". {JS,MAP,CSS} ", " metro/fonts ": " metro/fonts/*.{ Ttf,svg,woff,eot} "} 

After perfecting the Gulp task code, you also need to perform a copy task to copy the Metro publish file to the specific folder under Wwwroot (in this case, Lib). Performing gulp tasks can be performed manually in the task Runner Explorer, or you can compile the solution or project for automatic execution.

Finally, after the installation of the front-end library, it is referenced in the HTML or view file, I will not repeat the specific wording.

It should be said that the front-end development model of VS 2015 and ASP. 5 has kept the industry's popular routine and fully exploited the powerful IDE capabilities of Visual Studio, making it easy to add front-end libraries.

How to easily add a front end library in ASP. NET 5