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

文章目錄

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

雖然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" }

返回目錄

使用npm管理JavaScript包

在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壓縮和構建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(".")); });