wordpress
,php
, tailwind
, vite
,打包
,熱更新
💬說明:在根目錄建立 assets 資料夾
<!-- 步驟1 終端機指令1 -->
步驟1 終端機指令1
npm install -D tailwindcss
<!-- 步驟1 終端機指令1 -->
<!-- 步驟2 終端機指令2 -->
npx tailwindcss init
<!-- 步驟2 終端機指令2 -->
<!-- 步驟3 建立檔案 -->
在assets資料夾建立 tailwind.css 並加入以下程式碼
/*!
Theme Name: WordPress + Tailwind
*/
@tailwind base;
@tailwind components;
@tailwind utilities;
<!-- 步驟3 建立檔案 -->
<!-- 步驟4 終端機指令3 -->
npx tailwindcss -i ./assets/tailwind.css -o ./assets/global.css --watch
<!-- 步驟4 終端機指令3 -->
<!-- 步驟5 編輯檔案 -->
編輯 package.json 檔案,在 "scripts" 裡加入 npm 快捷鍵程式碼
tailwindcss -i ./assets/tailwind.css -o ./assets/global.css --watch
<!-- 步驟5 編輯檔案 -->
💬說明:
步驟1:安裝 tailwind
步驟2:tailwind 初始化,生成 tailwind.config.js
步驟3:在assets資料夾建立 tailwind.cssv
步驟4:指定 tailwind 檔案輸入與輸出建立的位置
步驟5:編輯 package.json 檔案,可以輸入 npm run css 執行
<!-- 步驟1 終端機指令1 -->
npm install -D vite
npm install -D scss//vite 認識scss語法
npm install -D vite-plugin-live-reload//vite即時預覽外掛程式
<!-- 步驟1 終端機指令1 -->
<!-- 步驟2 檢查檔案 -->
檢查 package.json 的 scripts,是否有
"dev": "vite",
"build": "vite build",
<!-- 步驟2 檢查檔案 -->
<!-- 步驟3 檢查檔案 -->
檢查根目錄是否有創建 vite.config.js
如果沒有自行創建 程式碼內容如下
import { defineConfig } from "vite"; //vite 主要套件
import liveReload from "vite-plugin-live-reload"; //vite 熱更新套件
import { resolve } from "path";
export default defineConfig({
plugins: [
liveReload(__dirname + "/**/*.php"), // 添加vite插件(即時更新檔案名稱)
liveReload(__dirname + "/**/*.js"),
],
root: "",
base: process.env.NODE_ENV === "development" ? "/" : "/dist/",
// 配置build打包
build: {
outDir: resolve(__dirname, "./dist"),
emptyOutDir: true,
manifest: true,
target: "es2018",
rollupOptions: {
input: {
global: resolve(__dirname, "./assets/global.css"), // 新增 global.css 入口
script: resolve(__dirname, "./assets/js/script.js"), // 新增 script.js 入口
},
output: {
entryFileNames: "[name].js",
chunkFileNames: "[name].js",
assetFileNames: "[name].[ext]",
},
},
minify: true,
write: true,
},
// server: {
// cors: true,
// strictPort: true,
// port: 5174,
// https: false,
// hmr: {
// host: "localhost",
// },
// },
});
<!-- 步驟3 檢查檔案 -->
💬說明:
步驟1:安裝 vite
步驟2:檢查檔案
步驟3:檢查檔案
import "./assets/global.css";
import "./assets/js/script.js";
💬說明:把想要即時預覽的檔案 import 進去
<!-- 步驟1:functions.php 加入程式碼 -->
<?php
/*
* vite 專用
*/
function vite_dev_script()
{
if (
!defined('VITE_ENV') ||
!defined('VITE_DEV_SERVER') ||
constant('VITE_ENV') !== 'development'
) {
return;
}
$entry_file = constant('VITE_DEV_SERVER') . 'vite.entry.js';
echo '<script type="module" src="' . esc_attr($entry_file) . '"></script>';
}
add_action('wp_head', 'vite_dev_script');
?>
<!-- 步驟1:functions.php 加入程式碼 -->
<!-- 步驟2:頂層 wp-config.php 加入程式碼 -->
<?php
// 加入這個變數代表是開發環境
define('VITE_ENV', 'development');
define('VITE_DEV_SERVER', 'http://localhost:5173/');
?>
<!-- 步驟2:頂層 wp-config.php 加入程式碼 -->
💬說明:
步驟1:functions.php 加入程式碼
步驟2:wp-config.php 加入程式碼
npm run css//執行tailwind
npm run dev//執行vite
vite 出現的本地端網域應該是 http:\\localhost:5173\,如果不是就依照出現的網域開啟網頁,在用自己需編輯的網域覆蓋即可
本地端網址,例如:localhost:8888/test
💬說明:依序執行即可,如果不用 tailwind 省略安裝 tailwind 和執行 tailwind 的步驟即可