ASP.NET Core 静态文件及JS包管理器（npm, Bower）的使用
在 ASP.NET Core 中添加靜態(tài)文件
雖然ASP.NET主要大都做著后端的事情，但前端的一些靜態(tài)文件也是很重要的。在ASP.NET Core中要啟用靜態(tài)文件，需要Microsoft.AspNetCore.StaticFiles組件?？梢酝ㄟ^Nuget添加，或者在project.json配置文件中添加：
然后在Startup類中的Configre方法里調用UseStaticFiles擴展方法來實現(xiàn)：
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory){loggerFactory.AddConsole(); app.UseStaticFiles();//使用靜態(tài)文件//省略其他代碼}雖然現(xiàn)在很多人在開發(fā).NET CORE時使用VS Code，但我還是不值得放棄VS這么強大的工具。
我們使用空的ASP.NET Core模板創(chuàng)建一個項目進行測試：
并添加上面說的Microsoft.AspNetCore.StaticFiles組件，然后在wwwroot文件夾中添加文件Hello.html，內容如下：
<html><head><meta charset="utf-8" /><title>StaticDemo</title></head><body><h1>Hello From Static Files.</h1></body></html>運行后，瀏覽器地址欄輸入http://localhost:<port>/Hello.html，<port>更改為自己的端口號。
官方說可以通過添加hosting.json配置來更改默認的wwwroot路徑，但我更改后運行并沒有效果。若有朋友知道怎么更改，還請告知！
我添加了hosting.json并添加如下配置后，該文件夾圖標會改變，但運行后無法讀取到靜態(tài)文件，還是通過wwwroot路徑讀取。
{"webroot": "statics"}返回目錄
使用npm管理JavaScript包
在ASP.NET 5或之前使用JavaScript一般是使用NuGet來管理，在VS2015中添加了其他包管理工具，包括Node Package Manager (npm)和Bower。
要使用這些包管理工具，需要先添加配置文件，添加時保留默認名稱：
因為安裝了Web Essentials擴展，右下角顯示了npm的logo。
添加配置文件后，在devDependencies節(jié)點增加需要使用的JS庫的名稱，在VS中還支持提示和自動完成：
版本號支持^和~前綴。
若沒有前綴，只從服務器檢索與提供的版本號一致的版本。
^前綴，將檢索與提供版本號主版本號一致的最新的版本。
~前綴，將檢索與提供版本號次版本號一致的最新的版本。
在配置文件添加了所需JS庫后，會自動將JS庫下載到node_modules文件夾（在VS項目中可能需要開啟顯示所有文件才能看到）。
但下載下來的文件其實很多我們都用不到，這時可以使用gulp創(chuàng)建任務，將我們需要的文件轉移到web root文件夾。而node_modules文件夾就可以在版本控制，以及部署時忽略。
使用gulp壓縮和構建JS
gulp是基于node.js構建的，所以我們需要在npm的配置package.json中添加對其的引用，其中包括幾個常用插件。
{"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": "2.4.2"}}然后添加gulp的配置文件gulpfile.js（請查看前面添加nmp配置文件的圖）。創(chuàng)建幾個任務：
;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 () { ? ?
//復制npm包到web root中gulp.src(paths.node_modules_libs).pipe(gulp.dest(paths.webroot + 'lib'))});gulp.task("clean:js", function (cb) { ? //清理壓縮后的js文件rimraf(paths.concatJsDest, cb);});
gulp.task("min:js", function () { ?//將需要的js壓縮并合并成一個文件以減少http請求數(shù)gulp.src([paths.js, "!" + paths.minJs, paths.lib], { base: "." }).pipe(concat(paths.concatJsDest)).pipe(uglify()).pipe(gulp.dest("."));});
其中l(wèi)ib任務將node_modules中需要的文件復制到webroot的lib文件夾，另兩個任務分別用于清除文件和壓縮文件。
在VS2015中，可以通過“任務運行程序資源管理器”（右鍵gulp配置文件，或通過視圖-其他窗口-任務運行程序資源管理器）進行任務管理，也可以將任務綁定到相應事件以自動運行。
其中清除會在清理項目時運行。
運行后目錄結構：
壓縮合并后，前端頁面只需引用一個site.min.js就可以了。
gulp就不多說了，這里推薦個中文學習網站：Gulp 中文網。
返回目錄
使用Bower管理JavaScript包
因為npm是node.js的包管理工具，而node.js主要用于構建服務端程序。所以，其實客戶端的包管理工具我們有更好的選擇：Bower。
使用時可以添加Bower配置文件，或右鍵項目選擇“管理Bower程序包”。Bower在VS中使用方法和Nuget很像。
JS包默認安裝到webroot的lib文件夾，可以通過.bowerrc文件更改安裝路徑。
相關文章:
依賴注入的威力，.NET Core的魅力：解決MVC視圖中的中文被html編碼的問題
.NET Core 1.0.1 發(fā)布了
在.NET Core程序中設置全局異常處理
IBM? Bluemix 上運行ASP.NET Core
ASP.NET Core開發(fā)-Docker部署運行
Asp.net Core 使用MyCat分布式數(shù)據庫，實現(xiàn)讀寫分離
.Net Core 中的包、元包與框架（Packages, Metapackages and Frameworks）
.NET Core系列 ： 1、.NET Core 環(huán)境搭建和命令行CLI入門
.NET Core系列 ： 2 、project.json 這葫蘆里賣的什么藥
.NET Core系列 ：3 、使用多個項目
.NET Core系列 ：4 測試
.NET Core 系列5 ：使用 Nuget打包類庫
Asp.net Core基于MVC框架實現(xiàn)PostgreSQL操作
用Swashbuckle給ASP.NET Core的項目自動生成Swagger的API幫助文檔
原文地址：http://www.cnblogs.com/hjklin/p/5883855.html
.NET社區(qū)新聞，深度好文，微信中搜索dotNET跨平臺或掃描二維碼關注
總結
以上是生活随笔為你收集整理的ASP.NET Core 静态文件及JS包管理器（npm, Bower）的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Cactus在jexus上安装
- 下一篇： 免费开源的 .NET 分布式组件库 Ex