Automatisation du thème WordPress avec Gulp

rationaliser le développement de votre thème WordPress avec l'automatisation de Gulp! Ce tutoriel montre comment intégrer Gulp dans votre flux de travail pour automatiser les tâches répétitives et augmenter l'efficacité.

Avantages clés:

• Efficacité améliorée: Gulp automatise des processus fastidieux, vous libérant de vous concentrer sur le développement de base. La minification des actifs améliore les performances du site.
• Prérequis: Assurez-vous d'avoir WordPress, Node.js, NPM et la familiarité de base de commande avant de démarrer.
• Le rôle de Gulp: Gulp gère la compilation SASS, la minification CSS, l'optimisation de l'image et le rechargement du navigateur, accélérant considérablement le développement.
• Extensibilité du plugin: Tirez parti des plugins Gulp comme gulp-sass, gulp-autoprefixer et gulp-rtlcss pour étendre la fonctionnalité.
• Feedback en temps réel et gestion des erreurs robustes: La fonctionnalité de montre de Gulp fournit des mises à jour en temps réel. gulp-plumber empêche les erreurs d'arrêter le processus.

Pourquoi automatiser?

L'automatisation de votre flux de travail offre des avantages importants:

• Élimine les tâches répétitives: Remplacez les tâches banales par des outils personnalisés.
• Gave le temps: Focus votre énergie sur les aspects critiques du développement.
• Optimise les performances: Minification et optimisation des actifs améliorent la vitesse du site Web.

Outils essentiels:

• wordpress (installé localement)
• node.js et npm (installé)
• Compétences de base en ligne de commande

Présentation de Gulp

Gulp est un coureur de tâche JavaScript automatisant des tâches longues telles que la compression CSS, la compilation SASS, l'optimisation d'image et le rafraîchissement du navigateur. Il déclenche des actions en fonction des événements:

• SASS SAVE SAVE déclenche la compilation SASS et la sortie CSS minifiée.
• L'ajout d'image déclenche l'optimisation et la réinstallation dans un dossier dédié.
• Le fichier PHP ou SASS enregistre le déclencheur des rechargements de navigateur automatique.

Gulp Configuration

1. Installation globale: Ouvrez votre ligne de commande et installez Gulp Globalement à l'aide de NPM:

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

   Vérifiez l'installation avec gulp -v. Vous devriez voir la version gulp.

2. Configuration du thème (en utilisant des sous-oreurs): Télécharger des sous-oreurs à partir de sous-ore. >

3. Installation locale du gulp: Accédez à votre répertoire de thème à l'aide de la ligne de commande (par exemple, ). Initialiser NPM: cd ~/www/wordpress/wp-content/themes/gulp-wordpress

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

   Suivez les invites pour créer package.json. Installez ensuite Gulp localement:

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

4. ES6 PRARMES SUPPORT: Installez le es6-promise polyfill:

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

5. Créer gulpfile.js: Créer un fichier vide gulpfile.js dans le répertoire racine de votre thème.

accélérer le développement avec les tâches gulp

CSS (SASS) Workflow:

1. Installer les plugins:

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

2. Créer sass répertoire: Créer un répertoire sass avec votre fichier style.scss (y compris l'en-tête de feuille de style WordPress et une table de contenu).

3. gulpfile.js (tâche SASS): Cette tâche compile Sass, ajoute des préfixes des fournisseurs et génère éventuellement des feuilles de styles RTL.

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

Recherche de fichiers:

Ajoutez une tâche de surveillance pour réinstaller automatiquement la tâche sass lorsque les fichiers SASS changent:

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

Gestion des erreurs avec gulp-plumber:

Installez gulp-plumber et gulp-util pour améliorer la gestion des erreurs:

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

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

Mettez à jour votre tâche sass:

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

JavaScript Workflow:

1. Installer les plugins:

   <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. Créer .jshintrc: Créer un fichier .jshintrc dans la racine de votre thème pour configurer Jshint.

3. gulpfile.js (tâche js): Cette tâche concaténe, peluches et diminue les fichiers javascript.

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

   N'oubliez pas d'enquareue app.min.js dans votre functions.php.

Optimisation d'image:

1. Installer le plugin:

   <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. Créer des dossiers d'image: Créer /images/src et /images/dist dossiers.

3. gulpfile.js (tâche d'image): Cette tâche optimise les images.

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

   Mettez à jour vos tâches watch et default pour inclure la tâche images.

BrowSersync pour le rechargement en temps réel:

1. Installer le plugin:

   <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. gulpfile.js (intégration BrowSersync):

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

N'oubliez pas de remplacer 'http://localhost:8888/wordpress/' par votre URL de développement WordPress local.

Ce guide amélioré fournit une approche plus complète et structurée pour intégrer Gulp dans votre flux de travail de développement de thème WordPress. N'oubliez pas de consulter la documentation pour chaque plugin Gulp pour les options de configuration avancées.

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!