README

在Wordpress主题开发中使用Vite + TailwindCSS的示例。自动生成CSS，每保存/编辑文件时自动刷新，以及无需麻烦的简单生产构建工具。灵感来源于 vitejs/vite#341

主要功能

快速自动浏览器刷新/同步文件更改/保存
内置Tailwindcss即时编译器
由于没有未使用的CSS，因此CSS非常小
在开发过程中保持您的本地域名
使用 npm run build 进行生产打包JavaScript和CSS

安装（需要Node.js/npm）

克隆或解压缩并将文件夹复制到您的Wordpress安装 /wp-content/themes/ 文件夹中，或者通过wp-admin上传.zip文件安装主题并激活该主题。然后从您的控制台或命令提示符进入主题文件夹，并运行 npm install。注意：需要NodeJS。

npm install

快速命令

# dev server start
npm run dev

# production build
npm run build

设置

入口点文件 main.js 是您包含所有脚本和样式的地方。它可以通过 vite.config.json 和 functions.php 进行更改。

# get styles
import "./assets/css/styles.css"

# get scripts
import "./assets/js/scripts.js"

带有实时预览/刷新的开发

确保您的 wp-config.php 或主题/插件 functions.php 中存在 define("IS_VITE_DEVELOPMENT", true);。只需运行 npm run dev 并刷新您的开发网站即可。

npm run dev

在Vite开发服务器启动后，在任意浏览器中打开您已安装的Wordpress网站或刷新它。然后您可以通过添加元素和Tailwind类来开始编辑index.php或主题中的任何其他PHP文件。保存更改后，您的浏览器页面（例如，您的网站）应立即刷新。您还可以自由编辑资产文件，如styles.css和scripts.js。

生产构建

只需运行 npm run build，将定义的 IS_VITE_DEVELOPMENT 设置为 false，并刷新本地网站。

npm run build

现在Wordpress应加载生产生成的资产。

注意：为确保CMS内使用的类被处理，请将它们添加到safelist.txt中，然后再次运行构建。

Sass / Less

ViteJS也支持CSS预处理器

# .scss and .sass
npm add -D sass

# .less
npm add -D less

请查看链接以获取详细信息。https://vite.ac.cn/guide/features#css-pre-processors

关于https服务的说明

如果您的本地开发域名是通过 https:// 服务的，则需要生成用于localhost使用的证书并进行一些配置更改

安装mkcert实用程序，并遵循如何生成和安装证书的说明 https://github.com/FiloSottile/mkcert
- Windows 10（以管理员身份运行PowerShell）的示例

# install mkcert
choco install mkcert

# global one time install
mkcert -install

# run in project/theme folder to create localhost-key.pem & localhost.pem 
mkcert localhost

在 vite.config.js 中启用服务器.https选项
在您的 functions.php 中将VITE_SERVER更改为https

自定义

以下链接中提供了更多信息

Visual Studio Code Tailwind Intellisense插件是必需的。 https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

就是这样。

祝您编码愉快！ :)

变更日志

v0.3.2

刷新速度提高（在tailwind.config.js中修复了文件搜索模式）
包名已更改
Vite脚本加载逻辑已移至inc/inc.vite.php
主页已更新
在构建时对资产文件名进行哈希处理，无需强制重新加载

v0.3.1

演示布局更新
Hello World 预览图片替换
包更新
- postcss ^8.4.7 → ^8.4.12
- autoprefixer ^10.4.2 → ^10.4.4
- vite ^2.8.6 → ^2.9.1

v0.3.0

Tailwindcss 3 配置修复

包更新

autoprefixer ^10.2.5 → ^10.4.2
postcss ^8.2.14 → ^8.4.7
postcss-nested ^5.0.5 → ^5.0.6
tailwindcss ^2.1.2 → ^3.0.23
vite ^2.2.4 → ^2.8.6

v0.2.7

Tailwind 更新到 2.2.16
PostCSS 更新到 v8.3.8
Autoprefixer 更新到 10.3.6
Vite 更新到 v2.6.2

v0.2.6

Tailwind 更新到 2.2.15
Vite 更新到 v2.5.7
Autoprefixer 更新到 10.3.4
PostCSS 更新到 v8.3.6
PostCSS-Nested 更新到 5.0.6
IS_VITE_DEVELOPMENT 检查修复

v0.2.5

PostCSS 更新到 v8.2.14

v0.2.4

添加 https 解决方案
添加 404.php 模板文件

v0.2.3

Vite 更新到 v2.2.4
PostCSS 更新到 v8.2.13
Tailwindcss 更新到 v2.1.2
将 https 选项包含到 server vite.config.js

v0.2.2

添加小修复以便 Tailwindcss Intellisense 可以工作
postcss 包更新到 v8.2.10
将 index.php 分割为 header.php & footer.php
添加具有响应式容器的 example page.php 模板

v0.2.1

TailwindCSS 更新到 2.1.1（JIT 包含在本版本中）
移除实验性的 @tailwindcss/jit
functions.php 清理
添加 tailwind.config.js，模式 'JIT'（v2.1.1）
更新 postcss.config.js

v0.1.0

初始发布

drozzi-pro / wp-theme

维护者

详细信息