ASP.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("."));});
其中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
檔案更改安裝路徑。
相關文章:
原文地址:http://www.cnblogs.com/hjklin/p/5883855.html
.NET社群新聞,深度好文,微信中搜索dotNET跨平臺或掃描二維碼關注