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

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

  • 分享:
评论
还没有评论
    发表评论 说点什么