VS2015 ASP.NET5 Web項目結構淺析

前言

本文我的同步博客地址http://aehyok.com/Blog/Detail/76.html

在安裝好VS2015以後，一直想看看新版本的Web項目如何，上個周建了項目以後發現真是面目全非，微軟此次更新真是太兇了。因而我就有了想簡單的瞭解一下新建的項目結構的衝動，真是一發不可收啊，本身只是想研究個皮毛，這前先後後大概花掉了一週的時間(固然都是業餘的)才大體搞明白了一點吧。在此就進行記錄一下。首先來建立一個Web項目

一、打開VS2015新建ASP.NET Web應用程序

二、選擇ASP.NET 5 Starter Web

三、新建項目後能夠發現項目結構以下

能夠發現項目結構能夠分爲1到6六個部分。接下來我就來簡單的描述一下我對這6個部分的理解。

一、global.json　　

一、global.json 文件存放在「Solution Items」解決方案目錄下，打開 global.json文件發現，默認有這樣的配置：

下面咱們來驗證一下這個sources的做用。先來作一件事情，下載Asp.Net MVC源碼地址爲https://github.com/aspnet/Mvc。而後看一下下載後的文件

如今我將這些文件簡單的複製到E:\projects\Mvc。而後咱們回到global.json這個文件，將其中代碼簡單修改,修改後的內容以下

{
    ////"sources": [ "src", "test" ]
    "sources": ["E:\\projects\\Mvc\\src" ]
}

再來作兩個操做，右鍵解決方案，第一步先Clean Solution清除解決方案，第二步Build Solution編譯解決方案

成功以後來看一下解決方案下的文件發生了什麼變化

經過標記能夠發現，解決方案下居然加載了global.json中設置的路徑項目

若是你想把這些項目刪除掉，那麼你能夠先恢復global.json中的sources值，以及手動刪除解決方案下的項目，而後從新編譯便可。

二、Dependencies(Bower和NPM) 　　

Bower：bower是twitter開源的一款web包（如bootstrap、jquery）管理，依託github上愈來愈多的開源web（html+css+js）項目，bower只須要github項目加一個配置文件就可使用bower方式管理。bower提供了web包的添加、升級、刪除、發佈，以及管理包依賴，只需命令方式，便可輕鬆管理，不再須要去手工下載拷貝文件了。

咱們來看一下在VS2015中如何使用Bower。首先能夠經過Nuget來下載安裝Bower。

接着打開bower.json

在「dependencies」下輸入knoc能夠發現有智能提示額，我未來操做演示咱們來添加knockout這個JavaScript的類庫。

但對於類庫版本沒有進行提示

因而我單獨到官網http://knockoutjs.com/index.html進行輸入一個版本。

"knockout": "^3.2.0"

接下來咱們經過菜單進行安裝。先來找到位置   View==>>Others Windows==>>Task Runner Explorer,打開後以下圖所示

而後再在Tasks==>>bower右鍵後點擊Run,這裏其實就是要檢查bower.json文件，而後會將咱們添加的knockout類庫進行添加到項目中，執行完畢後會發現

 

 

 NPM:npm 是 Node.js 的模塊依賴管理工具。做爲開發者使用的工具，主要解決開發 Node.js 時會遇到的問題。如同 RubyGems 對於 Ruby 開發者和 Maven 對於 Java 開發者的重要性，npm 對與 Node.js 的開發者和社區的重要性不言而喻。如今已經移植到全宇宙最無敵的開發工具Visual Studio中了，真是使人歡呼雀躍。

NPM在VS2015中對應的配置文件爲package.json。下面咱們來添加一個模塊:經過下面的截圖能夠發現，一樣會有智能提示功能。

好比咱們添加以下模塊

"express": "^4.10.2"

而後在Task Runner Explorer下執行後在NPM文件夾下能夠看到

如今能夠右鍵express，而後點擊Restore Package

其實就是真正安裝express模塊吧。

 對於NPM的具體使用能夠參考http://www.infoq.com/cn/articles/msh-using-npm-manage-node.js-dependence

三、References　　

References:References 其實就是咱們以前VS版本中的引用，能夠看下我在VS2010下的截圖

和以前不一樣的是，如今VS2015項目目錄中只有 ASP.NET 5.0 和 ASP.NET Core 5.0，其中全部的程序集都是經過 project.json 文件中的 dependencies節點進行配置管理。

 

引用好保存後，vs2015就會自動從nuget上下載相應組件。

四、MVC　　

Controllers、Models和Views 和咱們以前的 ASP.NET MVC 項目沒什麼區別，Migrations 是示例項目中使用 EntityFramework 代碼遷移文件。

五、七個文件

不按照順序了。

一、Project_Readme.html

這個頁面很簡單就是針對ASP.NET 5的一個自述HTML網頁。經過這個網頁能夠連接到關於ASP.NET 5的相關內容頁面。

二、Startup.cs 應該就是原來的Global.asax.cs。

三、config.json主要就是配置數據庫連接字符串。

四、gruntfile.js至關於一個任務插件管理器

下面這就是Grunt的任務運行模版

 

在裏面分爲Alias Tasks和Tasks，其中alias中的任務，是經過在gruntfile中註冊任務得來 grunt.registerTask("default", ["bower:install"]);

而tasks則是由 grunt.loadNpmTasks("grunt-contrib-copy")得來，這些包須要提早經過package.json聲明好。

下面我簡單的經過Grunt來壓縮一個css文件。

①、在package.json中聲明插件cssmin

②、在gruntfile.js文件中加載插件

grunt.loadNpmTasks("grunt-contrib-cssmin");

③、在NPM在進行安裝插件

④、在Task Runner Explorer中刷新

刷新完後

⑤、在gruntfile.js中添加註冊任務和壓縮的文件

⑥、下面到Task Runner Explorer進行刷新，刷新以後

而後執行Run

 執行完以後查看發現

不過數值略有差別。也沒什麼關係差不太多。

這裏只是經過Grunt執行了一個壓縮的功能，還有其餘不少的功能這裏就不進行學習記錄了。

六、wwwroot

看到wwwroot，你也許並不陌生。咱們來看看網站如何運行起來吧。

如今點擊Web項目右鍵==》》Publish,選擇File System

添加應用名稱，選擇目標路徑，點擊發布

發佈成功

既然已經啓動了，那麼就至關於網站自承載成功，如今能夠打開網站了，可是什麼信息都不知道。按照以下指示進行

打開http://localhost:5000

總結

gruntfile.js經過Grunt來管理執行Bower和NPM，而Bower又經過bower.json文件進行管理，NPM又經過package.json進行管理。

project.json至關於原來的配置文件能夠管理References下項目的引用集合以及其餘配置。

Startup.cs至關於原來的Global.asax.cs。config.json主要來定義數據庫的連接字符串。

wwwroot下存放的是一些靜態文件。Web項目發佈後，經過bin目錄下惟一的dll文件AspNet.Loader.dll與命令web.cmd讓網站就能夠運行起來。這其中的奧祕還有待進一步的深刻研究呀。