Share
In het eerste bericht in deze serie gaf ik een snel overzicht van Grunt en in het volgende bericht ga ik je door de nodige stappen laten zien hoe het gebruik van Grunt je WordPress-ontwikkelingsvaardigheden kan verbeteren.
In het bijzonder zullen we dieper ingaan op de benodigde bestanden zoals package.json en Gruntfile.js, maar voorlopig gaan we een paar voorbeeldbestanden maken, zodat je Grunt kunt uitvoeren met je WordPress-thema of plugin-project.
Voordat u begint, kan het helpen om de inhoud te controleren die wordt vermeld in het eerste artikel van deze serie.
Zodra je helemaal bent ingepakt, ga je terug naar dit artikel en beginnen we met het maken van onze projectbestanden. Dit geeft ons uiteindelijk een overzicht van hoe het lijkt om Grunt geconfigureerd te hebben voor een bepaald project.
In het volgende artikel zullen we bekijken hoe dit specifiek voor WordPress-werk kan worden gedaan, maar we zullen ons richten op een meer generieke benadering voor nu.
Het eerste dat we zullen doen, is een maken package.json bestand in de root van het project. Voeg in dat nieuwe bestand het volgende toe:
"naam": "projectnaam", "versie": "1.0.0", "beschrijving": "Fantastisch project"
Het is niet nodig om de devDependencies object, omdat het automatisch wordt toegevoegd wanneer we Grunt-taken via de opdrachtregel installeren.
Om Grunt-taken te installeren, moet u overschakelen naar uw favoriete commandoregel. Als je een Mac gebruikt, zou dit Terminal of iTerm zijn. Als je een pc gebruikt, raad ik aan om PowerShell te gebruiken.
Navigeer eerst naar uw project hoofdmap ('cd-ontwikkelaarmap / projectmap'). Vervolgens gaan we een taak installeren om MINDER bestanden te compileren. We gaan de taak zonder grunt-bijdragen installeren, dus typ het volgende in je opdrachtregel en druk op invoeren:
npm install grunt-contrib-less --save-dev
Je zult beginnen met het zien van een aantal regels die worden afgedrukt, terwijl de taak en al zijn afhankelijkheden van npm worden gedownload. Als het eenmaal klaar is, ziet u zoiets als dit:
Nu zou je naar je kunnen gaan package.json bestand en zie grunt-contrib-less toegevoegd aan uw 'DevDependencies' object ook. Je voegt ook het versienummer toe naast de naam. Ik zou in een heel ander bericht over versienummer kunnen praten, maar weet nu dat het tilde verwijst naar de versie waarmee we momenteel werken.
Op dit punt zou u het volgende moeten zien:
"naam": "projectnaam", "versie": "1.0.0", "description": "Awesome project", "devDependencies": "grunt-contrib-less": "~ 0.9.0"
Laten we vervolgens een taak toevoegen om te kijken naar wijzigingen in onze '.minder' bestanden. We gaan de taak van grunt-contrib-watch gebruiken. Spring terug naar de opdrachtregel en klik invoeren:
npm install grunt-contrib-watch --save-dev
Nogmaals, je zou wat output op het scherm moeten zien en als het eenmaal voltooid is, zal het aan je worden toegevoegd package.json het dossier. Het zou er nu ongeveer zo uit moeten zien:
"naam": "projectnaam", "versie": "1.0.0", "description": "Awesome project", "devDependencies": "grunt-contrib-less": "~ 0.9.0", "grunt-contrib-watch": "~ 0.5.3"
Hopelijk begrijp je het nu en kun je hetzelfde proces gebruiken om andere grunt-taken toe te voegen. Gewoon een herinnering om altijd het '--Save-dev'.
Nu we een aantal Grunt-taken hebben geïnstalleerd, laten we ze gaan gebruiken. Het eerste dat we moeten doen is een maken Gruntfile.js bestand in de hoofdmap van ons project. Dit is waar we onze taken gaan specificeren en configureren.
Om dit te doen, voeg het volgende toe aan het bestand:
module.exports = functie (grunt)
Het eerste dat we moeten doen is onze taken laden zodat we ze kunnen uitvoeren. U doet dit door toe te voegen met behulp van de loadNpmTasks functie voor elke taak. Voeg alsjeblieft het volgende toe binnen de accolades:
grunt.loadNpmTasks ( 'grunt-contrib-loze');grunt.loadNpmTasks ( 'grunt-contrib-watch');
Het volgende dat we moeten doen is de configuratie instellen voor onze geïnstalleerde Grunt-taken. We moeten het gebruiken initConfig functioneer als volgt:
grunt.initConfig (pkg: grunt.file.readJSON ('package.json'),);
Nu na de komma zullen we onze configuratie toevoegen voor elke taak die we hebben geïnstalleerd. U zult gewoonlijk voorbeelden vinden van hoe elke taak in de README.md bestand in het project op GitHub. Elke taak heeft verschillende configuratie-opties, dus zorg ervoor dat u eerst de documentatie raadpleegt.
De eerste taak die we gaan configureren is de grunt-contrib-less taak. Deze zal onze compilatie samenstellen .minder bestanden in .css bestanden voor ons. U wilt een nieuwe map voor uw maken .minder bestanden en maak een nieuwe aan. Ik maak meestal een css / minder map en zet al mijn .minder bestanden daar.
Ga je gang en voeg een nieuw bestand met de naam style.less en voeg er een code in toe zoals:
een kleur: blauw; &: hover color: red;
Laten we nu teruggaan naar onze Gruntfile.js bestand en voeg het volgende toe:
minder:
opties:
paden: 'css / minder',
yuicompress: waar
,
bestanden:
'style.css': 'css / less / style.less'
Nadat u het bestand hebt opgeslagen, kunt u naar de opdrachtregel gaan en typen grom minder en druk op invoeren. Dit start de grommende taak en compileert onze .minder bestand en maak een nieuw style.css bestand in onze projecten hoofdmap.
Nu dat we een taak hebben voor het samenstellen van onze .minder bestanden, laten we er een kijktaak voor toevoegen. Wie wil naar de opdrachtregel gaan en uitvoeren grom minder elke keer nadat we wijzigingen in een bestand hebben aangebracht, toch?
Voeg na onze vorige configuratie een komma toe en daarna het volgende:
kijk maar:
minder:
bestanden: 'css / less / *. less',
taken: 'minder'
Nadat u het bestand hebt opgeslagen, keert u terug naar de opdrachtregel en typt u gegrom horloge. Dit zou het volgende moeten zien:
Dit betekent dat het Grunt-horloge wacht op eventuele wijzigingen in een van de bestanden die u in uw configuratie hebt opgegeven. Ga naar je style.less bestand en maak een verandering zoals:
een kleur: blauw; &: hover color: green;
Nadat u het bestand hebt opgeslagen, start de watch-taak en compileert u uw .minder bestanden in uw style.css het dossier. Zodra het is voltooid, blijft het die bestanden bekijken en klaar voor een nieuwe wijziging.
Omdat het actief is, hoeft u alleen nog maar een bestand te wijzigen, op te slaan en vervolgens naar uw browser te gaan om de wijzigingen te bekijken.
We hebben nu alles in huis om Grunt bij uw volgende project te gebruiken. Dit was een vrij eenvoudige installatie en ik weet zeker dat je alle mogelijke taken die je in je project kunt hebben, kunt zien. Later in de serie, ben ik van plan meer geavanceerde functies te behandelen met Grunt-achtige aangepaste taken, geneste configuratie en andere goodies.
Maar eerst zullen we kijken hoe we dit in onze WordPress-projecten kunnen opnemen.
Accentsconagua