Windows上使用CSS合并打包工具css-combo

標籤：

首先介紹下css-combo的功能：把CSS模組化的檔案，打包合并到一個CSS檔案中。

為什麼項目中可能需要使用這個工具，作者給出了詳細的說明。
http://www.techcheng.com/study/css/introduce-css-combo.html

ccs-combo的源檔案託管地址：
https://github.com/daxingplay/css-combo

 

由於這個是用nodejs做的小工具，所以我們必須安裝nodejs和npm模組管理操作擴充。

1. 下載Node.js在Windows平台安裝檔案
http://nodejs.org/download/
建立D:\nodejs目錄，並將node.exe儲存在這個目錄中。並將”D:\nodejs”加入系統內容變數PATH中，便於在任意位置執行node應用。

2. 下載npm原始碼：
http://nodejs.org/dist/npm/
將npm原始碼解壓到D:\npmjs目錄中，在命令提示字元視窗中執行下面的操作，完成npm的安裝：

D:\>cd npmjsnode cli.js install npm -gf

3. 安裝css-combo
npm install -g css-combo

npm install -g css-combo

4. 使用css-combo
命令列下，可以先進入需要打包的檔案所在目錄，然後

csscombo test.source.css test.combo.css

批量處理項目中需要打包的檔案

 

1. 需要先建立一個txt檔案，比如pack-list.txt，裡面的結構如下，類似一個二維數組。
D:\www\test\css\ source-1.css source-1.combo.css
D:\www\test\css\ source-2.css source-2.combo.css

2. 建立一個bat，迴圈讀出txt行內容，並直接執行csscombo命令。

@echo off for /f  "tokens=1-3 delims= " %%i in (pack-list.txt) do (    csscombo %%i%%j %%i%%k)

給CSS右鍵添加一個Combo功能

1. 首先也是建立一個bat檔案，用於執行csscombo時的自動判斷檔案給檔案重新命名時加入一個combo尾碼。

@echo offcsscombo %1 -o %~n1.combo%~x1

2. 然後建立一個reg檔案，用於提交註冊表，保證CSS檔案的shell有這個命令。

Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\CSSFile\shell\Combo CSS]@="Combo CSS" [HKEY_CLASSES_ROOT\CSSFile\shell\Combo CSS\Command]@="D:\\www\\tools\\csscombo.bat %1"

 

Windows上使用CSS合并打包工具css-combo