Utiliser Bower pour améliorer le développement WordPress

Bower est vraiment génial pour les équipes car il auto-documente fondamentalement vos dépendances frontales. À cette fin, il est très facile de les mettre à jour à mesure que votre projet évolue. C'est formidable pour le processus de construction de votre projet à la fois localement et sur le serveur. Vous pouvez également utiliser Bower pour créer vos propres référentiels privés et les réutiliser dans des projets..

Dans le post précédent, j'ai couvert ce qu'est Bower et certaines de ses caractéristiques. Dans cet article, je vais parler des avantages de l’utilisation de Bower et de la façon dont cela peut améliorer votre développement WordPress..

C'est auto-documentant

Comme je l'ai déjà mentionné, Bower est vraiment génial pour les équipes car il auto-documente vos dépendances frontales. Si vous avez lu mon précédent article sur Grunt, c'est presque exactement comme ça. Lorsque vous installez un paquet via Bower, vous tapez bower installe le nom du paquet, tout ce que vous avez à faire est d’ajouter ce qui suit à la fin --enregistrer. Ceci ajoutera ce paquet à la liste des dépendances dans le projet. bower.json fichier.

Supposons que vous souhaitiez inclure Bootstrap dans votre thème WordPress et que vous souhaitiez utiliser le .scss fichiers au cours de votre processus de construction. Vous voudrez utiliser le projet bootstrap-sass-official et l'installer via Bower. 

Voici comment vous le feriez,

  1. Ouvrez votre outil de commande en ligne de choix
  2. Accédez au dossier racine de votre projet.
  3. Tapez bower installe bootstrap-sass-official --save et cliquez sur "Retour" (ou "Entrée")

Si tout est installé correctement, vous devriez voir deux choses, une nouvelle bower_components dossier et boostrap-sass-official ajouté dans votre bower.json fichier.

Vous voudrez le faire pour chaque paquet que vous voulez utiliser avec votre projet. Une fois que vous avez terminé, tout autre collègue ou coéquipier sera en mesure d'installer facilement tous les packages nécessaires au projet. Tout ce qu'ils doivent faire est de taper bower installer et tous les packages seront téléchargés et installés pour le projet.

Bien entendu, cette technique ne se limite pas aux frameworks frontend tels que Bootstrap. Il existe un référentiel complet de packages pouvant être interrogés. Cela peut rendre la gestion des dépendances de votre projet WordPress cette beaucoup plus facile.

Mise à jour des dépendances

Encore une fois, il n’est pas rare que des paquets soient mis à jour souvent, n’est-ce pas? C’est un autre endroit où Bower devient utile.

Maintenant que toutes les dépendances de votre projet sont documentées et installées, il est vraiment facile de mettre à jour ces paquetages lorsque les mises à jour sont disponibles. Tout ce que vous devez faire est de taper mise à jour de bower et Bower lira toutes vos dépendances dans votre bower.json déposer et aller voir s'il y a des mises à jour à descendre.

Pour savoir si des mises à jour sont disponibles, Bower vérifie la version étiquetée de votre ordinateur. bower.json fichier et en vérifiant la dernière balise sur le référentiel GitHub du projet. Vous pouvez afficher ces versions marquées en consultant la page des versions, comme les versions de Boostrap Sass..

Pour en savoir plus sur la signification des versions marquées, vous devriez vérifier le versioning sémantique. C’est ce que la plupart des projets enregistrés dans Bower utilisent pour leurs versions. Il est donc utile de comprendre la signification des chiffres..

Processus de construction

Les packages installés via Bower ne sont nécessaires que pour la compilation ou la compilation, vous n'avez pas besoin de les ajouter à votre référentiel. le bower_components dossier est à peu près un dossier temporaire, je suggère donc également de l'ajouter à votre .gitignore déposer aussi bien dans le référentiel git de votre projet afin de ne pas les ajouter.

Si vous avez un serveur de compilation ou une intégration continue configurée pour votre projet, vous voudrez vous assurer que vous exécutez une bower installer au début de votre construction. Une fois que toutes vos autres tâches sont exécutées, vous pouvez vider le bower_components dossier ou assurez-vous d'exécuter un mise à jour de bower à chaque nouvelle construction.

Si vous utilisez Grunt pour vos tâches de construction, il existe un plugin Grunt appelé grunt-bower-task pouvant exécuter un bower installer pour vous.

Dépôts privés

Vous pouvez également utiliser Bower pour créer vos propres référentiels privés. Cela peut être très utile pour la réutilisation du code dans plusieurs projets. Supposons que vous utilisez un cadre standard ou personnalisé que vous utilisez pour chaque projet. Vous pouvez l'enregistrer sous son propre référentiel GitHub, puis l'intégrer à vos autres projets à l'aide de Bower..

Vous devez vous assurer de l’inscrire sur le registre public Bower pour pouvoir le supprimer. Ne vous inquiétez pas, si quelqu'un n'y a pas accès, ils ne pourront pas l'abattre..

Conclusion

Dans cet article, j'ai parlé des moyens par lesquels Bower peut aider votre développement WordPress. Je me suis concentré sur la documentation et la mise à jour des dépendances de votre projet. J'ai également évoqué l'utilisation de Bower dans le cadre de votre processus de construction et l'utilisation de vos propres référentiels privés..

Dans le prochain article, je vais expliquer comment installer Bower dans votre prochain projet ou dans votre projet existant. Je partagerai également quelques méthodes avancées d'utilisation dans le cadre de votre projet..

Ressources

  • Tonnelle
  • bootstrap-sass-official
  • Nouveautés du SASS Boostrap
  • Versioning sémantique
  • grunt-bower-tâche
  • Grognement
  • Enregistrement de paquets Bower
  • Bower Registry