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

Cet article fait partie d'une série créée en partenariat avec SiteGround . Merci de soutenir les partenaires qui rendent SitePoint possible.

Le développement de thèmes simples de WordPress est en partie responsable de son succès. Un développeur connaissant parfaitement le langage frontal et PHP peut consulter l'excellent Codex et se lancer dans leur prochain chef-d'œuvre.

Le développement de thèmes est possible avec un simple éditeur de texte et un ensemble graphique, mais les outils modernes peuvent révolutionner votre flux de travail. Dans ce tutoriel, nous utiliserons Gulp pour exécuter des tâches telles que:

• copier des fichiers de thème PHP plus récents
• optimiser les images
• en compilant les fichiers Sass SCSS en un seul fichier, minifié Fichier CSS
• fusionnant les fichiers JavaScript commandés, supprimant les instructions de débogage et minifiant
• actualisant automatiquement le navigateur lorsque les fichiers sont mis à jour.

Qu'est-ce que Gulp?

Gulp est un système de construction basé sur JavaScript qui prend vos fichiers source. et les transforme en versions optimisées. Si vous êtes nouveau dans Gulp, veuillez vous reporter à Une introduction à Gulp.js pour obtenir les instructions complètes d’installation et d’utilisation. Résumé des étapes initiales:

1. Installez Node.js .
2. Installez Gulp globalement: npm installez gulp-cli -g
3. Créez un dossier de projet et naviguez-vous mkdir mytheme suivi de cd mytheme .
4. Initialisez votre projet avec npm: npm init

Vos fichiers de projet

Un Gulp (ou tout autre ) le processus de construction nécessite un ensemble de fichiers source d'origine contenant votre code et vos images non modifiés. Celles-ci sont traitées, manipulées et simplifiées pour créer des fichiers de génération .

WordPress est installé dans un dossier de serveur Web, peut-être / var / www / sur une installation Linux / Apache. Votre thème WordPress doit être défini dans son propre sous-dossier dans / wp-content / themes / . Par conséquent, le dossier contenant nos fichiers construits pourrait être / var / www / wp-content / themes / mytheme / . Au minimum, les thèmes nécessitent deux fichiers:

• une feuille de style style.css contenant les métadonnées dans les commentaires en haut et
• un fichier modèle index.php .

La plupart des thèmes contiennent beaucoup plus de fichiers pour présenter des articles, des pages, des index, des catégories, des balises et des erreurs. Les parties partielles telles que les en-têtes et les pieds de page sont généralement définies comme des fichiers image et JavaScript.

Vous pouvez placer vos fichiers source quelque part dans le dossier mytheme . Cela peut être utile si vous distribuez un thème à télécharger, à modifier et à créer par d’autres. Cependant, dans le cadre de ce didacticiel, nous allons utiliser un dossier source inaccessible depuis le serveur Web, par exemple. ~ / mytheme / . Les avantages de cette approche:

1. Vos fichiers source de thème peuvent être gérés dans un dossier et un référentiel uniques sans polluer la construction ou les dossiers WordPress.
2. Le dossier de construction final ne contient que les fichiers nécessaires. .
3. Gulp, ses plug-ins et d’autres applications ne figurent pas dans le dossier des thèmes. Ils ne peuvent pas être copiés accidentellement sur un serveur de production, ce qui est inutile et peut avoir des implications en matière de sécurité.

Le dossier du projet source nécessite quatre sous-dossiers supplémentaires:

• modèle – les fichiers de thème PHP WordPress [19659005] images – images utilisées par votre thème
• scss – Fichiers source SSS SCSS
• js – un nombre quelconque de sources JavaScript distinctes côté client.

Installer les dépendances

Dans le dossier source ( ~ / mytheme / ), exécutez la commande npm suivante pour installer Gulp et tous les plug-ins en tant que dépendances de développement:

 npm installer --save-dev autoprefixer navigateur-sync css-mqpacker cssnano gulp gulp-concat gulp-deporder gulp-imagemin gulp-nouveau gulp-postcss gulp-sass gulp-concat gulp-dépouiller gulp-imagemin gulp-nouveau gulp-postcss gulp-sass gulp-bande assets 

Un dossier node_modules contenant le module cod sera créé. e. Cela devrait être omis de votre système de contrôle de code source (pour les utilisateurs de Git, ajoutez node_modules à votre fichier .gitignore ).

Créer un fichier de configuration Gulp

Créer un nouveau Le fichier de configuration gulpfile.js se trouve à la racine du dossier source. Ajoutez ce code pour commencer:

 'use strict' ;

 const 

  
  dir = {
    src:  'src /' ,
    build:  '/ var / www / wp-content / themes / mytheme /' 
  },

  
  gulp =  require  ( 'gulp' ),
  gutil =  require  ( 'gulp-util' ),
  newer =  require  ( 'gulp-newer' ),
  imagemin =  require  ( 'gulp-imagemin' ),
  sass =  require  ( 'gulp-sass' ),
  postcss =  require  ( 'gulp-postcss' ),
  deporder =  require  ( "gulp-deporder" ),
  concat =  require  ( 'gulp-concat' ),
  stripdebug =  require  ( 'gulp-strip-debug' ),
  uglify =  require  ( 'gulp-uglify' )
