CSS模塊化打包工具CSS-Combo：CSS模塊打包利器

上半年在團隊做自動化之類的工作，也學(xué)習(xí)了NodeJS，確實，NodeJS很適合做一些小工具神馬的，今天我給大家介紹的就是我自己基于NodeJS寫的CSS模塊化打包工具：CSS Combo，項目地址：httPS://github.com/daxingplay/css-combo

說起模塊化，前端一般談JS模塊化的居多，畢竟JS是編程語言，比如業(yè)內(nèi)的seajs、KISSY loader等，都有很成熟的模塊化規(guī)則和方案了，前端工程師可以采用模塊化的方法去編寫頁面，打包，上線，但是CSS界卻沒有。

后來，CSS界出現(xiàn)了SASS、LESS之類的語言，這些語言的出現(xiàn)可以說是非常應(yīng)景的，有一點很重要，拿LESS舉例，less支持了模塊化，你可以@import ‘xxx.less’的形式導(dǎo)入其他less文件（模塊），方便模塊化。我也正是從這點得到了靈感，想出了如何去做css模塊化。

CSS模塊化

其實，CSS規(guī)范里面就已經(jīng)提到相關(guān)內(nèi)容了，就是@import語法。這個語法是被當(dāng)前主流瀏覽器（當(dāng)然包括ie6）原生支持的。具體怎么用我想我不用在這里浪費大量篇幅給大家介紹語法，大家可以看下mozilla里面對@import語法的解釋（鏈接），為啥大家很少用呢，大概很大一部分原因是因為steve的這篇博文。確實，如果在生產(chǎn)環(huán)境單獨去用@import，會有較為嚴(yán)重的性能，而且不同的瀏覽器以及不同的用法下也有不同的表現(xiàn)，比較讓人郁悶。但是，這并不妨礙@import成為CSS模塊化的利器。

想必@import誕生就是為了解決css模塊化的問題吧。我們先來舉一個例子看看CSS模塊化的優(yōu)勢：

傳統(tǒng)的開發(fā)

假如你要開發(fā)某大型網(wǎng)站首頁，那html的head里面應(yīng)該是這樣引用樣式的：

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

為了頁面上比較好的性能，減少創(chuàng)建http請求的消耗，我們一般會選擇盡量減少link的css文件數(shù)量，假如本例中，頁面上所有的樣式都寫在了style.css里面�？上攵獙τ谝粋€大型網(wǎng)站來講，這個文件會有多長多長多長長長長。。。。如果出現(xiàn)bug或者想改個東西，肯定找半天；而且現(xiàn)在界內(nèi)對于CSS開發(fā)并沒有很成熟的最佳實踐或者約定可循，很多時候，前端為了加快進(jìn)度，可能會把某一個功能的代碼放在css不同的地方，如果想下線某個功能，肯定不敢亂刪。

這時候，CSS模塊化的優(yōu)勢就體現(xiàn)出來了！

模塊化開發(fā)

頁面不改，我們還是只引用那一個樣式，style.css，但是文件內(nèi)容改成下面的：

/**
 
 * xxx頁面入口樣式文件style.css
 
 */
 
@import './utils/base.css';
 
/*頁面基礎(chǔ)框架（骨架）*/
 
@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，把頁面的基礎(chǔ)布局都放在了layout.css這個文件中。然后相應(yīng)的代碼就在對應(yīng)的模塊中寫，是不是看起來簡潔、好維護(hù)很多？

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

瀏覽器原生支持。這點是這個工具或者這種模塊化形式的亮點。對于less，想要在開發(fā)環(huán)境下方便地修改，還需要額外引入一個js文件，或者采取less實時編譯之類的方法。對于實時編譯，像我這種用idea編輯器自動保存的人很蛋疼，每次自動保存的時候less編譯報錯。。。而采用這種@import xxx.css文件的方法，我們可以很方便地在開發(fā)階段，直接調(diào)試。不需要引入額外的js文件去解析style.css文件。頁面中直接引入style.css文件，通過http瀑布圖可以看到，base.css、layout.css等被一個一個加載進(jìn)來了。

方便下線某個功能。這個是所有語言模塊化的優(yōu)勢，比如哪天PD說，首頁焦點圖那個地方我想換個樣式，以往，我們很多都是直接在html里面改掉原來的class，然后在style.css里面直接加上新的樣式，老的也不敢刪，怕刪錯了，即使刪了也可能會漏，因為不停的bugfix可能會導(dǎo)致代碼亂寫。而采用模塊化的方案，我直接把@import ‘./mods/flash-pic.css’這一行注釋掉，然后再@import新的樣式，這樣，即使上線了，PD說效果不好，想換回原來的，只要改一下注釋，重新打包，豈不是很方便？

便于管理各種日常需求。好，頁面做好了，上線了，PD今天腦袋抽風(fēng)，說我要加一個功能，首頁右側(cè)加一個建議反饋入口，以往，我們要打開style.css，想想在哪兒加好，或者直接加在最后，也不管最后的地方是放什么的。采用模塊化之后，我們在style.css的最后再@import ‘./mods/feedback.css’即可，然后加上注釋：/* 2012-12-06 PD要求加上建議反饋 */，這樣以后其他修改者也能快速知道你這個模塊是干神馬的。

