探索Adobe Edge Code - HTML5與CSS3開發工具

作者：董龍飛 2013-03-04 13:14:00

這篇文章介紹的核心對象是Adobe于去年面向HTML5開發而發布的一款開發工具，名稱叫做Adobe Edge Code。而本文的核心內容則是圍繞Adobe Edge Code展開以下幾個部分的討論：了解Adobe Edge Code與開源項目Brackets、Adobe Edge Code的幾個重要功能、Adobe Edge Code擴展：WebFont服務。

【51CTO專稿】Edge Code是一款輕量級的Web開發工具，它主要為Web前端開發者提供一個可以編寫HTML，CSS和JavaScript代碼的工具。2012年，Adobe向Web前端開發者發布了一個開源項目(MIT License)，名稱為Brackets，這個開源項目就是Edge Code這款工具的核心。Brackets由來自于Adobe和Web社區的眾多開發者共同在Github上維護的開源項目（https://github.com/adobe/brackets），Brackets這款開源的Web前端代碼編輯工具推出后，版本更迭的非常之快，短短6個月的時間，穩定的更新Build達到了20個，圖1是Brackets工具的使用界面。

圖1.Brackets的使用界面

Brackets這個工具在某些功能上與一些已經非常流行的前端開發工具類似，具備了代碼編輯，代碼高亮，關聯提示，文件結構等很好用的功能。但是Brackets也有自己非常明顯的幾個特徵：

***，開源。這個工具的開源意味著前端的開發者可以深度定制這款工具為自己所用，從擴展的插件到hack的功能都可以完全按照開發者不同的需求來定制。

第二，與瀏覽器可以實現Live Development同步，使用Brackets可以跟開發者的瀏覽器進行實時開發同步，在Brackets上編輯的功能能即時的在瀏覽器端出現效果。

第三，簡潔高效，Brackets沒有復雜的設定和UI，簡潔的UI，高速的響應，很少的資源占用，讓Web開發者更有效率的進行代碼編寫工作。

繼承了Brackets的這些特點，Adobe Edge Code在2012年下半年正式通過Adobe創意云發布了。

我們可以通過登錄Adobe Creative Cloud來獲取免費的Edge Code工具，如圖2所示。

圖2. 登錄creative.adobe.com后在app欄目中可以找到EdgeCode

CreativeCloud會自動檢測你登錄所使用的操作系統，從而提供對應版本的EdgeCode。繼承了開源工具Brackets的特點，Edge Code這款工具擁有以下幾個最出色的功能：

***，高效的Quick Edit功能。在很多Web前端開發者傳統的代碼編寫過程中，修改一個Web頁面可以牽扯到對很多文件的修改，主要包括了html,css和js文件的改動，通常這些修改都是按順序逐個的修改正確后，Web頁面才會呈現出修改后的效果，這種工作方式就變的容易出錯。EdgeCode工具為了改善這種繁瑣的工作流程，提高代碼修改時的工作效率，引入了Quick Edit功能。接下來我們將關注如何在Edge Code中使用Quick Edit。首先，我們通過Edge Code的菜單File->Open Folder...選項打開一個要處理的html頁面所在的文件夾，Edge Code會在打開文件夾后在Edge Code左側顯示出該文件夾的文件結構目錄，如圖3所示。

圖3. EdgeCode打開的一個本地網頁所在的文件夾

上圖中紅色框中的htdocs是選擇打開的文件夾，該文件夾下的Edge文件夾內的index.html就是我們要示範Quick Edit的目標文件。單擊index.html文件，Edge Code會在右側打開此頁面的源代碼編輯環境，如圖4所示。圖4中紅色圓圈框中的箭頭表示編輯的是左側的哪一個文件。

圖4. EdgeCode進行html代碼編輯的窗口界面

我們在編輯代碼窗口中找到第66行，將div的class屬性值”hero-unit”選中，然後按快捷鍵CMD+E（Windows系統是Ctrl+E)，Edge Code將會在編輯區域出現一個有關”hero-unit”的內置編輯器，將與”hero-unit”相關聯的文件和代碼顯示在其中，如圖5所見。

圖5 EdgeCode開啟代碼QuickEdit功能界面

