Web Essential 2013功能簡介-1

by vivid 10. 九月 2014 02:36

.NET Magazine國際中文電子雜誌
者:許薰尹
稿:張智凱
文章編號:N140915201
出刊日期:2014/09/10
開發工具:Visual Studio 2013 Ultimate Update 3Web Essential 2013 for Update 3
版本:.NET Framework 4.5.X

在《ZenCoding 語法簡介 - Visual Studio 2013 Ultimate》這一篇文章中,介紹了Visual Studio 2013的擴充程式—Web Essential的Zen Coding語法,除了Web Essential提供的Zen Coding語法之外,還有許多好用功能,補原有Visual Studio 2013開發工具的不足之處,特別是在撰寫HTML、CSS、JavaScript程式碼時。在這一篇文章之中,我們將來探討在使用Visual Studio 2013開發工具設計網頁時,可以使用到的擴充功能。

 

撰寫JavaScript增強功能

Web Essential 2013擴充了Visual Studio 2013編輯器撰寫JavaScript的功能。

Extract to File

你可以將寫在網頁之中的JavaScript程式碼,快速地分離到一個外部JavaScript檔案之中,若網頁包含以下JavaScript區塊:

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>About</title>
</head>
<body>
    <div>
    </div>
  <script>
    function SayHello() {
      alert("hello");
    }
    SayHello();
  </script>
</body>
</html>

你可以將滑鼠游標停留在<script>標籤之上,從智慧型標籤的下拉選單,選取「Extract to File」選項,這樣就可以將其中的JavaScript檔案,分離到一個外部JavaScript檔案:

clip_image002

圖 1:使用「Extract to File」選項分離JavaScript到外部檔。

接著Visual Studio 2013會跳出一個對話盒,讓你為外部JavaScript檔案命名:

clip_image004

圖 2:為外部JavaScript檔案命名。

另存的Javascript.js檔案內容如下:

function SayHello() {
  alert("hello");
}
SayHello();

 

原始網頁內容將變成如下,包含一個引用外部JavaScript檔案的<script>標籤:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>About</title>
</head>
<body>
    <div>
    </div>
  <script src="/Scripts/Javascript.js"></script>
</body>
</html>


壓縮JavaScript(Minify)

在<script>標籤上開始智慧型標籤選單時,還有一個壓縮JavaScript程式的功能--「Minify」,若選擇「Minify」:

clip_image006

圖 3:壓縮JavaScript程式的功能--「Minify」。

就會移除JavaScript程式碼中不必要的字元,原始網頁的內容將變成如下:

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>About</title>
</head>
<body>
  <div>
  </div>
  <script>function SayHello(){alert("hello")}SayHello();</script>
</body>
</html>

Remove HTML tag

顧名思義,「Remove HTML tag」選項就是用來移除HTML標籤的,若選取此選項

clip_image008

圖 4:「Remove HTML tag」選項。

會移除HTML標籤,原始網頁的內容將變成如下:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>About</title>
</head>
<body>
    <div>
    </div>
  function SayHello() {
  alert("hello");
  }
  SayHello();
</body>
</html>

 

壓縮外部JavaScript 檔案

雖然ASP.NET 提供Microsoft ASP.NET Web Optimization Framework套件,可以讓你將多個JavaScript檔案打包與壓縮,以一個HTTP請求將其下載,但是需要在專案之中,撰寫程式碼,來決定將哪些檔案進行打包的動作。牽涉到撰寫程式碼,便覺得這個功能有點不方便使用。還好Web Essential提供更簡單的方式,來進行JavaScript檔案或CSS檔案的打包與壓縮動作,我們來看看它的做法。

我們先來看看壓縮外部JavaScript 檔案的步驟。第一步先在Visual Studio 2013開發工具「Solution Explorer」視窗中,按CTRL鍵,同時選取多個想要打包的檔案,按滑鼠右鍵,從快捷選單中選取「Web Essential」-「Minify JavaScript files」選項

clip_image010

圖 5:「Minify JavaScript files」。

接著便會自動產生一個壓縮過的檔案(*.min.js)與一個*.map檔,自動移除不必要的字元:

clip_image012

圖 6:壓縮過的檔案(*.min.js)。

爾後修改開發版的JavaScript檔案內容,只要一存檔,便會自動更新壓縮(*.min.js)檔案的內容:

clip_image014

圖 7:自動更新壓縮(*.min.js)檔案的內容。

打包JavaScript檔案

若要打包JavaScript檔案,則在Visual Studio 2013開發工具「Solution Explorer」視窗中,按CTRL鍵,同時選取多個想要打包的JavaScript檔案,按滑鼠右鍵,從快捷選單中選取「Web Essential」-「Create JavaScript bundle file」選項

