Grunt gebruiken om uw workflow te automatiseren [Tutorials]

Ik ben een groot voorstander van automatisering omdat het het leven zoveel eenvoudiger maakt. Waarom zou je tijd besteden aan overgevoelige, monotone taken die je levenskracht opzuigen als je een computer hebt om dingen voor je te doen? Dit geldt met name voor webontwikkeling.

Veel ontwikkeltaken kunnen een hele klus zijn. Tijdens het ontwikkelen wilt u misschien code compileren, wanneer u een ontwikkelversie pusht, kunt u bestanden samenvoegen en verkleinen, bronnen voor ontwikkelaars verwijderen, enzovoort. Zelfs relatief ongecompliceerde zoals het verwijderen van een aantal bestanden of het hernoemen van mappen kan een groot deel van onze tijd opnemen.

In dit artikel laat ik u zien hoe u uw leven gemakkelijker kunt maken door gebruik te maken van de uitstekende functionaliteit van Grunt, een Javascript taakloper. Ik zal u door het hele proces begeleiden, dus maak u geen zorgen, zelfs als u geen Javascript-wizard bent!

Meer over Hongkiat.com:

• CSSMatic maakt CSS eenvoudig voor webontwerpers
• Taken automatiseren op Mac met mapacties
• Automatiseer je Dropbox-bestanden met acties
• 10 apps om taken op je Android-apparaat te automatiseren
• Hoe (automatisch) een back-up te maken van uw website naar Dropbox

Grunt installeren

Het installeren van Grunt is vrij eenvoudig omdat het de knooppuntpakketbeheerder gebruikt. Dit betekent dat u mogelijk ook het knooppunt zelf moet installeren. Open een terminal of een opdrachtprompt (ik bel deze terminal vanaf nu) en voer deze in nmp -v.

Als je een versienummer ziet dat je hebt NPM Als u een "opdracht niet gevonden" -fout ziet, moet u deze installeren door naar de downloadpagina van het knooppunt te gaan en de gewenste versie te selecteren.

Nadat Node is geïnstalleerd, is het krijgen van Grunt een kwestie van een enkele opdracht die is uitgegeven in de terminal:

npm install -g grunt-cli

Standaard gebruik

Je zult Grunt op projectbasis gebruiken, omdat elk project andere eisen zal stellen. Laten we nu een project starten door een map te maken en er ook via onze terminal naartoe te navigeren.

Twee bestanden vormen het hart van Grunt: package.json en Gruntfile.js. Het pakketbestand definieert alle afhankelijkheden van derden die uw automatisering zal gebruiken, de Gruntfile geeft u controle hoe precies deze worden gebruikt. Laten we nu een kale pakketbestand maken met de volgende inhoud:

"naam": "test-project", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5",

De naam en versie is aan u, de afhankelijkheden moeten alle pakketten bevatten die u gebruikt. Op dit moment doen we niets, dus we zorgen ervoor dat Grunt zelf als afhankelijkheid wordt toegevoegd.

Je vraagt ​​je misschien af ​​wat die kronkelende lijn (~), genaamd een tilde, daar doet.

Versies kunnen vereist zijn met behulp van de regels van de semantische versie voor npm. In een notendop:

• U geeft een exacte versie op zoals 4.5.2
• U kunt groter dan / kleiner dan gebruiken om een ​​minimale of maximale versie aan te geven, zoals > 4.0.3
• Het gebruik van de tilde specificeert een versieblok. Gebruik makend van ~ 1.2 het wordt beschouwd als 1.2.x, elke versie boven 1.2.0 maar onder 1.3

