探索Adobe Edge Code - HTML5與CSS3開發(fā)工具

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

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

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

圖1.Brackets的使用界面

Brackets這個工具在某些功能上與一些已經(jīng)非常流行的前端開發(fā)工具類似，具備了代碼編輯，代碼高亮，關(guān)聯(lián)提示，文件結(jié)構(gòu)等很好用的功能。但是Brackets也有自己非常明顯的幾個特徵：

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

第二，與瀏覽器可以實(shí)現(xiàn)Live Development同步，使用Brackets可以跟開發(fā)者的瀏覽器進(jìn)行實(shí)時開發(fā)同步，在Brackets上編輯的功能能即時的在瀏覽器端出現(xiàn)效果。

第三，簡潔高效，Brackets沒有復(fù)雜的設(shè)定和UI，簡潔的UI，高速的響應(yīng)，很少的資源占用，讓W(xué)eb開發(fā)者更有效率的進(jìn)行代碼編寫工作。

繼承了Brackets的這些特點(diǎn)，Adobe Edge Code在2012年下半年正式通過Adobe創(chuàng)意云發(fā)布了。

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

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

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

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

圖3. EdgeCode打開的一個本地網(wǎng)頁所在的文件夾

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

圖4. EdgeCode進(jìn)行html代碼編輯的窗口界面

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

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

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

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

#p#

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

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

上圖中的紅色圓圈選中的閃電圖標(biāo)就是啟用Edge Code的Live Development功能選項(xiàng)，紅色箭頭則是表示在Edge Code中對CSS屬性進(jìn)行修改，對應(yīng)瀏覽器頁面會即時發(fā)生變化。

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

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

接著我們用Edge Code打開css目錄下的main.css，加入對mycustomfont定義，這裡的重點(diǎn)是，當(dāng)我們?yōu)閙ycustomfont定義font-family屬性時，Edge Code會出現(xiàn)一個可以選擇字體的樣式列表，其中最下面的一個選項(xiàng)Browse Web Fonts...則是瀏覽云服務(wù)上的Web Font樣式，如圖9所示。

圖9. 在Edge Code中通過Browse Web Fonts...選擇云服務(wù)提供的字體

點(diǎn)選Browse Web Fonts...選項(xiàng)后，Edge Code Web Fonts窗口就會出現(xiàn)，里面羅列了所有可用的網(wǎng)絡(luò)字體，在選擇一個字體后，點(diǎn)擊Done來完成。圖10是Adobe Edge Web Fonts選擇窗口。