clip_image016

圖 8:「Create JavaScript bundle file」選項。

接著Visual Studio 2013會跳出一個對話盒,讓你為打包檔命名:

clip_image018

圖 9:設定bundle檔案名稱。

在專案之中將產生MyJavaScript.js.bundle、MyJavaScript.js、MyJavaScript.min.js、MyJavaScript.min.js.map四個檔案,描述組成打包檔案的檔案列表:

clip_image020

圖 10:產生打包相依檔案。

後續只要來源的JavaScript檔案內容變動,或重新編譯專案或存檔時,就會重新產生這個壓縮版(*.min.js)的檔案。這樣壓縮版的檔案內容永遠會是最新版,和開發版同步。

MyJavaScript.js.bundle的內容大致如下:

<?xml version="1.0" encoding="utf-8"?>
<bundle xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/bundle.xsd">
  <settings>
    <!--Determines if the bundle file should be automatically optimized after creation/update.-->
    <minify>true</minify>
    <!--Determin whether to generate/re-generate this bundle on building the solution.-->
    <runOnBuild>false</runOnBuild>
    <!--Specifies a custom subfolder to save files to. By default, compiled output will be placed in the same folder and nested under the original file.-->
    <outputDirectory />
  </settings>
  <!--The order of the <file> elements determines the order of the files in the bundle.-->
  <files>
    <file>/Scripts/JavaScript1.js</file>
    <file>/Scripts/jquery-2.1.1.js</file>
  </files>
</bundle>

 

由於範例中JavaScript1.js內的JavaScript程式碼引用到jQuery,因此你需要適當地調整一下打包檔案的順序,只要修改MyJavaScript.js.bundle的內容,移動<file>標籤來調整順序:

<?xml version="1.0" encoding="utf-8"?>
<bundle xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/bundle.xsd">
  <settings>
    <!--Determines if the bundle file should be automatically optimized after creation/update.-->
    <minify>true</minify>
    <!--Determin whether to generate/re-generate this bundle on building the solution.-->
    <runOnBuild>false</runOnBuild>
    <!--Specifies a custom subfolder to save files to. By default, compiled output will be placed in the same folder and nested under the original file.-->
    <outputDirectory />
  </settings>
  <!--The order of the <file> elements determines the order of the files in the bundle.-->
  <files>
   <file>/Scripts/jquery-2.1.1.js</file>
    <file>/Scripts/JavaScript1.js</file>
  </files>
</bundle>

最後在網頁中引用產生出來的min版本即可:

<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Index</title>
  <link href="~/Content/StyleSheet1.css" rel="stylesheet" />
</head>
<body>

  <h1>My Page</h1>

  <script src="~/Scripts/MyJavaScript.min.js"></script>
</body>
</html>

Zen Coding新增語法

Web Essential 2013的Zen Coding可以很容易產生HTML標籤,例如在Visual Studio 2013開發工具中,輸入以下程式再按Tab鍵:

html5

就會自動產生以下HTML標籤:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

</body>
</html>


Lorem Pixel generator

在撰寫網頁時,經常會需要在網頁上顯示指定大小的圖片,Web Essential 2013工具新增一個

Lorem Pixel generator可以依據你的需求,自動產生符合你指定大小的圖片,讓你在設計網頁時,暫時使用,我將之稱為暫用圖片。

例如在Visual Studio 2013開發工具之中設計HTML時,輸入以下語法,再按Tab鍵

pix-200x200

則會自動產生以下img標籤,連結到lorempixel.com,顯示一個200px * 100px大小的圖片:

<img src="http://lorempixel.com/200/100/" alt="" />

在Visual Studio 2013開發工具中,將游標移動到此連結上方,便可以馬上預覽這張圖片,這張圖片是亂數產生的,因此每回執行網頁時,可能都看到不同的圖片:

clip_image022

圖 11:產生圖片連結,並預覽圖片。

若想要呈現特定類型的圖片,像是動物、城市、運動...等分類的照片,你也可以輸入分類名稱,可以用的分類名稱包含:abstract、animals、business、cats、city、food、nightlife、fashion、people、nature、sports、technics、transport。

例如輸入以下語法,要求亂數產生一個連結到顯示貓圖片的img標籤:

pix-200x100-cats

按Tab鍵之後,便會產生以下標籤,後方的數字「1」為此分類中圖片的號碼:

<img src="http://lorempixel.com/200/100/cats/1/" alt="" />

clip_image024

圖 12:產生圖片連結。

你也可以在圖片上加上文字,若在Visual Studio 2013開發工具,輸入以下語法:

pix-200x100-city-Love

按Tab鍵之後,便會產生以下標籤:

