Home > Developer > Web Develop
While ASP. NET mostly does the back end of things, but the front-end of some static files is also very important. Components are required to enable static files in ASP Microsoft.AspNetCore.StaticFiles . Can be added through NuGet, or in a project.json configuration file:
The extension method is then called in the method in the Startup class Configre UseStaticFiles to implement:
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory){ loggerFactory.AddConsole(); app.UseStaticFiles();//使用静态文件 //省略其他代码}
While many people now use vs Code to develop. NET core, I'm still not worth giving up on the powerful tools of vs.
We use an empty ASP. NET core template to create a project to test:
and add the above mentioned Microsoft.AspNetCore.StaticFiles components, and then wwwroot add the files in the folder Hello.html , the contents are as follows:
<! DOCTYPEHtml><Html><Head><Meta charset= "utf-8" /> <title> Staticdemo</title></head><body> <h1>hello from Static Files. </h1></body></HTML> After running, the browser address bar http://localhost:<port>/Hello.html is entered and <port> changed to its own port number.
Officials say you can hosting.json change the default path by adding wwwroot a configuration, but I don't have an effect when I change it. If a friend knows how to change it, please let us know!
When I add hosting.json and add the following configuration, the folder icon changes, but it cannot be read to a static file or read through a path after it is run wwwroot .
Back to directory using NPM to manage JavaScript packages{ "webroot": "statics"}
The use of JavaScript is typically managed by using NuGet on ASP. NET 5 or earlier, and additional package management tools, including and, are added to VS2015 Node Package Manager (npm) Bower .
To use these package management tools, you need to add the configuration file and leave the default name when you add it:
Because the Web Essentials extension is installed, the lower-right corner shows the NPM logo.
After adding the configuration file, add the name of the devDependencies JS Library to be used in the node, and also support prompt and AutoComplete in vs:
The version number is supported ^ and ~ prefixed.
^Prefix that will retrieve the latest version that matches the major version number that provides the version number.~Prefix that will retrieve the latest version consistent with the version number that is provided.After the configuration file has added the desired JS library, the JS Library will be downloaded to the node_modules folder automatically (you may need to turn on Show All Files in the VS Project to see).
But the downloaded files are actually a lot of things we can't use, then we can use Gulp to create a task and transfer the files we need to the web root folder. node_modulesfolders can be ignored during version control, as well as during deployment.
Gulp is built based on node. js , so we need to add a reference to it in the NPM configuration package.json , which includes several common plugins.
{"Name:"MyProject","Version:"1.0.0","Devdependencies " { "gulp" : "3.9.0" "gulp-concat" "2.6.0" "gulp-cssmin" "0.1.7" "gulp-uglify" : "1.2.0" "rimraf" : < Span class= "hljs-string" > "2.4.2" }} Then add the configuration file for the Gulp gulpfile.js (see the diagram with the NMP configuration file previously added). Create several tasks:
"Use Strict";Var Gulp=Require"Gulp"), Rimraf=Require"Rimraf")Concat=Require"Gulp-concat"), Cssmin=Require"Gulp-cssmin"), uglify=Require"Gulp-uglify")var paths={Webroot:"./wwwroot/"};Paths.Node_modules_libs= [' Node_modules/jquery/dist/jquery.js ',' Node_modules/bootstrap/dist/js/bootstrap.js ',]Paths.Lib=Paths.Webroot+' Lib/*.js ';Paths.Js=Paths.Webroot+"Js/**/*.js";Paths.Minjs=Paths.Webroot+"Js/**/*.min.js";Paths.Concatjsdest=Paths.Webroot+"Js/site.min.js";Gulp.Task' Lib ',function(){Copy NPM package to Web rootGulp.SrcPaths.Node_modules_libs).PipeGulp.DestPaths.Webroot+' Lib '))});Gulp.Task"Clean:js",function(cb{Clean up the compressed JS fileRimraf (Paths.Concatjsdest, CB);});Gulp.Task"Min:js",function(){Reduce the number of HTTP requests by compressing and merging the required JS into a single filegulp. src ([paths. Js "!" + paths. Minjspaths. Lib]{base: ". " pipe (concat (paths. Concatjsdest)). pipe (uglify ()). Pipe (gulp. Dest ( ")) ) Where the lib task node_modules copies the files needed in the webroot lib folder, and the other two tasks are used to purge the files and compress the files respectively.
In VS2015, you can manage tasks from the task Runner Explorer (right-gulp configuration file, or through the view-Other Windows-Tasks run Program Explorer ), or you can bind the task to the appropriate event to run automatically.
Where cleanup runs when the project is cleaned up .
Post-run directory structure:
Once the compression is merged, the front-end page simply refers site.min.js to one.
Gulp not much to say, here is recommended a Chinese learning website: Gulp Chinese web.
Return to directory using Bower to manage JavaScript packagesBecause NPM is a node. js Package management Tool, node. JS is primarily used to build server-side programs. So, in fact, the client package management tool we have a better choice:Bower.
You can add the Bower profile when you use it, or right-click the project to select Manage Bower package. Bower uses the same approach to NuGet as it does in vs.
JS package is installed to webroot the lib folder by default, you can .bowerrc change the installation path through the file.
NET Core static files and the use of JS Package Manager (NPM, Bower)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
