Gulpの自動(dòng)化電力でWordPressテーマ開発を合理化します！ このチュートリアルでは、Gulpをワークフローに統(tǒng)合して、繰り返しタスクを自動(dòng)化し、効率を高める方法を示しています。

主要な利點(diǎn)：

• 効率の向上： gulpは退屈なプロセスを自動(dòng)化し、コア開発に集中するために自由になります。資産の削減により、サイトのパフォーマンスが向上します
前提條件：
• WordPress、node.js、npm、および基本的なコマンドラインの親しみを開始する前に、
gulpの役割：
• gulpは、SASSコンピレーション、CSSの縮小、畫像最適化、ブラウザのリロードを処理し、開発を大幅に加速します。 プラグインの拡張可能性：
機(jī)能を拡張するために
• 、、などのgulpプラグインをレバレッジします。gulp-sass gulp-autoprefixergulp-rtlcssリアルタイムのフィードバックと堅(jiān)牢なエラー処理：
gulpの時(shí)計(jì)機(jī)能は、リアルタイムの更新を提供します。
• エラーがプロセスの停止を防ぎます。 gulp-plumber
なぜ自動(dòng)化するのか？

ワークフローの自動(dòng)化には、大きな利點(diǎn)があります：

繰り返しのタスクを排除します：

ありふれた雑用をカスタマイズされたツールに置き換えます。

• 時(shí)間を節(jié)約：重要な開発の側(cè)面にエネルギーを集中します。
• パフォーマンスの最適化：縮小と資産の最適化ウェブサイトの速度を向上させます
• 必須ツール：

wordpress（ローカルにインストール）

node.jsおよびnpm（インストール）

基本的なコマンドラインスキル

• gulpの紹介
Gulpは、CSS圧縮、SASSコンピレーション、畫像最適化、ブラウザの更新などの時(shí)間のかかるタスクを自動(dòng)化するJavaScriptタスクランナーです。 イベントに基づいてアクションをトリガーします：

sassファイル保存SASSコンピレーションとマニーム化されたCSS出力をトリガーします。 新しい畫像の追加が最適化と専用フォルダーへの再配置をトリガーします。

PHPまたはSASSファイルは、トリガー自動(dòng)ブラウザーリロードを保存します

gulp setup
• グローバルインストール：

コマンドラインを開き、NPMを使用してグローバルにGULPをインストールします：

でインストールを確認(rèn)します。 Gulpバージョンが表示されます

1. テーマのセットアップ（Underscoresを使用）：アンダースコアからアンダースコアをダウンロードしてください。 >

   npm install gulp -g

   gulp -vローカルGULPのインストール：

   コマンドラインを使用してテーマディレクトリに移動(dòng)します（例：
）。 npmを初期化：

2. npm install gulp -g

   プロンプトに従ってpackage.jsonを作成します。次に、gulpをローカルにインストールします：

   npm init

3. ES6 PROMISTサポート：es6-promisepolyfill：

   をインストールします

   npm install gulp --save-dev

4. creategulpfile.js：テーマのルートディレクトリに空のgulpfile.jsファイルを作成します。

GULPタスクによる開発の加速

css（SASS）ワークフロー：

1. プラグインのインストール：

   npm install es6-promise --save-dev

2. createdirectory：sassファイル（wordpress styleSheetヘッダーと目次を含む）を使用してsassディレクトリを作成します。 style.scss

3. （SASSタスク）：このタスクはSASSをコンパイルし、ベンダーのプレフィックスを追加し、オプションでRTL StyleSheetsを生成します。 gulpfile.js

   npm install gulp-sass gulp-autoprefixer gulp-rtlcss gulp-rename --save-dev

ファイルウォッチング：

SASSファイルが変更されたときにタスクを自動(dòng)的に再実行するためにウォッチタスクを追加してください：

sassエラー処理

：

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('./'));
});

改善されたエラー処理については、インストールgulp-plumberおよび：

gulp-plumbergulp-utilタスクを更新：

gulp.task('watch', () => {
  gulp.watch('./sass/**/*.scss', gulp.parallel('sass'));
});

gulp.task('default', gulp.parallel('sass', 'watch'));

sassjavaScriptワークフロー：

npm install gulp-plumber gulp-util --save-dev

プラグインのインストール：

1. 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
   });

   create
：
2. テーマルートで

   ファイルを作成して、jshint。>> .jshintrc .jshintrc

（jsタスク）：
3. このタスクは、javascriptファイルを連結(jié)、糸くず、統(tǒng)合します。

   gulpfile.js

   npm install gulp-concat gulp-jshint gulp-uglify --save-dev

   畫像の最適化：app.min.jsfunctions.php

プラグインをインストール：

1. イメージフォルダーの作成：

   および

   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'));
   });

   フォルダーを作成します。

2. /images/src（畫像タスク）：/images/distこのタスクは畫像を最適化します

3. および

   タスクを更新して、タスクを含める。 gulpfile.js リアルタイムのリロード用の

   npm install gulp-imagemin --save-dev

   browsersync：

   watch default images

プラグインをインストール：

1. （browsersync Integration）：

   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'));
   });

2. をローカルのWordPress開発URLに置き換えることを忘れないでください。 この強(qiáng)化されたガイドは、ワードプレステーマ開発ワークフローにGulpを統(tǒng)合するための、より包括的で構(gòu)造化されたアプローチを提供します。 高度な構(gòu)成オプションについては、各Gulpプラグインのドキュメントを參照してください。

以上がワードプレステーマオートメーションを使用したワードプレステーマの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。