Skip to content

Republic / Artiklar /

Artikeln uppdaterad 2020-05-26.
Skriven av Christofer Sandin.

För­bered dig för front end-arbete med Node.js, npm och Grunt/​Gulp

Idag är vår vardag som utveck­lare lite mer kom­plicer­ad än för tio år sedan. Det finns mängder med ramverk, verk­tyg och best prac­tices att använ­da. Frå­gan är om man i mån­ga fall kanske till och med använ­der några fler än nöd­vändigt, men det är kanske ett ämne för en annan artikel.

Det behövs en bal­ans mel­lan de hjälpmedel som används för att göra varda­gen enklare och hur myck­et kom­plex­itet det tillför. Vi försök­er att hit­ta en bra bal­ans och går inte all in med alla tänkbara hjälpmedel utan försök­er använ­da så kallade task run­ners som Grunt och Gulp för att automa­tis­era sak­er som att kom­pil­era Sass till CSS och slå ihop och mini­fiera JavaScript. Det är exem­pel på sak­er vi gör var­je dag vi arbe­tar, och i alla pro­jekt vi arbe­tar med, och där­för läm­par sig dessa bra för att automa­tis­era. Att automa­tis­era ska­pan­det av en fav­i­con är däre­mot sådant som görs en gång per pro­jekt så där tyck­er jag att kom­plex­iteten inte trum­far den vinst det innebär…

Då och då behöver man bör­ja om med en ny dator och det här är en liten guide för hur man gör datorn redo för att hop­pa till­ba­ka in i pro­jek­ten och fort­sät­ta arbeta.

Det innebär i vårt fall att vi kom­mer installera de kom­po­nen­ter som behövs för att använ­da Git, Sass, Grunt (eller Gulp) på en Mac för att kun­na fort­sät­ta job­ba i befintli­ga projekt. 

Först kom­mer vi installera allt och se till att allt fly­ter, men det finns även några kor­ta sty­ck­en i slutet med en liten lath­und för dig som behöver upp­dat­era och läg­ga till kom­po­nen­ter med både npm.

Pla­nen är att installera föl­jande hjälpmedel och sedan klona ett befintligt pro­jekt och köra igång med utveck­lin­gen lokalt på en ny maskin:

  • Git
  • Node.js och npm
  • Grunt / Gulp
  • Sass

När det­ta är gjort en gång, räck­er det med sista steget Klona ett pro­jekt, kör npm install och sedan grunt watch” för kom­mande projekt.

Då kör vi.

1. Installera Git

Git används för att ver­sion­shantera fil­er. Det finns ett instal­la­tion­spro­gram att lad­da hem på Git:s webb­plats. Bara att lad­da hem och installera som vilken app som helst…

Sedan är det vet­tigt att kon­fig­ur­era Git med hjälp av föl­jande kommandon:

git config --global user.name "John Doe"
git config --global user.email "john.doe@republic.se"

2. Installera Node.js

Dags för Node.js som är det pro­gram­språk som Grunt och Gulp och de mod­uler som körs är byg­gt i. För att installera går du till sidan Down­loads, lad­dar hem din ver­sion och kör installationsprogrammet.

Nu finns node till­gäng­ligt i ter­mi­nalen och även dess pakethanter­are npm.

För att slip­pa köra sudo innan vi installer­ar de oli­ka hjälpmedlen på Mac OS X måste man ändra var npm sparar alla glob­ala paket. Kör föl­jande i ter­mi­nalen så ändrar du plat­sen som paketen sparas på till kat­a­lo­gen /.node_modules_global och installera om npm där:

cd  
mkdir .node_modules_global
npm config set prefix=$HOME/.node_modules_global
npm install npm --global

Sista steget är att läg­ga till den nya sökvä­gen i din /.bashrc så att Bash hit­tar rätt (eller /.zshrc om du kör Zsh).Öppna filen och lägg till föl­jande rad:

export PATH="$HOME/.node_modules_global/bin:$PATH"

3. Installera Grunt och Gulp

I ett pro­jekt används en så kallad task run­ner för att köra våra kom­man­don. Vi kör van­ligtvis med Gulp men har även pro­jekt där vi använ­der Grunt. Det spelar egentli­gen inte så stor roll, men det finns lite oli­ka för- och nack­de­lar som vi inte behöver gå in på här. För säk­er­hets skull installer­ar vi båda två. Dessa paket installeras glob­al, dvs de är till­gäng­li­ga över­allt på din dator och inte knut­na till något speci­fikt projekt.

