WordPress主题自动化与Gulp

用Gulp的自动化功率简化您的WordPress主题开发！ 本教程演示了如何将吞噬整合到您的工作流程中以使重复任务自动化并提高效率。

>

关键好处：

>

• 增强的效率： gulp自动化乏味的过程，使您专注于核心开发。资产降低改善了站点性能。
• > 先决条件：确保您有wordpress，node.js，npm和基本命令行熟悉度之前。
>
• Gulp的角色： Gulp处理SASS汇编，CSS缩小，图像优化和浏览器重新加载，显着加速了开发。
• >插件可扩展性：利用gulp-sass，gulp-autoprefixer和gulp-rtlcss的毛线插件来扩展功能。
>
• 实时反馈和鲁棒错误处理： gulp的手表功能提供实时更新。 防止错误停止过程。gulp-plumber>

为什么要自动？ 自动化工作流提供了很大的优势：

>消除重复任务：

用自定义的工具替换平凡的琐事。
• 节省时间：
将精力集中在关键发展方面。
• 优化性能：
缩小和资产优化增强了网站速度。
基本工具：

wordpress（本地安装）

> node.js和npm（已安装）
基本命令行技能
• 介绍Gulp

> sass文件保存触发器sass汇编并缩小CSS输出。

>

新的图像添加触发了优化和迁移到专用文件夹。

php或sass文件保存触发自动浏览器重新加载。
GULP设置

全局安装：

打开命令行，并使用NPM在全球范围内安装GULP：

1. >用

   验证安装。 您应该看到Gulp版本。

   <code class="language-bash">npm install gulp -g</code>

   >主题设置（使用下划线）：gulp -v>从underscores.me下载下划线，创建一个主题（例如，“ gulp-wordpress”），将其放置在WordPress主题目录中，并激活它。 >

2. 本地Gulp安装：使用命令行（例如，）导航到主题目录。 初始化npm：

   <code class="language-bash">npm install gulp -g</code>

   按照提示创建package.json。然后在本地安装Gulp：

   <code class="language-bash">npm init</code>

3. ES6 Promise支持： es6-promise

   <code class="language-bash">npm install gulp --save-dev</code>

>
4. 创建

   ：在主题的root目录中创建一个空文件。gulpfile.js gulpfile.js

通过GULP任务加速开发

CSS（SASS）工作流程：

>安装插件：

1. >create

   目录：

   <code class="language-bash">npm install es6-promise --save-dev</code>

   >使用您的
> file（包括WordPress stylesheet标题和目录）创建a
2. 目录。

   > sass sassstyle.scss（SASS任务）：

此任务编译了SASS，添加供应商前缀，并且可选地生成RTL样式表。

3. gulpfile.js文件观看：

   <code class="language-bash">npm install gulp-sass gulp-autoprefixer gulp-rtlcss gulp-rename --save-dev</code>

>添加手表任务以自动重新运行

>当SASS文件更改时：

>

的错误处理：sass

>

<code class="language-javascript">require('es6-promise').polyfill();
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const rtlcss = require('gulp-rtlcss');
const rename = require('gulp-rename');

gulp.task('sass', () => {
  return gulp.src('./sass/*.scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(gulp.dest('./'))
    .pipe(rtlcss())
    .pipe(rename({ basename: 'rtl' }))
    .pipe(gulp.dest('./'));
});</code>

安装

和用于改进错误处理： gulp-plumber 更新您的

任务：

gulp-plumber gulp-util

> javascript工作流：

<code class="language-javascript">gulp.task('watch', () => {
  gulp.watch('./sass/**/*.scss', gulp.parallel('sass'));
});

gulp.task('default', gulp.parallel('sass', 'watch'));</code>

sass

<code class="language-bash">npm install gulp-plumber gulp-util --save-dev</code>

>安装插件：

1. 创建：在主题root中创建一个文件以配置jshint。

   <code class="language-javascript">const plumber = require('gulp-plumber');
   const gutil = require('gulp-util');
   
   const onError = (err) => {
     console.error('An error occurred:', gutil.colors.magenta(err.message));
     gutil.beep();
     this.emit('end');
   };
   
   gulp.task('sass', () => {
     return gulp.src('./sass/*.scss')
       .pipe(plumber({ errorHandler: onError }))
       .pipe(sass())
       // ... rest of your sass task
   });</code>

2. >（JS任务）：.jshintrc此任务串联，绒毛和简化JavaScript文件。 .jshintrc记住在您的

   中加入
。

3. gulpfile.js图像优化：

   <code class="language-bash">npm install gulp-concat gulp-jshint gulp-uglify --save-dev</code>

   app.min.js functions.php安装插件：

创建图像文件夹：

创建
1. 和

   文件夹。

   <code class="language-javascript">const concat = require('gulp-concat');
   const jshint = require('gulp-jshint');
   const uglify = require('gulp-uglify');
   
   gulp.task('js', () => {
     return gulp.src('./js/*.js')
       .pipe(jshint())
       .pipe(jshint.reporter('default'))
       .pipe(concat('app.js'))
       .pipe(rename({ suffix: '.min' }))
       .pipe(uglify())
       .pipe(gulp.dest('./js'));
   });</code>

2. >（图像任务）：

   此任务优化了图像。 /images/src>更新您的/images/dist和

   >任务以包括
>任务。
3. >

   实时重新加载的gulpfile.js browsersync：

   <code class="language-bash">npm install gulp-imagemin --save-dev</code>

   >

   watch default images安装插件：

（browsersync Integration）：

1. <code class="language-javascript">const imagemin = require('gulp-imagemin');
   
   gulp.task('images', () => {
     return gulp.src('./images/src/*')
       .pipe(plumber({ errorHandler: onError }))
       .pipe(imagemin({ optimizationLevel: 7, progressive: true }))
       .pipe(gulp.dest('./images/dist'));
   });</code>

   记住将
替换为本地WordPress开发URL。
2. 该增强指南提供了一种更全面和结构化的方法，可以将吞吐物集成到您的WordPress主题开发工作流程中。 切记为高级配置选项咨询每个Gulp插件的文档。

   >

以上是WordPress主题自动化与Gulp的详细内容。更多信息请关注PHP中文网其他相关文章！