方便合作開發(fā)。這也是所有語言模塊化的優(yōu)勢。對于一個大型項目，往往共同開發(fā)一個文件，沖突的可能性非常大，很多情況下，我改了一個小地方，提交上去就沖突了，然后再花費比bugfix多10倍的時間去解決沖突，然后還不知道會不會產(chǎn)生另外10個新bug，而模塊化，每個人負(fù)責(zé)哪些模塊，職責(zé)非常明確，不容易出現(xiàn)問題。

依賴寫在入口文件，而不是打包腳本的配置文件。這樣開發(fā)和打包分離，新加、減少模塊不需要去修改打包配置，方便多人協(xié)作

方便調(diào)試，這是非常重要的特點，我會在后面詳細(xì)闡述。

好，說完CSS模塊化，以及如何利用@import形式來組織自己的模塊，大家是不是感覺這種形式讓你眼前一亮呢？慢著，steve大牛不是說這種@import方式有性能問題么？

是的，如果這樣開發(fā)完直接上線的話，頁面會有一些問題，我就不拿steve的博文再說一遍了，感興趣的同學(xué)可以自己去看看大牛的文章。我就挑一些比較明顯的問題說一下：

因為@import的文件是額外請求的，所以頁面加載的時候會有一小會兒的裸體（樣式?jīng)]加載進(jìn)來），要等這些模塊一個一個加載

請求數(shù)太多，頁面性能不佳，對服務(wù)器壓力也會相對大一些。

steve大牛提到的不同的瀏覽器以及不同的書寫形式可能會有不同的加載順序。

所以，最好的辦法就是把模塊打包！這和js模塊化一樣的，模塊化開發(fā)，然后上線之前打包，線上完美使用。

CSS Combo：CSS模塊打包利器

像js打包，一般都會有配備的打包工具。比如seajs有他的spm，kissy有我寫的module-compiler（NodeJS版本）等等，對于css，很多人是用ant的concat或者grunt的concat，這樣做的不利的一面就是要把css模塊依賴寫在打包腳本的配置文件中，很不利于維護(hù)。很多時候，你新增了模塊，忘記了修改打包腳本的配置，然后發(fā)上去發(fā)現(xiàn)我的腳本怎么沒生效？查了半天才發(fā)現(xiàn)是沒打包進(jìn)去。

如果你利用我上面介紹的@import形式來組織你的css，那么你就可以用我寫的配套打包工具CSS Combo了：

首先安裝css combo：

npm install css-combo

然后進(jìn)入你所在的入口文件（本例為style.css）目錄，輸入：

csscombo style.css style.combo.css

這樣就會把style.css文件打包成style.combo.css文件。很簡單吧。當(dāng)然還有其他參數(shù)，請見github文檔

好吧，你不喜歡用命令，或者你想整合該工具到你自己的一整套打包工具中，可以到github上看相關(guān)的api文檔：https://github.com/daxingplay/css-combo

如何利用CSS模塊化方便調(diào)試

模塊化，非常重要的一個特點就是要方便調(diào)試。否則我把壓縮之后的打包文件發(fā)上去了，發(fā)現(xiàn)線上出bug了怎么辦？這里，你只需要選擇一個代理工具將style-min.css（或者style.combo.css）文件代理成你的源碼文件style.css，然后刷新一下，看看是不是都模塊加載了？

或者，我也推薦你用這種方案，和開發(fā)配合起來，比如后臺是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參數(shù)，那么頁面就引用了style.css腳本，樣式文件全部模塊化載入，方便你調(diào)試，能夠快速定位到出錯的模塊；而普通訪客進(jìn)來，沒有加這個參數(shù)，全部是引用的style-min.css這個壓縮之后的腳本。

當(dāng)然，你也可以任意發(fā)揮，比如在淘寶內(nèi)部，我們可以結(jié)合ucool方便切換源碼和非源碼，或者你可以在js腳本里面，把源碼的link標(biāo)記刪除掉，在動態(tài)插入源碼的link等等。

總之，利用模塊化，可以很方便調(diào)試，定位出問題的代碼在哪個文件。

一些最佳實踐

首先，我務(wù)必要提醒大家，@import語法一定要仔細(xì)看。
基本上，以下幾種用法：

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

這里，我們不推薦使用本地絕對路徑的引用方式，因為不利于團隊協(xié)作，相對目錄絕對夠用了，當(dāng)然css-combo是支持解析本地絕對路徑的。

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

其他

為啥不直接用less

團隊里面不是每人都會less，不是每個人都喜歡less。而且less不支持gbk編碼，還有上面提到的，調(diào)試需要引入一段js，很多情況下，開發(fā)套頁面的時候都保留了。。。其實，最根本的原因就是less和css combo解決的不是一類問題，less更多的是把css編程化，css combo只專注css模塊打包:)

好，先寫到這兒吧，思路比較亂，大家有問題歡迎提出，對于css combo工具有任何需求和bug，歡迎到github上提issue。