<img src="http://lorempixel.com/200/100/city/2/Love/" alt="" />

執行網頁後,可以看到文字呈現在左方:

clip_image026

圖 13:產生含文字說明的圖片。

若要更了解產生暫用圖片的語法,請參考http://lorempixel.com/網站。

 

使用Browser Link

Visual Studio 2013的Browser Link功能,可以讓你設定檢視網頁執行結果時,同時以多種不同的瀏覽器來執行,並建立瀏覽器與Visual Studio 2013開發工具之間的連線,後續更新網頁原始程式碼時,可以一次重新整理所有瀏覽器的執行結果。

若要設定使用多個瀏覽器同時執行網頁,只要在Visual Studio 2013工具中,選取「Browse With」選項。

clip_image028

圖 14:設定使用多個瀏覽器同時執行網頁。

按CTRL鍵,同時選取多個不同的瀏覽器,然後按下「Set as Default」按鈕,再選擇「Browse」,就會設定同時開啟多個瀏覽器,執行網頁。

clip_image030

圖 15:設定使用多個瀏覽器同時執行網頁。

參考執行結果如下圖所示:

clip_image032

圖 16:設定使用多個瀏覽器同時執行網頁。

Visual Studio Browser Link會在瀏覽器收到的HTML加上如下的標籤,以ASP.NET SignalR、WebSocket等技術,實做瀏覽器與Visual Studio 2013雙向溝通的功能:

<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Internet Explorer","requestId":"508821ba940a4715a27851a9f52d7c4a"}
</script>
<script type="text/javascript" src="http://localhost:46924/233e051b83ba48fead28769c51499459/browserLink" async="async"></script>
<!-- End Browser Link -->

如此一來在Visual Studio 2013所做的異動就可以主動通知瀏覽器,反之亦然,在瀏覽器所做的異動就可以主動通知Visual Studio 2013。

 

使用Inspect Mode

當執行網頁時有Web Essential圖示的Browser Link工具列,會自動出現在你電腦安裝的瀏覽器下方(Internet Explorer、Chrome、Firefox…等瀏覽器),若想要隱藏此工具列,可以選取工具列上最右方的「Auto-hide」選項。或者是按下鍵盤的CTRL鍵來切換是否顯示此工具列。

clip_image034

圖 17: Browser Link工具列。

當你將網頁執行在瀏覽器上,你可以點選瀏覽器下方Browser Link 工具列上的「Inspect」按鈕(或者按下鍵盤CTRL + ALT + I組合鍵)啟用Inspect Mode。

clip_image036

圖 18:啟用Inspect Mode。

接著你只要將滑鼠移動到網頁任一HTML項目上方,此HTML項目上方就會顯示一個藍色的外框,此時切換到Visual Studio 2013開發工具,它會自動顯示游標所在的HTML項目標籤內容,並在此項目加上選取的陰影。

clip_image038

圖 19:Inspect Mode。

若在Visual Studio 2013開發工具修改標籤的內容,然後按下Visual Studio的「Refresh Linked Browsers」選項:

clip_image040

變動的部分會馬上更新到所有連結的瀏覽器,例如下圖是Internet Explorer執行的結果:

clip_image042

圖 20:變動的部分會馬上更新到所有連結的瀏覽器。

Browser Link Dashboard

你可以開啟Visual Studio 2013開發工具的「Browser Link Dashboard」視窗,來檢視目前有哪些瀏覽器和Visual Studio 開發工具建立了連線:

clip_image044

圖 21:開啟「Browser Link Dashboard」視窗。

「Browser Link Dashboard」視窗中也包含了你在瀏覽器Web Essential Browser Link工具列中看到的選單,並執行其中的功能。

clip_image046

圖 22:使用「Browser Link Dashboard」視窗。

使用Design Mode

Design Mode允許你直接從瀏覽器編輯DOM物件,並且把異動的部分,傳送到Visual Studio 2013設計工具。你可以按下瀏覽器Browser Link工具列上的「Design」連結(也可以直接按下鍵盤CTRL + ALT + D鍵啟用)。啟用後,只要將滑鼠移動到想修改的HTML項目上方,例如下圖的綠框,按一下滑鼠,游標就會自動停留在「Getting started」字串前方:

clip_image048

圖 23:使用Design Mode。

你可以直接在瀏覽器中修改綠框中的文字(下圖右方),異動的內容,會及時更新到Visual Studio 2013開發工具之中,參考下圖左方區塊:

clip_image050

圖 24:使用Design Mode。

參考資源

· Web Essential 2013下載

l http://vswebessentials.com/download

Tags:

.NET Magazine國際中文電子雜誌 | Visual Studio | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List