Först så installer­ar vi Grunts Com­man­do Line Inter­face (CLI) glob­alt med hjälp av:

npm install -g grunt-cli

Sedan kan du ver­i­fiera att Grunts CLI funger­ar genom att skri­va grunt .

Är du inte i en kat­a­log som är för­beredd för Grunt får du ett fel i form med Fatal error: Unable to find local grunt. Det beror i så fall på att vi inte har installer­at Grunt för pro­jek­tet och för att du sak­nar en Gruntfile.js – men det ändrar vi på när vi klonar ett projekt.

Sedan så installer­ar vi Gulps Com­man­do Line Inter­face (CLI) glob­alt med hjälp av:

npm install -g gulp-cli

På sam­ma sätt kan du tes­ta att Gulp funger­ar genom att skri­va gulp. Och på sam­ma sätt sak­nas troli­gen en lokal instal­la­tion av gulp och en gulpfile.js. Men som sagt, det ändrar vi på snart, först skall vi bara installera Sass.

4. Installera Sass (val­fritt)

Sass var ursprung­li­gen skriv­et i pro­gram­mer­ingsspråket Ruby. Men det snab­baste sät­tet att köra Sass är att installera en ver­sion av Sass som istäl­let baseras på Lib­Sass (skriv­et i C/C++) .

Det görs i så fall via npm install för var­je pro­jekt (som beskrivs i näs­ta steg) men det kan vara bra att även installera Ruby-ver­sio­nen av Sass om det finns äldre pro­jekt som använ­der sig av den.

Sass för Ruby kan installeras i ter­mi­nalen på Mac OS X genom att skriva:

gem install sass

Skulle du få fel här kan du behö­va köra kom­man­dot som supe­ruser och ver­i­fiera med ditt lösenord, dvs:

sudo gem install sass

Efter instal­la­tio­nen kan du kol­la så att du har rätt ver­sion installer­ad genom att köra:

sass -v

5. Klona ett pro­jekt, kör npm install och sedan grunt watch

Nu har vi en lokal miljö som är redo att bör­ja arbe­ta i. Dags att klona ett pro­jekt och sät­ta igång. Det kan du anti­n­gen göra i ett pro­gram som Tow­er eller via kommandoraden.

cd /Sites/
mkdir projectname
git clone user@your-git-repo-domain.com/reponame projectname
cd projectname

Van­ligtvis finns det inte några Node-mod­uler med i repot, utan dessa installer­ar man för var­je pro­jekt. Här förut­sät­ter vi att det redan finns en fil som het­er package.json upp­satt och klar i pro­jek­tet och då är det bara att köra:

npm install

och vän­ta medan alla kom­po­nen­ter lad­das hem.

Sedan finns det troli­gen även en fil som het­er Gruntfile.js om man använ­der Grunt i pro­jek­tet. Så nu när allt är klart kan man bara köra grunt för att köra alla de så kallade tasks som är med i stan­dard­körnin­gen och sedan:

grunt watch

för att beva­ka Sass och JavaScript-fil­er och kom­pil­era dessa xvid ändringar.

Är det i stäl­let ett pro­jekt där man kör Gulp är processen snarlik. Kol­la efter filen gulpfile.js och kör den genom gulp respek­tive gulp watch.

7. Överkurs

Här är en liten lista med de van­li­gaste kom­man­dona för npm.

Installera och avin­stallera lokala mod­uler med npm i projekt

Medan grunt-cli installeras glob­alt som vi gjorde ovan är det gan­s­ka vet­tigt att installera Grunt och övri­ga mod­uler i var­je projekt. 

Alla npm mod­uler finns för övrigt på www​.npmjs​.com och speci­fi­ka plu­g­ins till Grunt finns på grun​tjs​.com/​p​l​ugins respek­tive Gulp på gulpjs​.com/​p​l​ugins.

Installera genom:

npm install grunt --save-dev

och avin­stallera genom:

npm uninstall grunt

Installera och avin­stallera glob­ala mod­uler med npm

På sam­ma sätt funger­ar det att avin­stallera glob­ala paket genom att häga på flag­gan -g:

npm uninstall -g grunt-cli

Lista vil­ka glob­ala mod­uler du har installerat

npm list --global --depth=0

Upp­dat­era dina glob­ala npm moduler

Då och då kan det vara bra att se över sina glob­ala npm mod­uler och upp­dat­era dessa.

Kol­la vil­ka som har upp­da­teringar genom:

npm outdated -g

och sedan upp­dat­era dessa genom att skriva

npm update -g