README

这是一个为 Laravel Elixir 和 npm 准备好的基础 WordPress 主题。如果你设计和开发自定义 WordPress 主题，并讨厌大多数“基础”主题中包含的冗余逻辑，这个主题就是为你准备的。拿走它，使用它，热爱它，分支它，以主题精神提出 pull request。

快速开始

• 将主题放入 wp-content/themes
• 运行 npm install
• 运行 gulp

关于

这个主题是为了将 Laravel 的 Elixir（一个 Gulp 任务运行器 的抽象）的所有优点包裹成一个 WordPress 主题。这使我们能够减少请求数量并自动化优化。

这不是什么

这个主题对设计没有意见（尽管为了示例/方便起见，它配备了 Bootstrap 和 Font Awesome）。它的意见在于高效和性能的开发模式。因此，它旨在直接作为新主题分支。这个主题作为子主题表现很好，但如果你从它创建子主题，将无法使用 Elixir。

如果你确实想要保持即插即用的可更新性，请考虑不要修改你的 gulpfile.js 或 elixir.json。如果主题被更新，你可以放入这两个文件以保持同步。所有其他文件都应该特定于你的主题，因为这里包含的应该只是一个起点。

要求

• Node/npm
• PHP 5.4 - 虽然 WordPress 核心支持不支持的、可能不安全的、已到生命周期的 PHP 版本，但这个主题不支持，所使用的语法反映了这一点。

包含

• Bootstrap
• Font Awesome

这些都可以替换或完全删除。查看你的 package.json 并相应地编辑 main.scss。

设置

• 将主题放入 wp-content/themes
• 运行 npm install

使用 Composer 安装

这个主题使用了 composer/installers 和其定义的 WordPress 规范。因此，可以使用 composer require webspec-design/wordpress-elixir 安装此主题，并将其放入 wp-content/themes。但是，应该在此之后分支主题，或者执行 composer update 将覆盖你的更改。要么从你的 composer.json 和 composer.lock 中删除它，要么将主题目录重命名以避免这种情况。

用法

使用 gulp 运行一次 gulpfile，或使用 gulp watch 在检测到更改时运行相关任务。

Sass 编译

gulpfile 被设计为将你的 sass 和任何依赖项编译成一个文件，位于 build/css/main.css，该文件已在函数文件中排队。主题附带 Bootstrap 和相应的导航栏，但你也可以轻松地将其替换为 Foundation 或你喜欢的 CSS 框架。

导入其他 Sass 库

• 安装: npm install juice --save
  • 你同样可以使用 bower 获取库，甚至将其复制粘贴到一个目录中
• 在 main.scss 中导入： @import 'node_modules/juice/sass/style.scss'

导入 Less

要使用基于 Less 的库，你有两种选择

1. 通过调整 gulpfile 和 elixir.json 来编译 Sass，然后编译 Less，最后使用 mix.styles() 连接生成的文件。
2. 创造性地使用包含的 gulplettes 来完成 #1。

查看Elixir 文档以获取有关 Elixir 功能的更多信息。

使用纯 CSS

要导入纯 CSS 库，你可以简单地写@import node_modules/animate.css/animate.css。然而，这被直接翻译成 CSS 导入，而不是附加到你的样式上，所以如果你没有在服务器端成功运行npm install，导入将导致 404。考虑使用before_copy gulplette，将此类文件复制到类似于sass/libs的地方，作为一个 scss 文件，然后像导入任何其他 scss 文件一样导入它。

Browserify

gulpfile 被设计用来使用 Browserify 将你的自己的 JavaScript 和 npm 模块编译成一个文件。脚本被编译到 build/js/main.js，这已经在函数文件中排队。

安装和使用新模块

• 安装：npm install scrollmagic --save
• 在main.js中使用：var ScrollMagic = require('scrollmagic')

模块化自己的 JavaScript

如果你喜欢将你的 JavaScript 打破成多个文件，你可以通过使用相对路径将它们全部包含到你的主文件中

require('./maps.js')

关于 jQuery 库/扩展的说明

如果你想使用 jQuery 库或扩展，如slick，你需要从 CDN 独立加载它，或者以其他方式加载。出于兼容性的考虑，我们希望我们的主题仍然依赖于 WordPress 的捆绑 jQuery，并且我们还没有想出如何将 Browserify 打包的 jQuery 库和扩展放在全局 jQuery 上。如果你找到了这个方法，我们将非常感激一个 PR。

如果这个库也有 Sass/CSS，你仍然可以像上面描述的那样将其导入到自己的样式表中。

图片

gulpfile 被设计用来将你的文件通过 TinyPNG 传递，以确保它们优化良好。你的TinyPNG API key应该放在env.json中，因为这属于敏感信息。每个图片在优化之前都会放在一个文件中，并放置它的 MD5 哈希。与此文件的比较可以防止未更改的图片再次通过 TinyPNG 返回，从而增加你的账单。如果你的env.json文件不包含 TinyPNG 密钥，图片将简单地复制到build文件夹。

BrowserSync

运行gulp watch将开始 BrowserSync，前提是你已经成功地在env.json文件中设置了bsProxy。这将在你的浏览器中打开一个新窗口，通过端口 3000 代理。当系统检测到对build/css/main.css的更改时，样式将被注入到页面中。如果检测到其他文件类型的更改，页面应该自动刷新。

配置

如果你想要配置 Elixir 的一些默认行为，请参阅elixir.json。关于这方面的文档并不多，所以祝你好运。

如果你想要针对你的开发环境进行配置或有一个地方可以存储敏感信息，请考虑使用env.json（应与默认一样 git 忽略）。

自定义 Gulp 任务

为了保持主题的即插即用可更新性，我们可以使用我们称之为gulplettes的方法来执行自定义 gulp 任务。

在执行内置 gulp 任务的过程中，gulp 将会在 tasks/main.js 中查找特定命名的钩子，在这些钩子中可以编写自定义 gulp 任务，公开 mix 对象以及当时可用的各种参数。

这是一个使用Elixir其他功能的好地方。这也是一个扩展Elixir并让它执行它不自带的基础gulp任务的好地方——比如精灵图生成？

下表按顺序列出了当前配置的钩子

functions.php 文件

函数文件被封装在一个单例类中，以避免污染全局命名空间。

为了方便起见，函数文件

• 定义了一个导航菜单
• 定义了一个图片大小
• 声明了对标题标签和文章缩略图的模板支持
• 需要自定义的Bootstrap样式Walker_Nav_Menu。这用于header.php，所以如果你在这里删除它，也要在那里删除它
• 定义了一些方便的常量。它们在函数文件和header.php中其他地方使用。如果你选择删除或修改它们，请在整个主题中这样做。
• 定义了一个图像辅助函数。使用这个和其他你在类中定义的静态函数，在你的主题中使用如下：WordPressElixirTheme::image($id, $size='', $icon='', $attr=[]);。
• 加载jQuery和由Elixir生成的脚本和样式

并且这就完了。你可以随意删除任何内容，因为这个主题从一开始就设计为可以被分叉。