打开 semantic 目录下的 gulpfile.js .. 在这里定义了一些任务，比如可以监视项目的变化，编译输出 Semantic UI .. 之前我们已经试过 build 这个任务，它可以编译输出 Semantic UI 里的所有的东西 .. 我们也可以单独去编译 JavaScript .. 或者 CSS ..

比如这个 build-javascript 任务，其实这个任务真正要做的事，是在 tasks .. build 下面的 javascript.js 这个目录里定义的 ..

打开终端 .. 进入到项目下面的 semantic 这个目录里面 ..

编译 JavaScript 可以这样

gulp build-javascript

你会看到，这个任务会把编译好的组件的 JavaScript 放到 dist 这个目录的下面，最后会生成一个合并然后压缩以后的 JavaScript 文件 .. 还有一个合并的没压缩过的 JavaScript 文件。

在项目里，你可以调用这些单独的 JavaScript 文件，如果你想使用 Semantic 全部的组件，可以调用这个 semantic.min.js 或者没压缩过的 semantic.js ..

再试一下 build-css 这个任务，我们先去修改一个地方　.. 打开 src 下面的 theme.less .. 找到 loadFonts .. 修改一下这个字体的地址 .. 默认是 Google 网站的地址，这个地址在国内访问会有点问题，我们也可以换成 360 提供的地址 .. fonts.useso.com .. 保存 .. 回到终端 .. 执行一下：

gulp build-css

这个任务编译的是 Semantic UI 里的 CSS 文件 .. 同样会放到 dist 这个目录的下面 .. 最后也会生成一个合并之后的 CSS 文件 .. semantic.css 是没压缩的，semantic.min.css 是压缩的版本 ..

回到编辑器 .. 打开 dist 下面的 semantic.css .. 你会看到这里导入字体的地址，就会使用我们自己设置的 fonts.useso.com ..

最后再试一下 watch 这个任务 .. 它可以监视一些文件的变化，然后自动去执行一些任务，比如去编译 CSS 还有 JavaScript ..

gulp watch

这个任务不会自己结束，会一直执行，监视文件的变化，这些文件发生变化以后，会去执行对应的任务，比如重新编译 JavaScritp 或者 CSS ..