uikit框架開發前期配置及定製主題方法。

要使用npm命令須要先安裝nodejs。
安裝方法網上有不少，在此就不一一例舉了。

1. 安裝Gulp

> npm install -g gulp

首先須要在全局範圍安裝gulp

用git下載Uikit。

這須要安裝git，進http://github.com/uikit/uikit直接下載後解壓就能夠。

> git clone git://github.com/uikit/uikit.git

下載以後會自動生成uikit文件夾。

> cd uikit

然後進入uikit目錄

---

2. 安裝node依賴的模塊。

執行npm install安裝node依賴的模塊。

> npm install

安裝以後打開編輯器，就會發現atom編輯器uikit目錄裏生成了一個mode_modules文件夾，裏面已安裝了相關依賴模塊。

打開gulpfile.js就能看到已經安裝的依賴。

一些經常使用命令以下：

• 幫助命令 gulp －h

• 執行全局實時預覽 gulp sync

• 建立主題 gulp －t 主題目錄名

• 實時監控主題 gulp watch －t 主題目錄名

• 加載主題樣式 gulp indexthemes

---

3. 建立主題目錄

建立主題文件夾 /custom/THEME-NAME。

custom裏建立aplus主題目錄
再建立uikit.less文件並添加

@import "../../src/uikit.less";

導入全部核心框架中的全部Less文件並採用它的基礎樣式。
然後就能夠從零開始定製屬於本身的主題。
若是須要添加components樣式，就在uikit.less的下面添加須要添加的樣式就能夠。
好比須要加dotnav樣式就在下面添加。

@import "../../src/components/dotnav.less";

具體樣式參看src目錄。
還有若是不想把核心文件所有應用，只須要某個樣式，就刪除@import "../../src/uikit.less"; 並添加所須要的樣式就能夠。
樣式列表參考src/core目錄。

定製樣式以後命令裏輸入

> gulp indexthemes

加載新的主題和樣式到定製工具中。
下圖，已經能看到所建立的Aplus加載進來了，加上默認的3個主題共顯示出4個主題。

還能在跟目錄下的themes.json文件夾裏，能看到aplus目錄已經被加載進來。

建立定製的樣式到dist目錄
命令裏輸入

> gulp dist －t aplus

就能在dist文件夾下 css目錄裏能看到建立的css主題。
名字格式爲，uikit.主題目錄名.css和uikit.主題目錄名.min.css

---

4. 導入components樣式

添加slider樣式
在aplus文件夾下的uikit.less文件裏添加

@import "../../src/less/components/slider.less";

命令行裏輸入

> gulp dist －t aplus（或者gulp －t aplus）

再訪問到dist/css/uikit.aplus.css文件，就能查看到剛導入的slider樣式。

命令行裏輸入

> gulp watch －t aplus

能夠時時監控aplus文件夾下的全部文件自動編譯文件

---

5. 測試

若是在本地測試，沒有本地服務器
就輸入

> gulp sync

就能夠全局監控全部uikit目錄下的內容，並開啓Browsersync，同步全部的瀏覽器。
（依賴裏已經安裝了Browsersync，它的具體使用方法搜搜百度吧）

http://localhost:3000能訪問到uikit官網如出一轍的網站。同時，時時監控你的操做，自動完成編譯的主題或者樣式。

訪問下面地址，

http://localhost:3000/tests

能查看所建立的主題。

定製主題以後只要把dist文件夾的文件引用到實際使用的網站上就能夠了。

定製主題須要CSS，Less基礎。