Så här använder du Grunt för att automatisera ditt arbetsflöde [Tutorials]

Jag är en stor förespråkare för automatisering eftersom det gör livet så mycket enklare. Varför spendera tid på meniala, monotona uppgifter som suger din livskraft direkt ut när du har en dator för att göra saker åt dig? Detta gäller särskilt för webbutveckling.

Många utvecklingsuppgifter kan vara en syssla. När du utvecklar kanske du vill kompilera kod, när du trycker på en utvecklingsversion kan du sammanfatta och begränsa filer, ta bort utvecklingsresurser, och så vidare. Även relativt okomplicerade som att ta bort en massa filer eller byta namn på mappar kan ta upp en stor del av vår tid.

I den här artikeln ska jag visa dig hur du kan göra ditt liv enklare genom att utnyttja den utmärkta funktionaliteten som erbjuds av Grunt, en Javascript-löpare. Jag ska vägleda dig genom hela processen, så ingen oro även om du inte är en Javascript-guide!

Mer på Hongkiat.com:

CSSMatic gör CSS enkelt för webbdesigners
Automatiserar uppgifter i Mac med mapphandlingar
Automatisera dina Dropbox-filer med åtgärder
10 appar som hjälper till att automatisera uppgifter på din Android-enhet
Hur (automatiskt) säkerhetskopierar din webbplats till Dropbox

Installera Grunt

Installera Grunt är ganska lätt eftersom det använder nodhanteraren. Det betyder att du kanske måste installera Node själv. Öppna en terminal eller en kommandotolk (jag ringer denna terminal från och med nu) och ange nmp-v.

Om du ser ett versionsnummer du har npm installerat, om du ser ett fel på "kommandot inte hittat" måste du installera det genom att gå till nodnedladdningssidan och välja vilken version du behöver.

När Node är installerad, blir Grunt en fråga om ett enda kommando utfärdat i terminalen:

npm installera -g grunt-cli

Grundläggande användning

Du kommer att använda Grunt på projekt-till-projekt-basis eftersom varje projekt kommer att ha olika krav. Låt oss starta ett projekt nu genom att skapa en mapp och navigera till den via vår terminal också.

Två filer utgör hjärtat av Grunt: package.json och Gruntfile.js. Paketfilen definierar alla tredjepartsberoende som din automation ska använda, med Gruntfile kan du styra på vilket sätt exakt dessa används. Låt oss skapa en nyfärdig paketfil med följande innehåll:

"namn": "testprojekt", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5"

Namnet och versionen är upp till dig, beroenden måste innehålla alla paket du använder. Vi gör inget för tillfället så vi ska bara se till att Grunt själv läggs till som ett beroende.

Du kanske frågar dig själv vad den snäva linjen (~) kallas en tilde gör där.

Versioner kan krävas med hjälp av reglerna från den semantiska versionen för npm. I ett nötskal:

Du anger en exakt version som 4.5.2
Du kan använda större än / mindre än att ange minsta eller maximala versionen, t.ex. > 4.0.3
Med hjälp av tilde specificeras ett versionsblock. Använder sig av ~ 1,2 anses vara 1.2.x, vilken version som helst över 1.2.0 men under 1,3

Det finns många fler sätt att specificera versioner, men det räcker för de flesta behov. Nästa steg är att skapa en Gruntfile som kommer att utföra våra automatiseringar.

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

Detta är i grunden skelettet för en Gruntfile; Det finns två intressanta platser. En plats är inuti initConfig () fungera. Här är all din projektkonfiguration. Detta kommer att innehålla saker som hantering av LESS / SASS-kompilering, minifiering av skript och så vidare.

Den andra platsen ligger under den funktionen där du anger uppgifter. Du kan se en uppgift som anges med namnet “standard”. Det är tomt för tillfället så det gör ingenting, men vi kommer att expandera senare. Uppgifter köper i huvudsak bitar och bitar från vår projektkonfiguration och utför dem.

Till exempel en uppgift som heter “skript” kan sammanfoga alla våra skript, sedan minifiera den resulterande filen och flytta den till sin slutliga plats. Dessa tre åtgärder definieras alla i projektkonfigurationen men är “dras ihop” av uppgiften. Om detta inte är klart bara oroa dig inte, jag visar dig hur det här görs.

Vår första uppgift

Låt oss skapa en uppgift som minifierar en enda javascriptfil för oss.

Det finns fyra saker vi behöver göra när vi vill lägga till en ny uppgift:

Installera en plugin om det behövs
Kräv det i Gruntfile
Skriv en uppgift
Lägg till det i en arbetsgrupp om det behövs

(1) Hitta och installera plugin

Det enklaste sättet att hitta det plugin du behöver är att skriva något så här i Google: “Minifiera javascript grunt plugin”. Det första resultatet borde leda dig till grunt-contrib-uglify-pluginet, vilket är precis vad vi behöver.

Githubsidan berättar allt du behöver veta. Installation är en enda linje i terminalen, här är vad du behöver använda:

 npm installera grunt-contrib-uglify -save-dev

Det kan hända att du måste köra det här med administrativa privilegier. Om du får något liknande npm ERR! Vänligen försök att köra kommandot igen som root / Administrator. längs vägen skriver du bara sudo före kommandot och anger ditt lösenord när du blir ombedd:

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

Det här kommandot analyserar faktiskt din package.json fil och lägger till det som en dependancy där, behöver du inte göra det manuellt.

(2) Kräver i Gruntfile