;


 var  browsersync =  false ;



 const  php = {
  src: dir.src +  'modèle / ** / *. php' ,
  build: dir.build
};


gulp.task ( 'php' () => {
   retour  gulp.src (php.src)
    .pipe (plus récent (php.build))
    .pipe (gulp.dest (php.build));
}); 

Nous définissons nos dossiers par défaut, nous chargeons des modules, puis nous créons une tâche php pour copier les fichiers nouveaux et mis à jour dans le dossier du thème. La tâche a été volontairement simplifiée pour copier les fichiers source PHP tels quels.

Enregistrez gulpfile.js et créez quelques fichiers .php dans le modèle source . dossier. Entrez ensuite la commande suivante:

 gulp php 

Tous les fichiers seront copiés dans le dossier de thèmes ( / var / www / wp-content / themes / mytheme / ).

Image Traitement

Les fichiers d’image peuvent souvent être compressés davantage à l’aide d’outils tels que imagemin . Ajoutez le code suivant à gulpfile.js :

 const  images = {
  src: dir.src +  'images / ** / *' ,
  build: dir.build +  'images /' 
};


gulp.task ( 'images' () => {
   retour  gulp.src (images.src)
    .pipe (plus récent (images.build))
    .pipe (imagemin ())
    .pipe (gulp.dest (images.build));
}); 

Enregistrez puis exécutez les images de gulp . Les versions compressées de toute image nouvelle ou mise à jour dans le dossier source images sont copiées dans / var / www / wp-content / themes / mytheme / images / .

Sass Compilation [19659010] WordPress ne peut pas utiliser les fichiers Sass directement; vous devez compiler dans un seul fichier style.css . Ajoutez le code suivant à gulpfile.js :

 var  css = {
  src: dir.src +  'scss / style.scss' ,
  watch: dir.src +  'scss / ** / *' ,
  build: dir.build,
  sassOpts: {
    outputStyle:  'imbriqué' ,
    imagePath: images.build,
    précision:  3 ,
    errLogToConsole:  true 
  },
  processeurs: [
     require  ( 'postcss-assets' ) ({
      loadPaths: [ 'images /' ],
      basePath: dir.build,
      baseUrl:  '/ wp-content / themes / wptheme /' 
    }),
     require  ( 'autoprefixer' ) ({
      navigateurs: [ '2 dernières versions'  '> 2%' ]
    }),
     require  ( 'css-mqpacker' ),
     require  ( 'cssnano' )
  ]
};


gulp.task ( 'css' [ 'images' ]() => {
   retour  gulp.src (css.src)
    .pipe (sass (css.sassOpts))
    .pipe (postcss (css.processors))
    .pipe (gulp.dest (css.build))
    .pipe (browsersync? browsersync.reload ({stream:  true }): gutil.noop ());

Lancez cette nouvelle tâche avec gulp css vers:

• lancez d'abord la tâche Gulp images (des images peuvent être requises dans votre CSS)
• compilez le Code Sass dans le fichier source scss / style.scss à l'aide du compilateur rapide LibSass
• utilisez PostCSS pour ajouter automatiquement des références de ressource, appliquer des préfixes d'éditeur, pack les requêtes de médias ensemble, et réduisent le code CSS obtenu
• qui délivre la feuille de style dans /var/www/wp-content/themes/mytheme/style.css .
• force un Browsersync . Rechargement CSS (plus d'informations à ce sujet plus tard).

Le fichier source scss / style.scss doit inclure les métadonnées du thème WordPress au sommet, par exemple

 @  import [19659056] '_ base' ; 
 @  import   '_ formes' ; 
 @  import   "_ tables" ; 
 @  ] import   'composants / _wid get1 '; 

Il est important d'utiliser / *! comme première ligne. Cela garantit que le minificateur cssnano ne supprime pas le commentaire et ne rend pas votre thème inutilisable.

Le plug-in postcss-assets vous permet de faire référence à des éléments d'image en utilisant un code tel que:

 ] .widget1  {
   largeur : largeur ( 'myimage.jpg' ); 
   hauteur : hauteur ( 'myimage.jpg' ); 
   arrière-plan -image : résoudre ( 'myimage.jpg' ); 
} 

Vous pouvez également insérer des images en ligne avec codage Base64 automatique:

 .widget2  {
   background-image : en ligne ( 'myimage.jpg' ); 
} 

Traitement du JavaScript

Ajoutez le code suivant à gulpfile.js :

 const  js = {
  src: dir.src +  'js / ** / *' ,
  build: dir.build +  'js /' ,
  nom du fichier:  'scripts.js' 
};


gulp.task ( 'js' () => {

   retour  gulp.src (js.src)
    .pipe (deporder ())
    .pipe (concat (js.filename))
    .pipe (stripdebug ())
    .pipe (uglify ())
    .pipe (gulp.dest (js.build))
    .pipe (browsersync? browsersync.reload ({stream:  true }): gutil.noop ());

}); 

Exécutez cette nouvelle tâche avec gulp js pour:

• traiter tous les fichiers JavaScript du dossier source js
• pour les classer correctement. Ajoutez des commentaires en haut de vos fichiers JavaScript pour déclarer des dépendances, par exemple. // requiert: lib1.js ou // requiert: config.js lib1.js .
• concaténer dans un seul fichier
• supprimer toutes les instructions de débogage et de consignation de la console [19659005] réduisez le code
• et indiquez le code obtenu dans le fichier /var/www/wp-content/themes/mytheme/js/scripts.js .
• force a Browsersync Rechargement CSS (plus à ce sujet plus tard).

Tout exécuter

Plutôt que d’appeler chaque tâche séparément, nous pouvons ajouter le code suivant à gulpfile.js :

 gulp.task ([19459035)] 'build' [ 'php'  'css'  'js' ]] 

