Sådan bruger du Grunt til at automatisere din arbejdsgang [Tutorials]

Jeg er en stor fortaler for automatisering fordi det gør livet meget enklere. Hvorfor bruge tid på mærkelige, monotone opgaver, der suger din livskraft lige ud, når du har en computer til at gøre ting for dig? Dette gælder især for webudvikling.

Mange udviklingsopgaver kan være en opgave. Under udvikling kan du måske kompilere kode, når du trykker på en udviklingsversion, kan du sammenkæde og reducere filer, fjerne udvikling, kun ressourcer, og så videre. Selv forholdsvis ukomplicerede som at slette en masse filer eller omdøbe mapper kan tage en stor del af vores tid.

I denne artikel vil jeg vise dig, hvordan du kan gøre dit liv lettere ved at udnytte den fremragende funktionalitet, der tilbydes af Grunt, en Javascript-task runner. Jeg vil guide dig igennem hele processen, så ingen bekymringer, selvom du ikke er en Javascript-guide!

Mere om Hongkiat.com:

CSSMatic gør CSS nemt for webdesignere
Automatiseringsopgaver i Mac med mappehandlinger
Automatiser dine Dropbox-filer med handlinger
10 apps til at hjælpe med at automatisere opgaver på din Android-enhed
Sådan (automatisk) backup din hjemmeside til Dropbox

Installation af Grunt

Installering af Grunt er ret nemt, fordi det bruger nodepakkehåndteringen. Det betyder, at du måske også skal installere Node selv. Åbn en terminal eller en kommandoprompt (jeg skal ringe til denne terminal fra nu af) og indtaste nmp -v.

Hvis du ser et versionsnummer, du har NPM installeret, hvis du ser en "kommando ikke fundet" fejl, skal du installere den ved at gå til siden for nodedownloads og vælge den version, du har brug for.

Når Node er installeret, bliver Grunt et spørgsmål om en enkelt kommando udstedt i terminalen:

npm installer -g grunt-cli

Grundlæggende brug

Du vil bruge Grunt på projekt-til-projekt-basis, da hvert projekt vil have forskellige krav. Lad os starte et projekt nu ved at oprette en mappe og navigere til den via vores terminal.

To filer udgør hjertet af Grunt: package.json og Gruntfile.js. Pakkefilen definerer alle tredjepartsafhængigheder, som din automatisering vil bruge, Gruntfile giver dig mulighed for at kontrollere hvordan Nøjagtigt anvendes disse. Lad os nu oprette en pakkefil med bare-bones med følgende indhold:

"navn": "test-projekt", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5"

Navnet og versionen er op til dig, afhængighederne skal indeholde alle pakker, du bruger. Vi laver ikke noget for øjeblikket, så vi vil bare sørge for, at Grunt selv bliver tilføjet som en afhængighed.

Du kan måske spørge dig selv, hvad den skæve linje (~) kaldes en tilde gør der.

Versioner kan kræves ved at bruge reglerne fra den semantiske version til npm. I en nøddeskal:

Du angiver en nøjagtig version som 4.5.2
Du kan bruge større end / mindre end at angive mindste eller maksimale version som f.eks > 4.0.3
Brug af tilde angiver en versionsblok. Ved brug af ~ 1.2 anses for at være 1.2.x, Enhver version over 1.2.0, men under 1,3

Der findes mange flere måder at specificere versioner på, men det er nok for de fleste behov. Det næste skridt er at oprette en Gruntfile, som vil udføre vores automatiseringer.

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

Dette er dybest set skeletet til en Gruntfile; der er to steder af interesse. Et sted er inde i initConfig () fungere. Det er her, hvor hele din projektkonfiguration går. Dette vil omfatte ting som håndtering af LESS / SASS-kompilering, mindskelse af scripts og så videre.

Den anden placering er under den funktion, hvor du angiver opgaver. Du kan se en opgave angivet med navnet “Standard”. Det er tomt i øjeblikket, så det gør ingenting, men vi vil udvide det senere. Opgaver køber i det væsentlige bits og stykker fra vores projektkonfiguration og udfører dem.

For eksempel en opgave med navnet “scripts” kan sammenkæde alle vores scripts, derefter minificere den resulterende fil og derefter flytte den til sin endelige placering. Disse tre handlinger er alle defineret i projektkonfigurationen, men er “trukket sammen” af opgaven. Hvis dette ikke er helt klart, så rolig, så viser jeg dig, hvordan det gøres.

Vores første opgave

Lad os oprette en opgave, der minificerer en enkelt javascript-fil for os.

Der er fire ting, vi skal gøre, når vi vil tilføje en ny opgave:

Installer et plugin, hvis det er nødvendigt
Kræv det i Gruntfile
Skriv en opgave
Tilføj det til en arbejdsgruppe, hvis det er nødvendigt

(1) Find og installer plugin

Den nemmeste måde at finde det plugin du har brug for er at skrive noget som dette i Google: “minimere javascript grunt plugin”. Det første resultat skal føre dig til grunt-contrib-uglify plugin, som er lige hvad vi har brug for.

Github-siden fortæller alt hvad du behøver at vide. Installation er en enkelt linje i terminalen, her er hvad du skal bruge:

 npm installere grunt-contrib-uglify -save-dev

Det kan være nødvendigt at køre dette med administrator privilegier. Hvis du får noget lignende npm ERR! Prøv venligst at køre denne kommando igen som root / Administrator. undervejs skal du skrive sudo før kommandoen og indtaste dit kodeord, når du bliver bedt om det:

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

Denne kommando analyserer faktisk din package.json fil og tilføjer det som en afhængighed der, behøver du ikke at gøre det manuelt.

(2) Kræver i Gruntfile

Det næste trin er at tilføje i din Gruntfile som et krav. Jeg kan godt lide at tilføje plugins øverst på filen, her er min komplette Gruntfile efter tilføjelse grunt.loadNpmTasks ( 'grynt-contrib-uglify');.

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

(3) Opret en opgave til at reducere scripts

Som vi diskuterede, bør dette gøres inden for initConfig () fungere. Github-siden for plugin'et (og de fleste andre plugins) giver dig masser af information og eksempler. Her er hvad jeg brugte i mit testprojekt.

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

Dette er ret ligetil, jeg specificerede scripts.js fil i mit projekt js-bibliotek og destinationen for den minificerede fil. Der er mange måder at angive kildefiler på, vi tager et kig på det senere.

Lad os nu se det komplette Gruntfile efter at dette er blevet tilføjet for at sikre, at du ved, hvordan tingene passer sammen.

 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) Tilføj denne konfiguration til en arbejdsgruppe

Lige nu kan du gå til din terminal og skrive grunt uglify men vi skal opgaveregrupper til at køre flere opgaver senere. Vi har standardopgaven tom, bare venter på noget, der skal tilføjes, så lad os ændre det til følgende:

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

På dette stadium skal du kunne gå til terminalen, skriv grynte og se minificeringen finder sted. Glem ikke at oprette en scripts.js fil selvfølgelig!

Det tog ikke meget tid at oprette gjorde det? Selvom du er ny på alt dette, og det tog dig tid til at arbejde gennem trinene, vil den tid det sparer overgå brugen af tid på det inden for et par anvendelser.

Sammenkædning af filer

Lad os se på sammenkædningsfiler og lær hvordan du angiver flere filer som et mål langs vejen.

Sammenkædning er processen med at kombinere indholdet af flere filer i en enkelt fil. Vi har brug for grunt-contrib-concat plugin. Lad os arbejde gennem trinnene:

For at installere plugin brug npm installere grunt-contrib-concat - save-dev i terminalen. Når du er færdig, skal du sørge for at tilføje den til din Gruntfile ligesom før du bruger den grunt.loadNpmTasks ( 'grynt-contrib-concat');.

Næste op er konfigurationen. Lad os kombinere tre specifikke filer, syntaxen bliver kendt.

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

Koden ovenfor tager de tre filer, der er angivet som kilden, og kombinerer dem i den fil, der er angivet som destination.

Dette er allerede ret kraftigt, men hvad nu hvis en ny fil tilføjes? Skal vi komme tilbage her hele tiden? Selvfølgelig ikke, vi kan angive en hel mappe af filer for at sammenkæde.

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

Nu vil enhver javascript-fil i dev / js-mappen blive slået sammen i en stor fil: js / scripts.js, meget bedre!

Nu er det tid til at oprette en opgave, så vi faktisk kan sammenkoble nogle filer.

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

Dette er ikke standardopgaven længere, så vi skal skrive sit navn i terminalen, når vi udsteder grynte kommando.

 grunt mergejs

Automatisering af vores automation

Vi har allerede gjort meget fremskridt, men der er mere! For nu, når du vil sammenkæde eller reducere, skal du gå til terminalen og skrive den relevante kommando. Det er på høje tid, vi tager et kig på holde øje kommando, som vil gøre dette for os. Vi lærer også at udføre mulitple opgaver på én gang undervejs.

For at komme i gang bliver vi nødt til at gribe grunt-contrib-ur. Jeg er sikker på at du kan installere den og tilføj den til Gruntfile på yuor selv nu, så jeg begynder med at vise dig, hvad jeg bruger i mit testprojekt.

 se: scripts: files: ['dev / js / *. js'], opgaver: ['concat', 'uglify'],,

Jeg hedder et sæt af filer, der skal ses “scripts”, bare så jeg ved hvad det gør. Inden for dette objekt har jeg angivet filer til at se og opgaver, der skal køres. I det foregående sammenfattende eksempel tog vi sammen alle filerne i dev / js-biblioteket.

I minifikationseksemplet har vi mindsket denne fil. Det er fornuftigt at se dev / js-mappen til ændringer og køre disse opgaver, når der er nogen.

Som du kan se, kan flere opgaver nemt kaldes ved at adskille dem med kommaer. De vil blive udført i rækkefølge, først sammenkæden, derefter minifikationen i denne sag. Dette kan også gøres med opgavegrupper, hvilket er en slags hvorfor de eksisterer.

Vi kan nu ændre vores standardopgave:

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

Nu har vi to valg. Når du vil sammenkæde og reducere dine scripts, kan du skifte til terminalen og skrive grynte. Du kan også bruge ur-kommandoen til at starte overvågningen af dine filer: grunt ur.

Det vil sidde der og venter på, at du ændrer disse filer. Når du gør det, vil det udføre alle opgaver, der er tildelt det, gå videre, prøv det.

Det er meget bedre, ingen input er nødvendig fra os. Du kan nu arbejde væk med dine filer, og alt bliver fint udført for dig.

Oversigt

Med den rudimentære viden om, hvordan plugins kan installeres og bruges, og hvordan ur-kommandoen fungerer, er du klar til at blive en automationsmisbruger selv. Der er meget mere til Grunt end det vi diskuterede, men intet du ikke kunne håndtere alene.

Brug af kommandoer til kompilering af SASS, optimering af billeder, autoprefixing og mere er bare et spørgsmål om at følge de trin, vi diskuterede og læse den syntaks, pluginet kræver.

Hvis du kender til nogle specielt gode anvendelser til Grunt, så lad os vide det i kommentarerne, vi er altid interesserede i at høre, hvordan du bruger værktøjer som Grunt!