好用的CSS模塊化打包工具CSS-COMBO

上半年在團隊作自動化之類的工做，也學習了NodeJS，確實，NodeJS很適合作一些小工具神馬的，今天我給你們介紹的就是我本身基於NodeJS寫的CSS模塊化打包工具：CSS Combo，項目地址：https://github.com/daxingplay/css-combo

提及模塊化，前端通常談JS模塊化的居多，畢竟JS是編程語言，好比業內的seajs、KISSY loader等，都有很成熟的模塊化規則和方案了，前端工程師能夠採用模塊化的方法去編寫頁面，打包，上線，可是CSS界卻沒有。

後來，CSS界出現了SASS、LESS之類的語言，這些語言的出現能夠說是很是應景的，有一點很重要，拿LESS舉例，less支持了模塊化，你能夠@import ‘xxx.less’的形式導入其餘less文件（模塊），方便模塊化。我也正是從這點獲得了靈感，想出瞭如何去作css模塊化。

CSS模塊化

其實，CSS規範裏面就已經提到相關內容了，就是@import語法。這個語法是被當前主流瀏覽器（固然包括ie6）原生支持的。具體怎麼用我想我不用在這裏浪費大量篇幅給你們介紹語法，你們能夠看下mozilla裏面對@import語法的解釋（連接），爲啥你們不多用呢，大概很大一部分緣由是由於steve的這篇博文。確實，若是在生產環境單獨去用@import，會有較爲嚴重的性能，並且不一樣的瀏覽器以及不一樣的用法下也有不一樣的表現，比較讓人鬱悶。可是，這並不妨礙@import成爲CSS模塊化的利器。

想必@import誕生就是爲了解決css模塊化的問題吧。咱們先來舉一個例子看看CSS模塊化的優點：

傳統的開發

假如你要開發某大型網站首頁，那html的head裏面應該是這樣引用樣式的：

<link href="/path/to/style.css" rel="stylesheet" type="text/css">

爲了頁面上比較好的性能，減小建立http請求的消耗，咱們通常會選擇儘可能減小link的css文件數量，假如本例中，頁面上全部的樣式都寫在了style.css裏面。可想而知對於一個大型網站來說，這個文件會有多長多長多長長長長。。。。若是出現bug或者想改個東西，確定找半天；並且如今界內對於CSS開發並無很成熟的最佳實踐或者約定可循，不少時候，前端爲了加快進度，可能會把某一個功能的代碼放在css不一樣的地方，若是想下線某個功能，確定不敢亂刪。

這時候，CSS模塊化的優點就體現出來了！

模塊化開發

頁面不改，咱們仍是隻引用那一個樣式，style.css，可是文件內容改爲下面的：

/**
 * xxx頁面入口樣式文件style.css
 */

@import './utils/base.css';

/*頁面基礎框架（骨架）*/
@import './mods/layout.css';

@import './mods/header.css';
@import './mods/nav.css';

/*首頁焦點圖*/
@import './mods/flash-pic.css';

………這裏省略諸多模塊………

@import './mods/footer.css';

這裏，咱們把style.css中混亂的樣式劃分紅了一個一個的子文件，做爲模塊。能夠看到，做爲示例，我把頁面的一些reset樣式以及一些站點公用樣式放在了util目錄下的base.css中，把頁頭拆分紅header.css，把首頁焦點圖的樣式單獨拆分紅falsh-pic.css，把頁面的基礎佈局都放在了layout.css這個文件中。而後相應的代碼就在對應的模塊中寫，是否是看起來簡潔、好維護不少？

不光是簡潔，使用@import形式的模塊化還有下列好處：

1. 瀏覽器原生支持。這點是這個工具或者這種模塊化形式的亮點。對於less，想要在開發環境下方便地修改，還須要額外引入一個js文件，或者採起less實時編譯之類的方法。對於實時編譯，像我這種用idea編輯器自動保存的人很蛋疼，每次自動保存的時候less編譯報錯。。。而採用這種@import xxx.css文件的方法，咱們能夠很方便地在開發階段，直接調試。不須要引入額外的js文件去解析style.css文件。頁面中直接引入style.css文件，經過http瀑布圖能夠看到，base.css、layout.css等被一個一個加載進來了。
2. 方便下線某個功能。這個是全部語言模塊化的優點，好比哪天PD說，首頁焦點圖那個地方我想換個樣式，以往，咱們不少都是直接在html裏面改掉原來的class，而後在style.css裏面直接加上新的樣式，老的也不敢刪，怕刪錯了，即便刪了也可能會漏，由於不停的bugfix可能會致使代碼亂寫。而採用模塊化的方案，我直接把@import ‘./mods/flash-pic.css’這一行註釋掉，而後再@import新的樣式，這樣，即便上線了，PD說效果很差，想換回原來的，只要改一下注釋，從新打包，豈不是很方便？
3. 便於管理各類平常需求。好，頁面作好了，上線了，PD今天腦殼抽風，說我要加一個功能，首頁右側加一個建議反饋入口，以往，咱們要打開style.css，想一想在哪兒加好，或者直接加在最後，也無論最後的地方是放什麼的。採用模塊化以後，咱們在style.css的最後再@import ‘./mods/feedback.css’便可，而後加上註釋：/* 2012-12-06 PD要求加上建議反饋 */，這樣之後其餘修改者也能快速知道你這個模塊是幹神馬的。
4. 方便合做開發。這也是全部語言模塊化的優點。對於一個大型項目，每每共同開發一個文件，衝突的可能性很是大，不少狀況下，我改了一個小地方，提交上去就衝突了，而後再花費比bugfix多10倍的時間去解決衝突，而後還不知道會不會產生另外10個新bug，而模塊化，每一個人負責哪些模塊，職責很是明確，不容易出現問題。
5. 依賴寫在入口文件，而不是打包腳本的配置文件。這樣開發和打包分離，新加、減小模塊不須要去修改打包配置，方便多人協做
6. 方便調試，這是很是重要的特色，我會在後面詳細闡述。

