Skip to content

purple1007/new-tailwind-theme

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

238 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

www.debbylin.me


排除 Projects

為了在分類排除 Projects 底下的文章,在這些檔案都有排除:

在 vscode 搜尋 27 or 29 (Project 的分類 ID)

  • Local Project category ID : 29
  • Production Project category ID : 27
  1. functions.php
  2. widget-archive.php
  3. post-footer.php

Commands

npm run dev

Assets will be compiled and BrowserSync will proxy the dev host allowing you to work while seeing your CSS and JS changes appear on the site as they are recompiled.

npm run webpack

Runs the development build

npm run prod

Runs the product build which includes asset file versioning and Purge CSS


開發與打包流程說明

npm run dev 開發模式

執行後 Laravel Mix 會:

  1. 編譯 assets/scss/app.scssbuild/css/app.css(無 hash)
  2. 編譯 assets/js/app.jsbuild/js/app.js(無 hash)
  3. 啟動 BrowserSync,proxy 本地 WordPress 站台
  4. 監聽檔案變更,自動重新編譯並重載頁面

開發模式下,WordPress 透過 build/local-manifest.json(如果存在且 WP_DEBUG 為 true)來載入無 hash 的 app.css / app.js,確保每次修改都能即時反映。

注意build/css/app.cssbuild/js/app.js 已被 .gitignore 忽略,不會進入版本控制。

npm run prod 正式打包

執行後 Laravel Mix 會:

  1. 編譯並壓縮 SCSS/JS
  2. 產生帶有 hash 的檔案,例如 build/css/app.05ceca.cssbuild/js/app.0a1ec2.js
  3. 更新 build/mix-manifest.json,記錄 hash 對應表:
    {
      "/css/app.css": "/css/app.05ceca.css",
      "/js/app.js": "/js/app.0a1ec2.js"
    }
  4. 帶 hash 的檔案與 mix-manifest.json 需要 commit 進版本控制

WordPress 如何自動載入 CSS / JS

整個載入流程由以下檔案串聯:

檔案 功能
app/AssetResolver.php 讀取 manifest 檔案,將 css/app.css 解析為實際帶 hash 的路徑
build/mix-manifest.json 正式環境的 hash 對應表(prod 打包產生)
build/local-manifest.json 開發環境的對應表(dev 模式產生,WP_DEBUG=true 時優先使用)
includes/scripts-and-styles.php 呼叫 AssetResolver::resolve() 取得路徑,再用 wp_enqueue_style / wp_enqueue_script 載入

載入順序

assets/scss/app.scss → (編譯) → build/css/app.{hash}.css
                                       ↓
                            mix-manifest.json 記錄 hash
                                       ↓
                         AssetResolver.php 讀取 manifest 解析路徑
                                       ↓
                    scripts-and-styles.php 用 wp_enqueue_style 載入到前端


📚 Learn to build Wordpress theme:

About

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors