Aan de slag met Grunt

Als we het momenteel hebben over webontwikkeling, zijn er factoren die ons dwingen om afhankelijk te zijn van een groot aantal taken die we moeten uitvoeren zodra we de code hebben gemaakt, en nog veel meer als we JavaScript , aangezien er verschillende tools zijn die we nodig hebben om onze applicatie zo optimaal mogelijk te maken.
Omdat alles wat van de mens afhangt niet altijd perfect is en uit fouten bestaat, zoeken we altijd naar een manier om processen zo schoon mogelijk te bouwen en te automatiseren, aangezien er minder snel fouten worden gemaakt als we alle onze aandacht één keer op iets en dan laten we de post aan een machine over.

VERGROTEN

Hier komt het binnen gegrom, wat niets meer is dan het resultaat van die zoektocht naar automatisering en het terugdringen van fouten en arbeidsbesparing. Het werd in 2012 gemaakt en is tot op de dag van vandaag steeds populairder geworden. Het is een bijna essentieel onderdeel van elke omgeving die JavaScript als ontwikkeltaal bevat.
Wat is Grunt?Het is een hulpmiddel voor de opdrachtregel of console JavaScript die verantwoordelijk is voor het uitvoeren van taken die repetitief zijn en veel tijd in beslag nemen, bijvoorbeeld als we de code moeten verkleinen en comprimeren JavaScript, elke keer dat we een bestand wijzigen, moeten we deze twee taken uitvoeren, met gegrom dit gaat automatisch, elke keer dat we de bestanden wijzigen gegrom is belast met de uitvoering van die taken.
Dankzij dit soort functionaliteit gegrom heeft een geweldige ontvangst gevonden in de wereld van ontwikkeling, vooral degenen die hun ontwikkeling rond baseren JavaScript met omgevingen zoals Node.js o CoffeeScript, wat heeft geleid tot een grote community met meer dan 2000 plug-ins in de npm-repositories die werken met gegrom.
Webapplicaties groeien tegenwoordig niet alleen in omvang maar ook in complexiteit, wat ons ertoe brengt een hoeveelheid code te ontwikkelen en tools te bouwen die de menselijke limiet overschrijden voor uitputtende beoordeling, daarom ontstaat testgebaseerde ontwikkeling of TDD, en op dezelfde manier zijn er extra taken die niet te maken hebben met de code waarmee we onze applicatie kunnen optimaliseren.
gegrom helpt ons bij het tweede deel van de aanpak, stelt ons in staat om de tijd die we hebben om te investeren in het uitvoeren van taken te verminderen en helpt ons daarbij om te voldoen aan het principe DROOG, om onszelf niet te herhalen. Dat is waarom we moeten gebruiken gegrom om tijd te besparen en onze kans op fouten te verkleinen.
We weten al wat het is en waarom we het zouden moeten gebruiken, maar er is nog een beetje meer om over te praten gegrom, waar een van de belangrijkste dingen is om te weten welke voordelen het ons oplevert, van grotere consistentie in onze applicatie tot het benaderen van de ontwikkelaarsgemeenschap, laten we de voordelen dan wat gedetailleerder bekijken.
efficiëntieSoms denken we dat dingen handmatig doen ons de tijd bespaart om sommige tools te moeten onderzoeken en implementeren, maar het blijkt dat de verzamelde tijd per week of per maand overdreven wordt, waar we tot 4 of 5 uur kunnen verliezen, met gegrom dit wordt verminderd, want als we de taak eenmaal hebben geautomatiseerd, laten we die executies aan het eind van de dag uit onze handen.
SamenhangZoals we in het begin al zeiden, is de mens gevoelig voor fouten en daarom kunnen we deze door automatisering verminderen, gegrom Het geeft ons de mogelijkheid om alles precies zo uit te voeren dat we hebben geverifieerd dat het geen fouten bevat, waardoor de menselijke factor uit de vergelijking wordt gehaald en onze taken worden geoptimaliseerd.
effectiviteitDoor een reeks geautomatiseerde taken op te bouwen, kunnen we onze geest de problemen laten oplossen die onze aandacht echt nodig hebben, en door minder taken uit te voeren, zullen we minder moe zijn en dus effectiever zijn.
GemeenschapAls er iets is waarvan we dachten dat we het nodig hadden voor onze geautomatiseerde omgeving, dan bestaat het zeker, en dat dankzij de grote voordelen van gegrom Er is een sterke community van plug-ins gebouwd die we vele malen vrij en gratis kunnen gebruiken, waardoor we veel meer werk besparen.
Zodra we de theoretische concepten, de voordelen, redenen om het te gebruiken en andere interessante aspecten van gegromHet wordt tijd dat we alles wat we hebben geleerd in de praktijk kunnen brengen, dus laten we beginnen met het installeren van deze geweldige tool in onze omgeving.
gegrom Het is platformonafhankelijk, dus we kunnen het gebruiken op Windows, Mac en Linux, om praktische redenen zullen we tijdens deze tutorial de installatie in een omgeving zien ramenHet proces is echter niet veel anders in de andere systemen zodra aan de initiële eis is voldaan.
Node.js en zijn pakket- en modulemanager npm zijn de belangrijkste vereiste alvorens te installeren; gegrom, momenteel komen beide tools in dezelfde installatie, dus we hoeven alleen te installeren Node.js In ons systeem is dit proces heel eenvoudig en is uitgelegd in andere tutorials, maar bezoek de officiële website van het nodejs.org-project om erachter te komen hoe je het voor ons besturingssysteem kunt installeren.