好，說完CSS模塊化，以及如何利用@import形式來組織本身的模塊，你們是否是感受這種形式讓你眼前一亮呢？慢着，steve大牛不是說這種@import方式有性能問題麼？

是的，若是這樣開發完直接上線的話，頁面會有一些問題，我就不拿steve的博文再說一遍了，感興趣的同窗能夠本身去看看大牛的文章。我就挑一些比較明顯的問題說一下：

1. 由於@import的文件是額外請求的，因此頁面加載的時候會有一小會兒的裸體（樣式沒加載進來），要等這些模塊一個一個加載
2. 請求數太多，頁面性能不佳，對服務器壓力也會相對大一些。
3. steve大牛提到的不一樣的瀏覽器以及不一樣的書寫形式可能會有不一樣的加載順序。

因此，最好的辦法就是把模塊打包！這和js模塊化同樣的，模塊化開發，而後上線以前打包，線上完美使用。

CSS Combo：CSS模塊打包利器

像js打包，通常都會有配備的打包工具。好比seajs有他的spm，kissy有我寫的module-compiler（NodeJS版本）等等，對於css，不少人是用ant的concat或者grunt的concat，這樣作的不利的一面就是要把css模塊依賴寫在打包腳本的配置文件中，很不利於維護。不少時候，你新增了模塊，忘記了修改打包腳本的配置，而後發上去發現個人腳本怎麼沒生效？查了半天才發現是沒打包進去。

若是你利用我上面介紹的@import形式來組織你的css，那麼你就能夠用我寫的配套打包工具CSS Combo了：

首先安裝css combo：

npm install -g css-combo

而後進入你所在的入口文件（本例爲style.css）目錄，輸入：

csscombo style.css style.combo.css

這樣就會把style.css文件打包成style.combo.css文件。很簡單吧。固然還有其餘參數，請見github文檔

好吧，你不喜歡用命令，或者你想整合該工具到你本身的一整套打包工具中，能夠到github上看相關的api文檔：https://github.com/daxingplay/css-combo

如何利用CSS模塊化方便調試

模塊化，很是重要的一個特色就是要方便調試。不然我把壓縮以後的打包文件發上去了，發現線上出bug了怎麼辦？這裏，你只須要選擇一個代理工具將style-min.css（或者style.combo.css）文件代理成你的源碼文件style.css，而後刷新一下，看看是否是都模塊加載了？

或者，我也推薦你用這種方案，和開發配合起來，好比後臺是php，我能夠在引用style-min.css的時候這麼寫：

if(!empty($_GET['css-debug'])){
    echo '    <link href="http://xxx/style.css">';
}else{
    echo '    <link href="http://xxx/style-min.css">';
}

這樣，在線上，你能夠在url後面加上css-debug參數，那麼頁面就引用了style.css腳本，樣式文件所有模塊化載入，方便你調試，可以快速定位到出錯的模塊；而普通訪客進來，沒有加這個參數，所有是引用的style-min.css這個壓縮以後的腳本。

固然，你也能夠任意發揮，好比在淘寶內部，咱們能夠結合ucool方便切換源碼和非源碼，或者使用現成的代理工具，好比windows下的fiddler等，固然你能夠在js腳本里面，把源碼的link標記刪除掉，在動態插入源碼的link等等。

總之，利用模塊化，能夠很方便調試，定位出問題的代碼在哪一個文件。

一些最佳實踐

首先，我務必要提醒你們，@import語法必定要仔細看。
基本上，如下幾種用法：

@import "./mod/mod1.css";
@import "f:/website/htdocs/xxx/assets/css/mod/mod2.css";
@import url("http://assets.taobaocdn.com/tbsp/tbsp.source.css");

這裏，咱們不推薦使用本地絕對路徑的引用方式，由於不利於團隊協做，相對目錄絕對夠用了，固然css-combo是支持解析本地絕對路徑的。

至於直接@import線上的路徑，css-combo工具也是支持的，會幫你下載下來～

另外，必定要注意，CSS規範中，@import必須放在其餘樣式以前，好比：

@import "./mod/mod1.css";
@import "./mod/mod2.css";

body { margin:0; }

而下面這種寫法：

@import "./mod/mod1.css";

body { margin:0; }

@import "./mod/mod2.css";

mod2.css是沒法被瀏覽器@import進來的。因此咱們推薦的最佳實踐就是把全部的模塊import都放在入口文件的最開始，方便管理。

其餘

爲啥不直接用less

團隊裏面不是每人都會less，不是每一個人都喜歡less。並且less不支持gbk編碼，還有上面提到的，調試須要引入一段js，不少狀況下，開發套頁面的時候都保留了。。。其實，最根本的緣由就是less和css combo解決的不是一類問題，less更多的是把css編程化，css combo只專一css模塊打包:)

好，先寫到這兒吧，思路比較亂，你們有問題歡迎提出，對於css combo工具備任何需求和bug，歡迎到github上提issue。 (5603)

 

轉自：http://www.techcheng.com/study/css/introduce-css-combo.html