用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中文网其他相关文章！