Sage前端工作流中主要使用到了以下几个工具。
gulp
gulp 是一个前端流式构建工具。在roots主题中，我们使用的是grunt。
Bower
Bower 是一个前端包管理工具，默认情况下，我们从bower中拉取了 Bootstrap, Modernizr和最新的 jQuery。
BrowserSync
BrowserSync在开发的时候通过注入更新的CSS和JS使多个浏览器同步显示前端更新。在roots主题中，我们使用的是 LiveReload。
asset-builder
asset-builder i使用manifest 文件收集排列整理前端资源。
wiredep
wiredep 用来从Bower包中注入Sass和Less依赖到这主题的样式文件中。
安装项目依赖
开始之前，确保你的开发机器必须满足以下几个条件。
Node >= 0.10.0
npm >=2.1.5
安装 Node.js后，建议你升级到最新的npm：
npm install -g npm@latest
在命令行运行。
全局安装 gulp 和 Bower： npm install -g gulp bower
转到主题目录，运行： npm install安装nodejs依赖。
运行 bower install安装bower依赖。
全部安装好后，我们就有了构建前端资源的必备条件。
可用的Gulp命令
gulp — 编译并优化assets目录中的文件。
gulp watch — 监控assets目录中的文件，在文件发生改变时重新编译。
gulp –production —为生产环境编译assets中的文件（没有soursemap）
使用 BrowserSync 前，你需要更新assets/manifest.json底部的 devUrl 为你开发机器的主机名。
使用Bower添加前端包
使用以下命令添加bower包： bower install –save package-name.。使用–save参数，bower将会添加包依赖信息到主题的 bower.json 文件中。
asset-builder 使用main-bower-files 读取bower.json 并自动从还有 main属性的包中收集 CSS 和 JS，你可以使用overrides属性覆盖这个行为。 bower.json.
可以在 bower.json中查看已定义的覆盖示例。
资源管道
assets/目录下的 manifest.json被 asset-builder 用来构建在主题中使用的 CSS和 JS文件。
asset-builder文档中有一些例子，除错提示和manifest 文件定义。
主题样式
Sage 包含了一个主样式文件： dist/styles/main.css. main.css，这个文件是从assets/styles/main.scss构建的。
In main.scss:
wiredep被用来从Bower中注入Sass依赖。
Barebones partials 被导入进来以帮助你开始自定义样式。
任何Bower包中main依赖的CSS被自动包含在了主样式文件中。
The editor stylesheet, which is used by TinyMCE中使用的编辑样式是从主样式文件中生成的。
小提示： 你可以使用 manifest.json 文件包含插件中的CSS样式到主题的主样式文件中。详情请查看asset-builder 文档。
主题JavaScript
Sage 包含了一个主 JavaScript 文件： dist/scripts/main.js， 这个文件是从assets/scripts/main.js构建的。
任何主JavaScript 文件所依赖的Bower包都被自动包含在了主 JavaScript 文件中。
为了能正常的使用jQuery功能，Sage 在其他文件之前加载jQuery。
小提示：你可以通过定义 manifest.json文件中的js路径，包含插件中的js到主题的主JavaScript文件中，详情请查看asset-builder 文档。