CssGaga 一款強大的前端重構工具

2021-10-19 18:21:47 字數 1521 閱讀 9659

cssgaga 快速上手指南

開啟cssgaga所在目錄,複製cssgaga.exe.config.sample檔案,重新命名為cssgaga.exe.config。

<?xml version="1.0"?>

其中pathdest1name、pathdest1、pathreport1三個節點為一組,代表乙個編譯目標,cssgaga支援多組編譯目標,要增加新的編譯目標,只要複製貼上這三個節點,修改「1」為「2」及更大的數字,相同數字為一組。例如,我設定本機的乙個目錄為編譯目標:

pathdest1name代表這個目標在cssgaga介面上顯示的名稱,pathdest1代表這個目標的真實物理路徑,pathreport1代表這個路徑編譯機上的位址(不使用smb共享進行檔案部署的話,這個節點設定不設定就無所謂了,可以考慮設定為你站點上該目錄的相對路徑)。

上面的設定表示當我在cssgaga上勾選「本機輸出」時,編譯後的css檔案和檔案會生成到d:\ofcss\style目錄下。

cssgaga開發約定

目錄結構

把所有的css檔案放在同乙個目錄下。網頁中用link標籤引用的css檔案,我們稱之為css橋檔案(css bridge),真正的樣式規則**按照模組拆分存放在不同的css檔案中,這些css檔案以「.import.css」結尾,代表它們不能直接被頁面引用,而要在橋檔案中通過@import指令匯入。

把所有的檔案放在css檔案所在目錄下的子目錄(例如img)中。

把所有需要進行css sprite合併的圖示檔案放在css檔案所在目錄下的slice子目錄中。

把所有自定義滑鼠樣式(.ani、.cur)放在css檔案所在目錄下的absolute子目錄中。例如:

image

2.**編寫

在css bridge檔案中,用@import指令,把頁面用到的模組css組合到一起

在編寫需要做css sprite合併的背景樣式時,不要縮寫,必須把background-image樣式單獨寫,並且不寫background-position屬性(因為這些圖示在開發階段並沒有合併,也就不需要定位,合併之後的background-position會由cssgaga自動生成),如果有png alpha透明的,需要針對ie6單獨做一張png 索引色透明時,可以用_background-image做hack,cssgaga在合併時,會單獨為ie6合併一張。

@import指令不要巢狀使用(a import b,則b不要再import其它檔案),原則上不要import其它目錄的檔案(cssgaga不會做合併處理)。

3. 編譯發布

在重構完成後,執行cssgaga,選擇開發目錄(注意與生成目標路徑對應,比如開發路徑是e:\ofcss\dev,目標路徑是e:\ofcss\output,那麼e:\ofcss\dev\style\index.css就會編譯到e:\ofcss\output\style\index.css),勾選需要使用的功能,選擇編譯目標。然後把需要發布的css檔案拖入cssgaga的主視窗,就會自動處理並編譯到目標路徑(相關的檔案自動複製)

paginationjs一款功能強大的分頁控制項

在專案中,很多時候需要分頁控制項,分頁控制項自己寫也比較簡單,但是要寫乙個功能豐富的分頁控制項話,就麻煩了,這裡推薦一款不錯的空間,頁數太多的話,顯示總頁數,搜尋指定頁碼。簡單demo 為100 說明分頁需要的總數量為100 這個個人感覺沒什麼用,還不如直接給個具體數值 100好使呢。paginat...

CoreFreq 一款監控CPU的強大專業工具

corefreq 是乙個用於英特爾 64 位處理器的 cpu 監控程式,並且支援 atom core2 nehalem sandybridge 及以上 還有 amd 0f 家族。它的核心建立在核心模組上,用於從每個 cpu 核心檢索內部效能計數器,並且與收集資料的守護程序一起工作,乙個小型控制台客戶...

一款功能強大的答題小程式

目前已經上線了一款更優秀的答題小程式,一款功能強大的答題小程式,分為四大功能,答題,學習,排名和錯題本,答題功能可以隨機從選擇的題庫中抽取題目作答,學習功能可以瀏覽全部的題目,並具有記憶功能,下次進入會自動回到學習進度,排名功能可以對每套試卷的作答人員進行分數等排名,錯題本會自動記錄使用者在答題中答...