Een inleiding tot het gebruik van prieel met WordPress

De meeste webprojecten van vandaag beginnen met of bevatten bibliotheken van derden. Als u aan een WordPress-thema werkt, is de kans groot dat u de HTML5 Boilerplate, Bootstrap of Foundation gebruikt. De meeste van deze projecten zijn beschikbaar op GitHub en zijn toegankelijk via Bower.

In deze serie ga ik je voorstellen aan Bower, vertellen hoe het je WordPress-thema of plugin-ontwikkeling kan verbeteren en je laten zien hoe je het in je project kunt instellen.

Wat is Bower?

Wat is Bower precies? Volgens de projectsite:

Bower is een pakketbeheerder voor het web. Het biedt een generieke, onopgemaakte oplossing voor het probleem van front-end pakketbeheer, terwijl het pakketafhankelijkheidsmodel wordt blootgelegd via een API die kan worden geconsumeerd door een meer eigenzinnige buildstack..

Wat dat in feite betekent, is dat Bower u een manier geeft om te specificeren welke bibliotheken (of pakketten) uw project nodig heeft voor ontwikkeling. Het behandelt ook wat andere projecten die projecten ook nodig hebben en verwerken dat automatisch voor u.

Bower is afhankelijk van Node.js en NPM om te werken, dus u moet ervoor zorgen dat deze op uw computer zijn geïnstalleerd. Een andere vereiste voor het werken met Bower is dat de opslagplaatsen op GitHub moeten staan ​​en aan het Bower-register moeten worden toegevoegd..

Bibliotheken van derden

Zoals ik al eerder zei, is de kans groot dat u een externe bibliotheek in uw project gebruikt. Je bent waarschijnlijk naar GitHub gegaan en hebt het project gedownload en de juiste bestanden in je project geplaatst. U zou moeten spoelen en herhalen voor elke bibliotheek die uw project nodig heeft.

Met Bower kunt u deze externe bibliotheken eenvoudig installeren (of downloaden) zonder naar GitHub te hoeven gaan. Alle bibliotheken die u installeert met Bower worden in een geplaatst bower_components map in de hoofdmap van uw project. Dit alles kan worden gedaan via de opdrachtregel, dus het is niet nodig om heen en weer te bladeren naar een browser.

Afhankelijkheden beheren

Een andere leuke functie van Bower is dat het afhankelijkheden voor u beheert. Het kijkt naar alle pakketten die uw project nodig heeft en de pakketten die ze nodig hebben. Elk pakket kan een specifieke versie van een ander pakket vereisen, zoals een specifieke versie van jQuery.

Laten we dus zeggen dat uw project jQuery vereist. U beslist ook om zowel Bootstrap als FitVids te gebruiken met uw project. Bower zal kijken naar alle verschillende pakketten en alle versies van pakketten waarop ze vertrouwen en erachter komen welke versie voor iedereen nodig is. Als er conflicten zijn, laat Bower het u weten.

Wie toch al de vereiste versies van alles wil bijhouden?

Geen Project Bloat

Ik heb al eerder gezegd dat alle pakketten die u installeert in een worden geplaatst bower_components map. Je hebt tijdens je lokale ontwikkeling toegang tot alles in die map, maar je hoeft het niet toe te voegen aan de repository van je project.

Stel dat u Bootstrap wilt gebruiken voor de lay-out van uw thema en dat u Sass gebruikt om uw stylesheets te compileren in de style.css het dossier. U kunt het bootstrap-sass-officiële project gebruiken en eenvoudig het. Importeren bootstrap.scss bestand in uw bestaande project .SCSS bestanden.

Ik zal in meer detail ingaan op hoe dit in een andere post te doen.

Conclusie

Ik heb gesproken over wat Bower is en hoe het je helpt om met externe bibliotheken in je project te werken. Ik heb ook gesproken over hoe het je kan helpen om je afhankelijkheden te beheren en wat bloat in de repository van je project te verwijderen.

In de volgende post ben ik van plan om meer te praten over hoe het je WordPress-ontwikkeling kan verbeteren. Of u nu de enige ontwikkelaar bent of met een groter team werkt, u zult zien hoe dit voor u ten goede komt.

Middelen

  • HTML5 Boilerplate
  • bootstrap
  • fundament
  • Prieel
  • Node.js
  • NPM
  • GitHub
  • Bower Registry
  • FitVids
  • bootstrap-sass-official