用gulp更快地開發WordPress主題

本網站文章是由Siteground贊助的系列文章的一部分。 感謝您支持使SitietPoint成為可能的合作夥伴。 用Gulp簡化您的WordPress主題開發！ 利用您現有的前端和PHP技能，再加上Gulp的力量，可以有效地創建高質量的主題。雖然簡單的文本編輯器就足夠了，但gulp顯著增強了您的工作流程。本教程演示了Gulp如何自動化關鍵任務：

更新php主題文件。

• 優化圖像。
• 將SASS SCSS彙編為縮小的CSS。
• 組合，調試和縮小JavaScript。
>
• >在文件更改時自動瀏覽器刷新。

>使用GULP進行WordPress主題開發：

>

>自動化：

gulp自動重複任務，提高發展速度和效率。
• 優化：
>它處理和簡化資產（圖像，CSS，JavaScript），導致較小，更快的主題。
• >工作流改進：自動化圖像處理，SASS彙編和JavaScript處理，減少手動工作。
>
• >>實時重新加載：gulp與browsersync的集成在修改文件時啟用即時瀏覽器更新，消除了手動刷新。
• >可擴展性：成千上萬的插件擴展了Gulp的功能，提供了代碼伸長，自動部署等功能。
• 理解Gulp：
GULP是一個基於JavaScript的構建系統，可將源文件轉換為優化的構建文件。 如果您不熟悉Gulp，請諮詢綜合指南，以詳細安裝和使用說明。 這是一個快速摘要：

> install node.js.

全球安裝Gulp：

>

創建一個項目文件夾（例如，
1. ）並導航：
>
2. 初始化您的項目：npm install gulp-cli -g
3. mytheme mkdir mytheme && cd mytheme項目文件結構：
4. GULP需要一組源文件（未修改的代碼和資產）。 處理這些以創建最終構建文件。 您的WordPress主題位於npm init內。 對於本教程，我們將將源文件與構建目錄分開以獲得更好的組織和安全性。
推薦的源文件夾結構是：

• ~/mytheme/（您的源目錄，Web服務器範圍之外）
  • - WordPress PHP主題文件template/
  • - 主題圖像images/
  • - SASS SCSS源文件scss/
  • - JavaScript源文件js/

安裝依賴項： >從您的源文件夾（

），安裝海灣和插件：>

~/mytheme/（在您的版本控制系統中忽略

。）

npm install --save-dev autoprefixer browser-sync css-mqpacker cssnano gulp gulp-concat gulp-deporder gulp-imagemin gulp-newer gulp-postcss gulp-sass gulp-strip-debug gulp-uglify gulp-util postcss-assets

>

node_modules gulp配置（gulpfile.js）：

在源文件夾中創建。 此示例演示了基本的文件複製和圖像優化。 （原始文章中提供了完整的，更高級的示例。）

>

gulpfile.js

任務和工作流：

// Gulp.js configuration
'use strict';

const gulp = require('gulp');
const newer = require('gulp-newer');
const imagemin = require('gulp-imagemin');

// ... (rest of the configuration) ...

將包含以下任務：>

>複製PHP文件（gulpfile.js）

處理圖像（
• ）gulp php
編譯SASS（
• ）gulp images
>處理JavaScript（
• ）gulp css
運行所有任務（
• ）gulp js
觀察更改並使用browsersync進行現場重新加載（
• ）gulp build>
• gulp default進一步的增強：

探索墨西哥灣插件以添加以下任務：

> php和javaScript linting。

生成

>的主題樣式。

• >緩存破壞。
• >自動部署。 package.json
• >
常見問題（常見問題解答）：
• （它們在原始文章中得到了回答，並且在這裡太廣泛而無法複製。
>這種修訂後的響應提供了原始文章的更簡潔，更重組的摘要，在改善可讀性和流程的同時，維護了核心信息。 請記住，請諮詢原始文章，以了解每個任務和插件的完整

和詳細說明。

>

以上是用gulp更快地開發WordPress主題的詳細內容。更多資訊請關注PHP中文網其他相關文章！