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基础。