VERGROTEN

Zodra we hebben gedownload en hebben Node.js draaiend op ons systeem zijn we klaar voor de volgende stap.
De installatie van gegrom het is heel eenvoudig, we zullen de tool verkrijgen! Grunt CLI, dat wil zeggen, de opdrachtregelinterface, waarmee we de console kunnen gebruiken als onze manier om aan te geven dat gegrom de uit te voeren taken. Hiervoor gaan we gebruik maken van npm en zijn repositories die altijd worden bijgewerkt naar de nieuwste stabiele versie van het project.
Om dit te doen, hoeven we alleen de volgende instructie in onze opdrachtconsole uit te voeren:

 npm install -g grunt-cli

Deze actie laat ons de tool die al is geïnstalleerd, zoals we zien in de volgende schermafbeelding van onze console.

Zoals we konden zien, was de installatie heel eenvoudig en met slechts een paar seconden is ons systeem klaar voor gebruik gegrom. Nu moeten we naar een map gaan waar een project zich bevindt waarmee we willen linken gegrom en we voeren de volgende instructie uit:

 npm installeer grunt

Dit zal ons in staat stellen om op te nemen gegrom in ons project en dus gaan gebruiken, laten we eens kijken wat de console ons vertelt wanneer we dit doen:

Onze volgende stap is nu om de bestanden te genereren pakket.json Y Gruntfile.js, beide zijn van vitaal belang voor onze toepassing, zodat we aan alle afhankelijkheden kunnen voldoen die we nodig hebben, en ook aangeven om: gegrom wat je effectief kunt doen. Deze bestanden zijn essentieel omdat ze een soort raamwerk zijn waarop: npm Y gegrom ze zullen worden ondersteund, als ze niet in ons project bestaan, zullen we problemen hebben met het gebruik van de tool.
Om de inhoud van de . te genereren pakket.json Het is voldoende voor ons om een ​​commando te gebruiken dat ons een initiële configuratie geeft, hiervoor moeten we eerst een leeg bestand maken met de naam pakket.json, is het erg belangrijk dat het twee accolades bevat {} zodat het wordt geïnterpreteerd als JSON, dan moeten we in onze console het volgende uitvoeren in dezelfde map van ons project:

 npm install --save grunt grunt-contrib-uglify

Dat geeft ons het volgende bericht in de opdrachtconsole:

Eindelijk als we ons bestand zien pakket.json We zullen zien dat het is bijgewerkt met de volgende inhoud:

Nu moeten we het bestand maken Gruntfile.js, dit is wie het zal vertellen gegrom alles wat in onze omgeving moet worden uitgevoerd, dus het is een essentieel onderdeel, de basisstructuur van dit bestand is als volgt:

 module.exports = functie (grunt) {// hier is de inhoud van onze taken};

Na de opmerking is dat we onze verschillende geplande taken kunnen plaatsen, die zullen worden gemaakt wanneer we de opdracht uitvoeren grom alle instructies die we in dit bestand hebben geplaatst, worden uitgevoerd in onze console.
Omdat we al genoeg inhoud hebben gezien, laten we het maken van geautomatiseerde taken voor een andere keer, het belangrijkste is dat we hebben begrepen dat het gegrom, wat zijn de vereisten die we nodig hebben om het te installeren en alles wat het ons biedt.
Hiermee sluiten we deze tutorial af, als we wat dieper willen gaan, kunnen we ingaan op de officiële documentatie van de tool die in het Engels is en zo wat kennis opdoen die we later in de praktijk kunnen brengen.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven