Développer des thèmes WordPress plus rapidement avec Gulp

Cet article SitePoint fait partie d'une série parrainée par Siteground. Merci de soutenir les partenaires qui rendent le point de point possible.

rationaliser le développement de votre thème WordPress avec Gulp! Tirer parti de vos compétences avant et PHP existantes, combinées à la puissance de Gulp, permet une création efficace de thèmes de haute qualité. Bien qu'un simple éditeur de texte suffit, Gulp améliore considérablement votre flux de travail. Ce tutoriel montre comment Gulp automatise les tâches clés:

• Mise à jour des fichiers de thème PHP.
• Optimisation d'images.
• Compilant SSSS SCSS en CSS minifiée.
• combinant, débogage et minimifiant JavaScript.
• Automatisation du navigateur actualise lors des modifications du fichier.

Avantages clés de l'utilisation de Gulp pour le développement du thème WordPress:

• Automatisation: Gulp automatise les tâches répétitives, augmentant la vitesse de développement et l'efficacité.
• Optimisation: Il traite et divise les actifs (images, CSS, JavaScript), résultant en des thèmes plus petits et plus rapides.
• Amélioration du flux de travail: Automate le traitement d'image, la compilation SASS et la manipulation JavaScript, la réduction de l'effort manuel.
• Rechargement en direct: L'intégration de Gulp avec Browsersync permet des mises à jour instantanées de navigateur lorsque les fichiers sont modifiés, éliminant les rafraîchissements manuels.
• Extensibilité: Des milliers de plugins étendent les fonctionnalités de Gulp, offrant des fonctionnalités comme la libellé du code, le déploiement automatisé, et plus encore.

Comprendre Gulp:

Gulp est un système de construction basé sur JavaScript qui transforme les fichiers source en fichiers de construction optimisés. Si vous êtes nouveau dans Gulp, consultez un guide complet pour des instructions détaillées d'installation et d'utilisation. Voici un résumé rapide:

1. Installez Node.js.
2. Installez Gulp Globalement: npm install gulp-cli -g
3. Créez un dossier de projet (par exemple, mytheme) et naviguez-y: mkdir mytheme && cd mytheme
4. Initialisez votre projet: npm init

Structure du fichier de projet:

Gulp nécessite un ensemble de fichiers source (code et actifs non modifiés). Ceux-ci sont traités pour créer les fichiers de construction finaux. Votre thème WordPress réside dans /wp-content/themes/. Pour ce tutoriel, nous séparerons les fichiers source du répertoire de construction pour une meilleure organisation et sécurité.

La structure du dossier source recommandé est:

• ~/mytheme/ (Votre répertoire source, en dehors de la portée du serveur Web)
  • template/ - Fichiers de thème WordPress PHP
  • images/ - Images de thème
  • scss/ - Fichiers source SSSS SCSS
  • js/ - Fichiers source JavaScript

Installation des dépendances:

à partir de votre dossier source (~/mytheme/), installez gulp et plugins:

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

(ignorer node_modules dans votre système de contrôle de version.)

Configuration de gulp (gulpfile.js):

Créer gulpfile.js dans votre dossier source. Cet exemple démontre la copie de base et l'optimisation d'image. (L'exemple complet et plus avancé est fourni dans l'article d'origine.)

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

Tâches et flux de travail:

le gulpfile.js contiendra des tâches pour:

• Copie de fichiers PHP (gulp php)
• Traitement des images (gulp images)
• Compilation sass (gulp css)
• Traitement JavaScript (gulp js)
• exécuter toutes les tâches (gulp build)
• Recherche pour les modifications et utiliser Browsersync pour le rechargement en direct (gulp default)

Améliorations supplémentaires:

Explorez les plugins Gulp pour ajouter des tâches pour:

• php et javascript libinting.
• Génération de styles de thème à partir de package.json.
• cassant le cache.
• Déploiement automatisé.

Questions fréquemment posées (FAQ): (Celles-ci sont répondues dans l'article d'origine et sont trop étendues pour se reproduire ici.) Reportez-vous à l'article original pour des réponses détaillées.

Cette réponse révisée fournit un résumé plus concis et réorganisé de l'article d'origine, en maintenant les informations de base tout en améliorant la lisibilité et le flux. N'oubliez pas de consulter l'article d'origine pour le gulpfile.js complet et des explications détaillées de chaque tâche et plugin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!