Semantic UI 环境安装搭建

Semantic UI 是一套开源的 CSS 与 JavaScript 框架，提供了一些设计好的界面组件，你可以在项目里直接使用这些组件。它还提供了一套很方便的定制主题的方法，你可以用自己的想法去改变界面组件的样式。

最近公司项目突然要用这个框架，所以只好来学习咯，由于前端知识掌握不是很牢固，最起码的安装纠结了好久，各种百度各种问，在这里小小记录一下它的安装。

刚开始接触这个东西的时候，第一想法就是去他的官网瞅瞅，结果看了刚开始的安装及集成，愈发糊涂了。我的印象中，前端框架的使用绝大多数都应该跟bootstrap差不多，只要引入对应的css和js文件就好啦~

可是官网上却说了关于安装Semantic UI的方法，还是一堆我以前听过没用过的工具，有那么复杂么？其实没那么复杂，使用该框架正如你理解的一样，只要引入对应的css和js文件就可以用了。

有些人会说，都已经可以用了，为什么还要安装那一堆子莫名其妙的工具，好像还是各种命令行，这里以我的理解来说一下为什么要安装Semantic UI：

Semantic UI是一款前端框架，我们用来构建页面更方便，快速，但是会有一个问题，就是如果它框架里的东西如果你很不喜欢怎么办？有些样式你觉得都很好，就是没有你想要的那款颜色，这时候你怎么办？难道一一对应写自己的样式去覆盖它？你累不累？这就需要安装Semantic UI ，用gulp来管理这款框架，如果你想在其中修改一些样式变量或者更换主题，再编译起来就很方便了。

废话有点多，下面说步骤：

一、安装nodeJs 、npm 和 git

1、进入nodeJs官网https://nodejs.org/en/，下载nodeIs后进行安装（只需傻瓜式的点确认即可，其安装包含了npm)；

2、然后进入git官网http://git-scm.com/download/，下载并安装，同样是傻瓜式的安装，当然安装目录你可以自行选择安装到哪里。

二、安装gulp

通过已安装的npm来安装gulp

打开刚已安装的git 命令框，在命令行中输入

npm install -g gulp

npm install gulp --save-dev

三、安装semantic UI

作为一个新手用的是Python+Django+Semantic，然而我并不知道Semantic生成的文件到底放在哪里，百度了一圈，终于找到了放在Django的static目录下即可

然后进入项目的静态文件目录，比如我的是/django_sample/static，

执行npm install semantic-ui --save，

进行一些Semantic UI的设置后，

安装完成（我设置的Semantic UI目录是/learnflask/static/semantic)后

cd到Semantic UI目录，执行gulp build命令。

先为项目创建一个目录，然后进入到这个目录的下面，比如我在自己的桌面上去为项目创建一个目录：

cd ~/desktop

mkdir my-semantic

cd my-semantic

使用 npm 去安装一下 Semantic UI：

npm install semantic-ui

过一会儿会出现设置 Semantic UI 的提示，按上下箭头可以选择：

❯ Automatic (Use defaults locations and all components)

Express (Set components and output folder)

Custom (Customize all src/dist values)

Automatic：自动配置，一切都用默认的设置。

Express：快速设置，只需要设置组件还有输出的目录。

Custom：自定义，完全自己去定义 src/dist 目录。

选择默认的 Automatic ，回车执行，又会提示：

[?] We detected you are using NPM. Nice!

Is this your project folder?

/Users/xiaoxue/Desktop/my-semantic (Use arrow keys)

❯ Yes

No, let me specify

问我们桌面上的 my-semantic 这个目录是不是我的项目的目录， Yes ，再回车执行一下。 提示：

[?] Where should we put Semantic UI inside your project? (semantic/)

意思是要把 Semantic UI 放在项目目录的哪个目录的下面，默认这个目录就是 semantic 。回车执行，会完成安装，查看项目目录下面的东西，你会看到：

node_modules semantic semantic.json

进入到 semantic 这个目录的下面，然后再执行编译的命令。

cd semantic

gulp build

编译好的 Semantic UI 会放在 dist 这个目录的下面。这个目录有下面这些东西：

components  semantic.js  semantic.min.js

semantic.css  semantic.min.css themes

components 目录下面是单独的一些组件，如果你只想使用 Semantic UI 里的某些组件，可以在这个目录下面找到这些组件。如果你想使用全部的组件，可以使用 semantic.css 与 semantic.js ，或者使用它们的最小化之后的版本，semanitc.min.css 与 semantic.min.js 。

你可以去使用 Browsersync ，监视一下项目下的 某个文件（index.html ）的变化，这样你在修改这个文档以后就不需要手工去刷新浏览器来查看变化了。

npm install -g browser-sync

创建服务器并监视文件变化

cd ~/desktop/my-semantic

browser-sync start --server --no-notify --files "index.html"

这样，基本的安装就算完成了。

当然如果你想实时监视浏览器的效果时需要安装 BrowserSync

参考官网5分钟配置方法

http://www.browsersync.cn/

在全局中安装 browser-sync 如下

npm install -g browser-sync

启动 BrowserSync

// --files 路径是相对于运行该命令的项目（目录）

browser-sync start --server --files"css/*.css, *.html"

// 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。

browser-sync start --server --files"**/*.css, **/*.html"

好这次记录到这