使用 Sage 开发 Wordpress 主题

之前在 reddit 发过一个问题，wordpress 上是否有类似 Laravel Blade 这样的模板系统。

第一个回复我的大哥，推荐了 Sage，第一眼看到 Sage 感觉是个庞然大物，加之我对 wordpress 也完全不了解，不明白这货有什么用。 于是最初选择了 bladerunner 。

但是，使用 bladerunner 开发的过程中，我逐步发现，影响我开发效率的绝不仅仅是模板的问题，还有前端组件的积累问题； 同时，我也体会到了使用 Sass 写模块化可复用的样式的重要性。

于是，我对于 wordpress 主题开发工具栈又有了新的要求

• Sass
• 模板系统
• 基础代码框架

转了一圈，发现 Sage 9 完全符合我的这3个需求

• 采用了 Laravel Blade 模板引擎
• 使用 Webpack/npm 替代了 gulp/bower。webpack 我不太熟悉，需要了解，但是 bower 在多年前我就觉得是个垃圾，果然现在死翘翘了。
• ES6. 大兄弟，这个有点激进了。还在我也乐于折腾。
• 内置 bootstrap 4。这个比较鸡肋，而且我用 sass 的主要目的是 fuck off bootstrap

初始化 Sage

$ composer create-project roots/sage your-theme-name dev-master

需要注意的是，拉取最新的 Sage 代码会访问 Github，如果不想因为 Github 被墙而浪费时间，请参考 花式使用代理访问 Github - Github No.1, Proxy No.2, GFW No.7

初始化之后，在后台激活当前主题，会发现，main.js, main.css 都报 404 错误。

原来，并没有对 sass，es6 文件进行编译。

还需要安装 Yarn，安装方法

第一次编译，生成 main.js, main.css

yarn run build

监听资源文件是否发生变化，自动触发编译

yarn run start

这时访问 localhost， 会看到基本的主题功能已经就位了。

Browsersync

执行 yarn run start，会发现 chrome 自动新开了一个 tab，地址为 http://localhost:3000/

一看到 3000 端口，我就想起 Laravel 自带 elixer 也有类似功能，就是当本地资源文件/页面发生更改时，自动刷新浏览器页面。

可是这个页面打开的却是我原来 nginx 80 端口下挂的网页，而不是 8090 端口下的 wordpress 站点。说明 browsersync 的路径需要更改。

然而，我并没有兴趣去捣鼓这个功能，感觉比较鸡肋，我 ctrl+r 并不耽误时间。

哪些文件不需要加入 git 管理

凡是 composer, npm 安装的依赖文件，都不需要加入 git 管理。

那发布到生产环境怎么办？

还是需要发布机啊，在发布机上进行依赖安装，生成 production 需要的文件，再推送到生成环境。

漂亮的代码

Sage 无论是代码结构，还是代码的风格都像 Laravel 一样优雅，让人觉得 PHP 不是一门垃圾桶般的语言。

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式

请问发布机是什么东东？求介绍下。