標籤：
NET Core 靜態檔案及JS包管理器（npm, Bower）的使用 文章目錄雖然ASP.NET主要大都做著後端的事情，但前端的一些靜態檔案也是很重要的。在ASP.NET Core中要啟用靜態檔案，需要Microsoft.AspNetCore.StaticFiles組件。可以通過Nuget添加，或者在project.json設定檔中添加：
然後在Startup類中的Configre方法裡調用UseStaticFiles擴充方法來實現：
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory){ loggerFactory.AddConsole(); app.UseStaticFiles();//使用靜態檔案 //省略其他代碼}雖然現在很多人在開發.NET CORE時使用VS Code，但我還是不值得放棄VS這麼強大的工具。
我們使用空的ASP.NET Core模板建立一個項目進行測試：
並添加上面說的Microsoft.AspNetCore.StaticFiles組件，然後在wwwroot檔案夾中添加檔案Hello.html，內容如下：
<!DOCTYPE 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並添加如下配置後，該檔案夾表徵圖會改變，但運行後無法讀取到靜態檔案，還是通過wwwroot路徑讀取。
{ "webroot": "statics"}在ASP.NET 5或之前使用JavaScript一般是使用NuGet來管理，在VS2015中添加了其他包管理工具，包括Node Package Manager (npm)和Bower。
要使用這些包管理工具，需要先添加設定檔，添加時保留預設名稱：
因為安裝了Web Essentials擴充，右下角顯示了npm的logo。
添加設定檔後，在devDependencies節點增加需要使用的JS庫的名稱，在VS中還支援提示和自動完成：
版本號碼支援^和~首碼。
^首碼，將檢索與提供版本號碼主要版本號一致的最新的版本。~首碼，將檢索與提供版本號碼次版本號碼一致的最新的版本。在設定檔添加了所需JS庫後，會自動將JS庫下載到node_modules檔案夾（在VS項目中可能需要開啟顯示所有檔案才能看到）。
但下載下來的檔案其實很多我們都用不到，這時可以使用gulp建立任務，將我們需要的檔案轉移到web root檔案夾。而node_modules檔案夾就可以在版本控制，以及部署時忽略。
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設定檔的圖）。建立幾個任務：
"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 () { //複製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請求數 gulp.src([paths.js, "!" + paths.minJs, paths.lib], { base: "." }).pipe(concat(paths.concatJsDest)) .pipe(uglify()) .pipe(gulp.dest("."));});其中lib任務將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 靜態檔案及JS包管理器（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
