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

Sage前端工作流中主要使用到了以下几个工具。

• gulp

  gulp是一个前端流式构建工具。在roots主题中，我们使用的是grunt。

• Bower

  Bower是一个前端包管理工具，默认情况下，我们从bower中拉取了Bootstrap,Modernizr和最新的jQuery。

• BrowserSync

  BrowserSync在开发的时候通过注入更新的CSS和JS使多个浏览器同步显示前端更新。在roots主题中，我们使用的是LiveReload。

• asset-builder

  asset-builderi使用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

  以安装 Node.js 依赖。

• 然后运行：

  bower install

  以安装 Bower 依赖。

现在，您准备好构建本项目的前端资源了。

可用的 Gulp 命令

• gulp—编译并优化assets目录中的文件。
• gulp watch—监控assets目录中的文件，在文件发生改变时重新编译。
• gulp --production—为生产环境编译assets中的文件（不包含 source map）

请注意，在使用 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 文件中查看已定义的覆盖示例。

资源管道

assets/ 目录下的 manifest.json 被 asset-builder 用来构建在主题中使用的 CSS 和 JS 文件。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。