跟着宁皓网学 SemanticUI 学习笔记(01)

至于 SemanticUI 也做过一些调研,最后还是选择了它,最重要的原因是想跟着宁皓学学看,我想,任何界面框架,学好了都能做很多事情,有人说,semantic 太大,那么,你学好它,只 build 你需要的功能,它应该就满足你的需要了吧,而且,这个也许还不是我们页面的瓶颈。

基础环境

npm 、nodejs 和 glup 是必备的,安装过程,洋文不好的请访问 http://cnodejs.org

npm 默认安装版本不是3的,可以通过命令来升级到3:npm install -g npm@3

当我们的基本环境 OK 后,还要确定一件事,你可以访问 github, 如果不行,那就想办法,反正必须要上。

开始

  1. clone 宁皓的库

    git clone https://github.com/ninghao/semantic-course ninghao-semantic

  2. 进入目录,初始化

    cd ninghao-semantic

    npm init

  3. 一路回车,然后,安装 Semantic-UI:

    npm install semantic-ui –save

  4. 安装完后设置部分一路回车,然后 进入 semantic 目录:

    cd semantic

    gulp build

Gulp 任务

  1. gulpfile.js 配置文件在semantic/gulpfile.js,具体的命令实际上是在semantic/tasks里。

    • 生成 js 文件:

      //生成在 dist 目录下面

      gulp build-javascript

    • 生成 css 文件:

      gulp build-css

  2. 修改 Google 字体为国内360提供服务的字体,打开semantic/src/theme.less,修改fonts.googleapis.comfonts.useso.com

  3. gulp 监视
    不会主动结束,会一直监视 semantic 目录,将一切改变自动 build:

    gulp watch

0%