WordPress Sage 主题框架文档翻译-主题构建和部署

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文件。

主题样式

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中使用的编辑样式是从主样式文件中生成的。

主题JavaScript

Sage 包含了一个主 JavaScript 文件： dist/scripts/main.js， 这个文件是从assets/scripts/main.js构建的。

任何主JavaScript 文件所依赖的Bower包都被自动包含在了主 JavaScript 文件中。

为了能正常的使用jQuery功能，Sage 在其他文件之前加载jQuery。