我們通過在index.html中開啟Quick Edit功能，可以快速完成對于一個Web頁面中同樣元素在不同文件中的關聯編輯。上例，是我們在index.html頁面中要對”hero-unit”的div class進行修改，而QuickEdit找到了相關可以影響”hero-unit”類的css關聯文件，從而我們可以直接修改bootstrap.css等2個文件中對于hero-unit類的定義，而無需進行額外的查找確認等效率不高的操作。Edge Code的Quick Edit功能不僅僅可以對HTML,CSS,js代碼中的特定屬性，命名做統一的快速編輯，還可以提供CSS屬性的可視化快速編輯，比如色彩。接下來用Edge Code打開本文涉及的範例里的bootstrap.min.css里的hero-unit類的background-color屬性值，選中十六進制的色彩屬性值，用CMD+E開啟Quick Edit，會欣喜的發現，Edge Code在原有代碼下方顯示一個內置的可視化色彩編輯工具，讓開發者可以輕松的在可視化環境下設定想要的數值。圖6顯示了Edge Code的Quick Edit開啟可視化色彩編輯的功能。

圖6. Edge Code Quick Edit功能下的CSS可視化編輯功能

#p#

第二，Edge Code具備了和瀏覽器同步的Live Development功能。與瀏覽器同步進行Live Development是Edge Code的另一個特色功能。目前***的Edge Code是Preview 3的版本，它可以很好的同Google Chrome繼承實現HTML5的Live Development。Edge Code的Live Development主要體現在開發者在Edge Code里編輯的HTML和CSS代碼，要看到修改過的***效果，無需重新刷新頁面，所有針對修改的結果會同一時間動態的顯示在瀏覽器中。下面，我們還是用本文中涉及到的範例bootstrap.min.css來觀察Live Development。我們在Edge Code中將編輯環境轉換到index.html上，然後點擊Edge Code主界面右上角的“閃電”圖標，Edge Code會啟動（或重啟）Google Chrome瀏覽器，然后，index.html會顯示在瀏覽器中。接著上一個Quick Edit修改css中.hero-unit類的background-color屬性值的例子，我們在Edge Code中對bootstrap.min.css中的.hero-unit的background-color屬性開啟Quick Edit功能，如果我們還未更改任何背景色彩，我們其實已經可以看到Google Chrome隨著我們在Edge Code中對.hero-unit類所定義的div區域已經被一個藍色線框選中，這其實已經證明Google Chrome和Edge Code啟動了Live Development的同步功能。隨著我們對background-color屬性的更改，會很明顯的看到Google Chrome中對應.hero-unit類的div區域的背景色彩發生了即時的變化。恭喜，我們已經很輕鬆的用到了Edge Code的Live Development功能，圖7就是Live Development啟動的截圖。

圖7. Edge Code和Google Chrome瀏覽器啟用同步Live Development功能

上圖中的紅色圓圈選中的閃電圖標就是啟用Edge Code的Live Development功能選項，紅色箭頭則是表示在Edge Code中對CSS屬性進行修改，對應瀏覽器頁面會即時發生變化。

接下來我們要談的一個重要功能是屬于Edge Code特有的，也是Adobe為Edge Code這款工具整合的一個Creative Cloud上的云服務，就是Edge Code的Web Font功能。我們知道HTML5和CSS3的有一個***的功能就是在指定字體時，可以指定特定網絡上的某種字體作為頁面某些元素的字體樣式。而Edge Web Font服務是Adobe將2012年收購的TypeKit的字體庫和開放Google Web Fonts庫做了統一整合后，嵌入在Edge Code中的一項擴展。接下來我們用本文用到的示例來完成對Edge Web Font的使用演示。首先，我們用Edge Code打開index.html文件，在第69行為<p>這個HTML標簽添加一個class屬性，如圖8所示。

圖8. Edge Code中為HTML中的文字段落添加class設定

接著我們用Edge Code打開css目錄下的main.css，加入對mycustomfont定義，這裡的重點是，當我們為mycustomfont定義font-family屬性時，Edge Code會出現一個可以選擇字體的樣式列表，其中最下面的一個選項Browse Web Fonts...則是瀏覽云服務上的Web Font樣式，如圖9所示。