Er zijn nog veel meer manieren om versies te specificeren, maar dit is genoeg voor de meeste behoeften. De volgende stap is het maken van een Grunt-bestand dat onze automatisering zal uitvoeren.

 module.exports = functie (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('standaard', []); ; 

Dit is eigenlijk het skelet voor een Grunt-bestand; er zijn twee bezienswaardigheden. Eén locatie bevindt zich in de initConfig () functie. Dit is waar al uw projectconfiguraties naartoe gaan. Dit omvat zaken als omgaan met LESS / SASS-compilatie, verkleinen van scripts, enzovoort.

De tweede locatie bevindt zich onder die functie waar u taken opgeeft. U kunt een taak zien met de opgegeven naam “standaard”. Het is op dit moment leeg dus het doet niets, maar daarover later meer. Taken staan ​​stuk voor stuk in de wachtrij voor onze projectconfiguratie en voeren ze uit.

Bijvoorbeeld een taak met de naam “scripts” kan al onze scripts aaneenschakelen, het resulterende bestand verkleinen en het vervolgens naar de uiteindelijke locatie verplaatsen. Deze drie acties zijn allemaal gedefinieerd in de projectconfiguratie, maar zijn dat wel “samengetrokken” door de taak. Als dit niet duidelijk is, maak je dan nog geen zorgen, ik laat je zien hoe dit wordt gedaan.

Onze eerste taak

Laten we een taak maken die een enkel JavaScript-bestand verkleint voor ons.

Er zijn vier dingen die we moeten doen wanneer we een nieuwe taak willen toevoegen:

• Installeer indien nodig een plug-in
• Vereist het in het Gruntbestand
• Schrijf een taak
• Voeg het indien nodig toe aan een taakgroep

(1) Plug-in zoeken en installeren

De eenvoudigste manier om de plug-in te vinden die u nodig hebt, is door zoiets als dit in Google te typen: “minify javascript grunt plugin”. Het eerste resultaat zou je naar de plug-in-grunt-contrib-uglify moeten leiden die precies is wat we nodig hebben.

De Github-pagina vertelt u alles wat u moet weten. Installatie is een enkele regel in de terminal, hier is wat u moet gebruiken:

 npm install grunt-contrib-uglify --save-dev 

Mogelijk moet u dit uitvoeren met beheerdersrechten. Als je zoiets krijgt npm ERR! Probeer deze opdracht opnieuw uit te voeren als root / beheerder. typ tijdens de opdracht gewoon sudo voor de opdracht en voer je wachtwoord in wanneer daarom wordt gevraagd:

 sudo npm install grunt-contrib-uglify --save-dev 

Deze opdracht parseert je eigen package.json bestand en voegt het daar toe als dependance, dat hoeft u niet handmatig te doen.

(2) Vereisen in Gruntfile

De volgende stap is om uw Grunt-bestand toe te voegen als een vereiste. Ik vind het leuk om plug-ins aan de bovenkant van het bestand toe te voegen, dit is mijn volledige Grunt-bestand na het toevoegen grunt.loadNpmTasks ( 'grunt-contrib-verlelijken);.

 module.exports = functie (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('standaard', []); ; 

(3) Maak een taak voor het verkleinen van scripts

Zoals we hebben besproken, moet dit binnen de initConfig () functie. De Github-pagina voor de plug-in (en de meeste andere plug-ins) geeft u voldoende informatie en voorbeelden. Dit is wat ik heb gebruikt in mijn testproject.

 uglify: build: src: 'js / scripts.js', dest: 'js / scripts.min.js' 

Dit is vrij eenvoudig, ik heb het opgegeven scripts.js bestand in de js-map van mijn project en de bestemming voor het verkleinde bestand. Er zijn veel manieren om bronbestanden op te geven, daar zullen we later naar kijken.

Laten we voorlopig het volledige Gruntbestand bekijken nadat dit is toegevoegd, zodat je weet hoe dingen bij elkaar passen.

 module.exports = functie (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('standaard', []); ; 

(4) Voeg deze configuratie toe aan een taakgroep

Op dit moment kun je naar je terminal gaan en typen grom uglify maar we hebben taakgroepen nodig om meerdere taken later uit te voeren. We hebben de standaardtaak leeg, wachtend op het toevoegen van iets, dus laten we het aanpassen aan het volgende:

 grunt.registerTask ('standaard', ['uglify']); 

In dit stadium zou je naar de terminal moeten kunnen gaan, typen knorren en zie de ontmijning plaatsvinden. Vergeet niet om een ​​te maken scripts.js bestand natuurlijk!

Dat heeft niet veel tijd gekost om het op te zetten? Zelfs als je nieuw bent in dit alles en je tijd hebt gekost om de stappen te doorlopen, zal de tijd die het bespaart de tijd die het kostte, binnen enkele keren worden overschreden..

Samenvoegen van bestanden

Laten we kijken naar het aaneenschakelen van bestanden en leer hoe u meerdere bestanden als doel kunt specificeren onderweg.

Aaneenschakeling is het proces waarbij de inhoud van meerdere bestanden wordt gecombineerd in één bestand. We hebben de grunt-contrib-concat-plugin nodig. Laten we de stappen doorlopen:

Om de plug-in te installeren gebruik npm install grunt-contrib-concat --save-dev in de terminal. Als je klaar bent, voeg je het toe aan je Grunt-bestand, net als voor het gebruik grunt.loadNpmTasks ( 'grunt-contrib-concat');.

De volgende is de configuratie. Laten we drie specifieke bestanden combineren, de syntaxis zal bekend zijn.

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js', ,, 

De bovenstaande code neemt de drie als bron opgegeven bestanden en combineert ze in het bestand dat als bestemming wordt opgegeven.

Dit is al behoorlijk krachtig, maar wat als een nieuw bestand wordt toegevoegd? Moeten we hier de hele tijd terugkomen? Natuurlijk niet, we kunnen een hele map met bestanden opgeven om aaneen te schakelen.

 concat: dist: src: 'dev / js / *. js "], dest:' js / scripts.js ',,, 

Nu wordt elk javascript-bestand in de map dev / js samengevoegd in één groot bestand: js / scripts.js, veel beter!

Nu is het tijd om een ​​taak te maken, zodat we sommige bestanden kunnen aaneenschakelen.

 grunt.registerTask ('mergejs', ['concat']); 

Dit is niet meer de standaardtaak, dus we moeten de naam ervan in de terminal typen wanneer we de knorren commando.

 gegrom mergejs 

Onze automatisering automatiseren

We hebben al veel vooruitgang geboekt, maar er is meer! Voor nu, wanneer u wilt samenvoegen of verkleinen, moet u naar de terminal gaan en de juiste opdracht typen. Het is hoog tijd dat we naar de kijk maar commando dat dit voor ons zal doen. We zullen ook leren hoe je meerdere taken tegelijkertijd kunt uitvoeren.

Om op gang te komen, moeten we grunt-contrib-watch grijpen. Ik ben er zeker van dat je het kunt installeren en het nu kunt toevoegen aan het Grunt-bestand, dus ik zal je laten zien wat ik in mijn testproject gebruik..

 bekijk: scripts: files: ['dev / js / *. js'], tasks: ['concat', 'uglify'],, 

Ik noemde een aantal bestanden om te bekijken “scripts”, zodat ik weet wat het doet. Binnen dit object heb ik gespecificeerde bestanden om te bekijken en taken uit te voeren. In het vorige aaneenschakelingsvoorbeeld hebben we alle bestanden in de directory dev / js samengevoegd.

In het voorbeeld van de minificatie hebben we dit bestand verkleind. Het is logisch om de map dev / js te bekijken voor wijzigingen en deze taken uit te voeren wanneer deze zich voordoen.

Zoals u kunt zien, kunnen meerdere taken gemakkelijk worden aangeroepen door ze te scheiden met komma's. Ze worden achtereenvolgens uitgevoerd, eerst de aaneenschakeling en vervolgens de minificatie in dit geval. Dit kan ook met taakgroepen worden gedaan, wat een beetje is waarom ze bestaan.

We kunnen nu onze standaardtaak wijzigen:

 grunt.registerTask ('standaard', ['concat', 'uglify']); 

Nu hebben we twee keuzes. Wanneer u uw scripts wilt samenvoegen en verkleinen, kunt u overschakelen naar de terminal en typen knorren. U kunt ook de opdracht watch gebruiken om het bekijken van uw bestanden te starten: gegrom horloge.

Het zal daar zitten wachten tot u deze bestanden gaat aanpassen. Als je dat eenmaal doet, zal het alle toegewezen taken uitvoeren, ga je gang, probeer het eens.

Dat is veel beter, geen input van ons nodig. Je kunt nu wegwerken met je bestanden en alles zal goed voor je worden gedaan.

Overzicht

Met die rudimentaire kennis van hoe plug-ins kunnen worden geïnstalleerd en gebruikt en hoe de watch-opdracht werkt, ben je helemaal klaar om zelf een automatiseringsverslaafde te worden. Er is veel meer bij Grunt dan wat we hebben besproken, maar niets dat je zelf niet aankan.

Het gebruik van opdrachten voor het compileren van SASS, het optimaliseren van afbeeldingen, automatisch ophogen en meer, is slechts een kwestie van het volgen van de stappen die we hebben besproken en het lezen van de syntaxis die de plug-in vereist.

Als je een aantal bijzonder goede gebruiken weet voor Grunt, laat het ons dan weten in de reacties, we zijn altijd geïnteresseerd om te horen hoe je tools als Grom gebruikt!