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:

   npm install gulp -g

   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

   npm install gulp -g

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

   npm init

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

   npm install gulp --save-dev

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:

   npm install es6-promise --save-dev

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.

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

Recherche de fichiers:

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

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

Gestion des erreurs avec gulp-plumber:

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

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

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

Mettez à jour votre tâche sass:

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

JavaScript Workflow:

1. Installer les plugins:

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

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.

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

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

Optimisation d'image:

1. Installer le plugin:

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

   npm install gulp-imagemin --save-dev

   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:

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

   npm install browser-sync --save-dev

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!