Gulpでより速くWordPressテーマを開発します

このSitePointの記事は、Sitegroundが後援するシリーズの一部です。 SitePointを可能にしてくれたパートナーをサポートしてくれてありがとう。 ワードプレステーマ開発をgulpで合理化します！ 既存のフロントエンドとPHPスキルを活用して、Gulpの力と組み合わせて、高品質のテーマを効率的に作成できます。単純なテキストエディターで十分ですが、Gulpはワークフローを大幅に向上させます。このチュートリアルでは、Gulpが主要なタスクを自動化する方法を示しています

PHPテーマファイルの更新。

画像の最適化。

SASS SCSSをマイニフィスCSSにコンパイルします。

JavaScriptを組み合わせたり、デバッグしたり、縮小する
• ファイルの変更時にブラウザの自動リフレッシュ。
• WordPressテーマ開発にGulpを使用することの重要な利点：
• オートメーション：
• Gulpは、繰り返しのタスクを自動化し、開発速度と効率を高めます。

最適化：

アセット（画像、CSS、javaScript）を処理および模倣して、より小さく、より速いロードテーマをもたらします。 ワークフローの改善：

画像処理、SASSコンピレーション、およびJavaScriptの処理、手動の努力の削減。

• ライブリロード：browsersyncとのgulpの統合ファイルが変更されたときにインスタントブラウザの更新を有効にし、手動のリフレッシュを排除します。
拡張可能性：
• 何千ものプラグインがgulpの機能を拡張し、コードの糸くず、自動展開などを提供します。
ガルプの理解：
• Gulpは、ソースファイルを最適化されたビルドファイルに変換するJavaScriptベースのビルドシステムです。 Gulpを初めて使用する場合は、詳細なインストールと使用手順については、包括的なガイドを参照してください。 簡単な要約を次に示します：
• node.js. をインストールします
Gulpをグローバルにインストールする：
• プロジェクトフォルダー（例えば、
）を作成して、それに移動します：

プロジェクトの初期化：

プロジェクトファイル構造：
2. GULPには、ソースファイルのセット（変更されていないコードとアセット）が必要です。 これらは、最終的なビルドファイルを作成するために処理されます。 あなたのWordPressのテーマはnpm install gulp-cli -g内にあります。 このチュートリアルでは、ソースファイルをビルドディレクトリから分離して、より良い組織とセキュリティを分離します。
推奨されるソースフォルダー構造は次のとおりです

• ~/mytheme/（ソースディレクトリ、Webサーバーの範囲外）
  • template/ - WordPress PHPテーマファイル
  • images/ - テーマ画像
  • scss/ - SASS SCSSソースファイル
  • js/ - javaScriptソースファイル

依存関係のインストール：

ソースフォルダー（

）から、gulpとプラグインをインストールします：~/mytheme/

<code class="language-bash">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</code>

（バージョン制御システムで

を無視してください。）node_modules

gulp configuration（gulpfile.js）：

ソースフォルダーに

を作成します。 この例は、基本的なファイルのコピーと画像の最適化を示しています。 （元の記事では、完全で高度な例が提供されています。）gulpfile.js

<code class="language-javascript">// Gulp.js configuration
'use strict';

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

// ... (rest of the configuration) ...</code>

タスクとワークフロー：

には次のタスクが含まれます gulpfile.js

phpファイルのコピー（

）
• 画像の処理（gulp php）
SASS（
• ）gulp imagesのコンパイル
処理JavaScript（
• ）gulp css すべてのタスクを実行する（
）
• gulp jsライブリロードに変更を監視し、browsersyncを使用する
• gulp buildさらなる機能強化：
• gulp defaultgulpプラグインを探索して、次のタスクを追加します

phpおよびjavascriptの糸くず。

キャッシュバスト。

自動展開。

• よくある質問（FAQS）：
• （これらは元の記事で回答されており、ここで再現できないほど広すぎます。）詳細な回答については、元の記事を参照してください。 package.jsonこの改訂された応答は、元の記事のより簡潔で再編成された要約を提供し、読みやすさと流れを改善しながらコア情報を維持します。 各タスクとプラグインの完全な説明と詳細な説明については、元の記事を参照してください。

以上がGulpでより速くWordPressテーマを開発しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。