Share
In het eerste deel van deze serie gaf ik een snel overzicht van Grunt. Ik heb ook de verschillende technologieën besproken die nodig zijn om te gebruiken. Daarna ging ik een beetje in de Gruntfile en de taken erin.
Nu wil ik het hebben over hoe het gebruik van Grunt jouw ontwikkeling kan verbeteren voor zowel WordPress-thema's als plug-ins.
Mijn favoriete onderdeel over het gebruik van Grunt en npm is dat het bij het opzetten van je project de afhankelijkheden van je project zelfdocumenteert. Dit is geweldig voor ontwikkelingsteams en open-sourceprojecten. Wie wil er toch documentatie schrijven over hoe je een werkruimte instelt, toch??
Eerst moet u een package.json-bestand in uw project hebben. U moet de naam, versie en beschrijving van het project instellen. We zullen hier in het volgende bericht meer gedetailleerd op ingaan, maar hier is een voorbeeld:
"naam": "projectnaam",
"version": "1.0.0",
"description": "Fantastisch project"
Zodra u deze instelling hebt ingesteld, hoeft u alleen maar een grunt-plug-in toe te voegen --save-dev tot het einde en het zal de plug-in toevoegen aan uw package.json-bestand onder devDependencies. Bijvoorbeeld, als ik het wilde toevoegen grunt-contrib-horloge plugin in mijn project zou ik het volgende commando uitvoeren:
npm install grunt-contrib-watch --save-dev
U zult zien dat de plug-in aan uw is toegevoegd node_modules map en dit zou er ook toe moeten leiden dat uw package.json-bestand er als volgt uitziet:
"naam": "projectnaam",
"version": "1.0.0",
"description": "Fantastisch project", "devDependencies":
"grunt-contrib-watch": "~ 0.5.x"
Terwijl je andere Grunt-plug-ins installeert en toevoegt --save-dev tot het einde ziet u ze toegevoegd onder de devDependencies voorwerp.
Waarom is dit nuttig? Zoals ik al eerder zei, dit is het zelf documenteren van de afhankelijkheden van uw projecten. Zodra u al uw plug-ins hebt geïnstalleerd en aan uw pakket.json-bestand hebt toegevoegd, kan nu een ander teamlid of andere bijdrager worden uitgevoerd npm installeren en ze zullen alles installeren wat nodig is voor het project.
Je kunt dit vrij eenvoudig testen door je hele album te verwijderen node_modules map en actief npm installeren jezelf. U ziet alles wat u instelt automatisch geïnstalleerd.
[note] U wilt het toevoegen node_modules map naar uw .gitignore bestand, zodat je je repository niet plat krijgt. [/ note]
Ik gebruik veel vergelijkbare Grunt-plug-ins bij elk project, maar degene die ik altijd installeer, is degene die ik eerder heb genoemd, grunt-contrib-watch. Deze plug-in voert de projectbestanden uit en start alle taken die u hebt gespecificeerd voor dat bestand of bestandstype.
Een voorbeeld is voor al uw JavaScript-bestanden. Wanneer u een van deze wijzigingen aanbrengt en deze opslaat, kunt u Grunt een JSLint-, concat- en minify-taak laten uitvoeren. Je kunt ook een bestelling opgeven, dus wanneer een ervan slaagt, wordt de volgende afgetrapt. Als er een faalt, dan doodt het de hele takenreeks.
CodeKit heeft een vergelijkbare functie, maar het voert al uw taken uit. Als u bijvoorbeeld een SASS- of LESS-bestand wijzigt, start het niet alleen die taken, maar worden ook uw JavaScript-bestandstaken gestart. De Grunt-kijktaak geeft u meer controle over welke taken worden uitgevoerd wanneer specifieke bestanden of bestandstypen worden gewijzigd.
Samen met de Grunt-taken voor de plug-ins die u installeert, kunt u uw eigen aangepaste taken maken. Heel vaak wanneer ik een project opzet, heb ik 3 taken die ik heb opgezet, standaard, opstelling, en bouwen.
De standaardtaak is de taak die wordt uitgevoerd terwijl u wordt uitgevoerd knorren vanaf de opdrachtregel. Heel vaak zal ik mijn wachttaak standaard in kaart brengen. Je kunt elke taak die je wilt uitvoeren ook toevoegen.
De setup-taak die ik instel, doet gewoonlijk de dingen die alleen de eerste keer hoeven gebeuren om uw projectinstellingen in te stellen. Vaak gebruik ik Bower om bibliotheken van derde partijen zoals Bootstrap te laden en die naar beneden te trekken en vervolgens een kopieertaak uit te voeren om een aantal bestanden naar mijn project te verplaatsen en vervolgens een eerste compilatie van de LESS- en JavaScript-bestanden te starten.
De build-taak wordt gebruikt voor de dingen die moeten worden gedaan voordat u uw project vrijgeeft of distribueert. Ik voer dit altijd uit om ervoor te zorgen dat alles aaneengeschakeld, verkleind en gecomprimeerd is. Een goed voorbeeld is het uitvoeren van grunt-contrib-imagemin om alle afbeeldingen in uw project te optimaliseren. Een ander voorbeeld is het gebruik van de grunt-contrib-compress om een zip-bestand van je thema te maken, zodat het gemakkelijk te installeren is via de WordPress-beheerder.
Grunt is zonder twijfel een geweldig hulpmiddel voor teams van ontwikkelaars. Van het automatisch documenteren van de afhankelijkheden van uw project tot het maken van maatwerk, met Grunt wordt u efficiënt. Gebruik Grunt om verschillende taken in uw project te automatiseren, zodat u zich kunt concentreren op het bouwen van uw WordPress-thema of -plug-in.
Accentsconagua