Nästa steg är att lägga till i din Gruntfile som ett krav. Jag gillar att lägga till plugins högst upp i filen, här är min fullständiga Gruntfile efter att du har lagt till grunt.loadNpmTasks ( 'grunt-contrib-uglify');.

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

(3) Skapa en uppgift för att begränsa skript

Som vi diskuterade borde detta ske inom initConfig () fungera. Github-sidan för plugin (och de flesta andra plugins) ger dig gott om information och exempel. Här är vad jag använde i mitt testprojekt.

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

Det här är ganska enkelt, jag angav scripts.js filen i mitt projekts js-katalog och destinationen för den minifierade filen. Det finns många sätt att ange källfiler, vi tar en titt på det senare.

För nu, låt oss ta en titt på hela Gruntfile efter det att detta har lagts till, för att du vet hur sakerna passar ihop.

 module.exports = funktion (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 ('default', []); ;

(4) Lägg till den här konfigurationen i en arbetsgrupp

Just nu kan du gå till din terminal och skriva grunt uglify men vi behöver uppgiftsgrupper att köra flera uppgifter senare. Vi har standarduppgiften tom, väntar bara på att något ska läggas till så låt oss ändra det till följande:

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

På detta stadium bör du kunna gå till terminalen, skriv grymta och se minifiering sker. Glöm inte att skapa en scripts.js fil självklart!

Det tog inte mycket tid att sätta upp gjorde det? Även om du är ny på allt detta och det tog dig tid att arbeta genom stegen, kommer tiden det sparar överträffa tiden som spenderas på den inom några användningar.

Sammanförande filer

Låt oss titta på sammanfattade filer och Lär dig hur du anger flera filer som ett mål längs vägen.

Sammanställning är processen att kombinera innehållet i flera filer till en enda fil. Vi behöver grunt-contrib-concat plugin. Låt oss arbeta genom stegen:

För att installera plugin-användningen npm installera grunt-contrib-concat - save-dev i terminalen. När du är klar, var noga med att lägga till den i din Gruntfile precis som innan du använder grunt.loadNpmTasks ( 'grunt-contrib-concat');.

Nästa upp är konfigurationen. Låt oss kombinera tre specifika filer, syntaxen kommer att vara bekant.

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

Koden ovan tar de tre filerna som källa och kombinerar dem i filen som anges som destination.

Det här är redan ganska kraftfullt men vad händer om en ny fil läggs till? Behöver vi komma tillbaka hit hela tiden? Naturligtvis inte, vi kan ange en hel mapp med filer för att sammanfoga.

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

Nu kommer någon javascript-fil i dev / js-mappen att slås samman i en stor fil: js / scripts.js, mycket bättre!

Nu är det dags att skapa en uppgift så att vi faktiskt kan sammanfoga några filer.

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

Det här är inte standarduppgiften längre så vi måste skriva sitt namn i terminalen när vi utfärdar grymta kommando.

 grunt mergejs

Automatisering av vår automation

Vi har redan gjort mycket framsteg men det finns mer! För när du vill sammanfoga eller begränsa måste du gå till terminalen och skriva in lämpligt kommando. Det är hög tid vi tar en titt på Kolla på kommando som kommer att göra detta för oss. Vi lär oss också att utföra flera olika uppgifter på en gång, längs vägen.

För att komma igång måste vi ta tag i Grunt-Contrib-Watch. Jag är säker på att du kan installera den och lägga till den till Gruntfile på yuor egen nu, så jag börjar med att visa dig vad jag använder i mitt testprojekt.

 titta på: scripts: files: ['dev / js / *. js'], uppgifter: ['concat', 'uglify'],,

Jag namngav en uppsättning filer att titta på “skript”, bara så jag vet vad det gör. Inom detta objekt har jag specificerat filer att titta på och uppgifter som ska köras. I föregående sammanfattande exempel tog vi samman alla filer i dev / js-katalogen.

I minifieringsexemplet minskade vi den här filen. Det är vettigt att titta på dev / js-mappen för ändringar och köra dessa uppgifter när som helst.

Som du kan se kan flera uppgifter enkelt kallas genom att skilja dem med kommatecken. De kommer att utföras i följd, först koncensationen, sedan minifiering i detta fall. Detta kan också göras med arbetsgrupper, vilket är typ av varför de finns.

Vi kan nu ändra vår standarduppgift:

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

Nu har vi två val. När du vill sammanfoga och minska dina skript kan du växla till terminalen och skriva grymta. Du kan också använda klockkommandot för att initiera titta på dina filer: grunt klocka.

Det kommer att sitta där och väntar på att du ändrar dessa filer. När du gör det, kommer det att utföra alla uppgifter som tilldelats det, fortsätt, prova.

Det är mycket bättre, ingen inmatning behövs från oss. Du kan nu arbeta bort med dina filer och allt kommer att bli snyggt gjort för dig.

Översikt

Med den rudimentära kunskapen om hur plugins kan installeras och användas och hur klockkommandot fungerar, är du redo att bli en automationsmissbrukare själv. Det finns mycket mer till Grunt än vad vi diskuterade men ingenting du inte kunde hantera på egen hand.

Använda kommandon för att sammanställa SASS, optimera bilder, autoprefixing och mer handlar bara om att följa de steg vi diskuterade och läste syntaxen som pluginet kräver.

Om du känner till några speciellt bra användningsområden för Grunt, låt oss veta i kommentarerna, vi är alltid intresserade av att höra hur du använder verktyg som Grunt!