Vous pouvez maintenant utiliser . ] gulp build pour exécuter les tâches php js css et en parallèle. (Remarque images est une dépendance de la tâche css . Vous n'avez donc pas besoin de l'appeler directement.)

Activez la surveillance des fichiers et la navigation par navigateur

Votre flux de travail peut être radicalement amélioré:

1. Laisser Gulp surveiller les modifications de fichier avant de lancer la tâche appropriée.
2. Rechargement automatique des fichiers CSS et JavaScript lorsqu'ils sont modifiés (sans actualisation de la page).
3. Actualisation automatique de la page lorsqu'un fichier de modèle est modifié.

Premièrement, nous devons définir une tâche browsersync dans gulpfile.js . Cela créera un serveur proxy sur votre serveur Web exécutant WordPress sur localhost (modifiez ce domaine ou utilisez une adresse IP si nécessaire):

 const  syncOpts = {
  proxy:  'localhost' ,
  fichiers: dir.build +  '** / *' ,
  open:  false ,
  notifiez:  false ,
  ghostMode:  false ,
  ui: {
    port:  8001 
  }
};



gulp.task ( 'browsersync' () => {
   if  (browsersync ===  false ) {
    browsersync =  require  ( 'browser-sync' ). create ();
    browsersync.init (syncOpts);
  }
}); 

Ajoutez maintenant une tâche watch pour exécuter Browsersync, surveillez les modifications de fichiers et exécutez la tâche appropriée:

 gulp.task ( 'watch' [ 'browsersync' ]() => {

  
  gulp.watch (php.src, [ 'php' ]browsersync? browsersync.reload: {});

  
  gulp.watch (images.src, [ "images" ]);

    
  gulp.watch (css.watch, [ 'css' ]);

  
  gulp.watch (js.src, [ 'js' ]);

Enfin, ajoutez une tâche default Gulp qui exécute une construction initiale et démarre la tâche watch :

 gulp.task ( 'default' [ 'build'  'watch' ]) 

Exécutez maintenant gulp à partir de la ligne de commande. La console affichera une sortie comprenant des lignes similaires à:

 [BS] Proxying: http: // localhost
[BS] URL d'accès:
 -------------------------------------
       Local: http: // localhost: 3000
    Externe: http://192.168.1.99:3000
 -------------------------------------
          UI: http: // localhost: 8001
 Interface utilisateur externe: http://192.168.1.99:8001
 -------------------------------------
[BS] Regarder des fichiers ...

Plutôt que de charger votre site de développement de http: // localhost / entrez l'adresse http: // localhost: 3000 / ou l'URL externe . si vous regardez depuis un autre appareil. Votre site WordPress se chargera comme avant, mais Gulp surveillera les modifications et appliquera les mises à jour immédiatement.

Cliquez Ctrl / Cmd + C lorsque vous souhaitez arrêter le traitement de Gulp.

Enhance Further

Nous avons couvert le Les bases du développement de thèmes WordPress avec Gulp, mais il existe plusieurs milliers de plug-ins pour vous aider dans votre flux de travail.

Quelques heures d’écriture sur les tâches Gulp pourraient vous faire gagner de nombreux jours de traitement manuel à long terme.

Craig est un consultant web britannique indépendant qui a créé sa première page pour IE2.0 en 1995. Depuis ce temps, il préconise les normes, l'accessibilité et les meilleures techniques HTML5. Il a créé des spécifications d'entreprise, des sites Web et des applications en ligne pour des entreprises et organisations telles que le Parlement britannique, le Parlement européen, le Département de l'énergie et des changements climatiques, Microsoft, etc. Il a écrit plus de 1 000 articles pour SitePoint et vous le trouverez @craigbuckler .