ワードプレステーマオートメーションを使用したワードプレステーマ

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

主要な利点：

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

ワークフローの自動化には、大きな利点があります：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   をインストールします

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

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

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

css（SASS）ワークフロー：

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

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

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

3. （SASSタスク）：このタスクはSASSをコンパイルし、ベンダーのプレフィックスを追加し、オプションでRTL StyleSheetsを生成します。 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-plumbergulp-utilタスクを更新：

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

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

sassjavaScriptワークフロー：

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

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

1. <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>

   create
：
2. テーマルートで

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

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

   gulpfile.js

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

   画像の最適化：app.min.jsfunctions.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 リアルタイムのリロード用の

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

   browsersync：

   watch default images

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

1. （browsersync Integration）：

   <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>

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

以上がワードプレステーマオートメーションを使用したワードプレステーマの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。