ASP.NET Core 靜態文件及JS包管理器（npm, Bower）的使用

時間 2019-11-08

標籤 asp.net asp core 靜態文件管理器 npm bower 使用欄目 ASP 简体版

原文原文鏈接

在 ASP.NET Core 中添加靜態文件

雖然ASP.NET主要大都作着後端的事情，但前端的一些靜態文件也是很重要的。在ASP.NET Core中要啓用靜態文件，須要Microsoft.AspNetCore.StaticFiles組件。能夠經過Nuget添加，或者在project.json配置文件中添加：
javascript

而後在Startup類中的Configre方法裏調用UseStaticFiles擴展方法來實現：css

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    loggerFactory.AddConsole(); 
    app.UseStaticFiles();//使用靜態文件
    //省略其餘代碼
}

雖然如今不少人在開發.NET CORE時使用VS Code，但我仍是不值得放棄VS這麼強大的工具。
咱們使用空的ASP.NET Core模板建立一個項目進行測試：
html

並添加上面說的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>更改成本身的端口號。
java

官方說能夠經過添加hosting.json配置來更改默認的wwwroot路徑，但我更改後運行並無效果。如有朋友知道怎麼更改，還請告知！node

我添加了hosting.json並添加以下配置後，該文件夾圖標會改變，但運行後沒法讀取到靜態文件，仍是經過wwwroot路徑讀取。jquery

{
  "webroot": "statics"
}

使用npm管理JavaScript包

在ASP.NET 5或以前使用JavaScript通常是使用NuGet來管理，在VS2015中添加了其餘包管理工具，包括Node Package Manager (npm)和Bower。web

要使用這些包管理工具，須要先添加配置文件，添加時保留默認名稱：
npm

由於安裝了Web Essentials擴展，右下角顯示了npm的logo。 json

添加配置文件後，在devDependencies節點增長鬚要使用的JS庫的名稱，在VS中還支持提示和自動完成：

版本號支持^和~前綴。

若沒有前綴，只從服務器檢索與提供的版本號一致的版本。
^前綴，將檢索與提供版本號主版本號一致的最新的版本。
~前綴，將檢索與提供版本號次版本號一致的最新的版本。

在配置文件添加了所需JS庫後，會自動將JS庫下載到node_modules文件夾（在VS項目中可能須要開啓顯示全部文件才能看到）。

但下載下來的文件其實不少咱們都用不到，這時可使用gulp建立任務，將咱們須要的文件轉移到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配置文件的圖）。建立幾個任務：

"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文件更改安裝路徑。

相關標籤/搜索

文件管理

asp.net core

靜態