codekit使用心得

現在前端工程師使用的工具真的是五花八門,真的很難想像以前只需要靠Dreamweaver + flash打天下。在後端做這麼多年,根本已經全忘了Dreamweaver要怎麼用了,現在要做什麼都是直接開sublime來用。不久前發現了有個新工具codekit,這個工具看似簡單,其實是很有深度的,能夠幫前端設計師解決一些routine的工作。

enter image description here

Codekit是什麼?能吃嗎?

看到官網上的說明了嗎? It’s like steroids for web developers. 網站設計師的類固醇耶!這麼酷的東西能夠讓網站設計師能夠精力充沛,不斷工作,不過聽起來似乎不是什麼好東西。先載下來用再說。

Codekit的功能

基本上這套軟體主要是幫助前端設計師管理他們最常碰到的檔案,例如javascript, css, 圖片以及html或php檔。以下統稱assets。在這年頭管理assets對網站設計師是很重要的。比如像是最基本的將多個javascript檔案與css檔案整倂并壓縮成一個檔案,減少下載時間,或者支援一些語法如css的SASS或LESS,javascript的coffeescript等。除了將多個檔案整合成一個檔案外,還能夠協助檢查css或javascript語法,避免因為打錯字所造成的錯誤,其實是很方便的工具。另外也有支援檔案夾watch的功能,當檔案內容有變動時,自動檢查語法與整倂壓縮,還可同時重新整理瀏覽器,讓設計師就像吃了類固醇一樣。

在使用Codekit的時候,檔案夾的規劃就變得很重要,我是喜歡用以下的方式分類:

|--assets
|----images
|----javascripts
|----stylesheets
|----raw
|------less
|------js
|------scss

將需要的assets依照類別擺放,例如javascript, fonts, stylesheets, images等類別都要開資料夾個別管理,然後在raw資料夾內擺放還沒壓縮的js或less或scss檔案,然後將這些未壓縮的檔案指定儲存到javascripts或stylesheets。編輯時只需要編輯raw資料夾的內容就可以了,讓codekit自動將這些assets丟到屬於他們的資料夾。在html引用時就直接引用壓縮整倂後的檔案。

針對圖片方面Codekit也支援影像最佳化功能,不過效果有限,可能我在作圖的時候已經有壓縮過了,但是當頁面圖片數量多時,最佳化的效果還是有很大的幫助。Codekit說是前端設計師的好幫手一點也不為過。不過呢,好用的東西都是要錢的,如果不想用codekit,要做這些事就要靠grunt.js了,相較起來Codekit的界面與友善度大勝。