Förbered dig för front end-arbete med Node.js, npm och Grunt/Gulp
Idag är vår vardag som utvecklare lite mer komplicerad än för tio år sedan. Det finns mängder med ramverk, verktyg och best practices att använda. Frågan är om man i många fall kanske till och med använder några fler än nödvändigt, men det är kanske ett ämne för en annan artikel.
Det behövs en balans mellan de hjälpmedel som används för att göra vardagen enklare och hur mycket komplexitet det tillför. Vi försöker att hitta en bra balans och går inte all in med alla tänkbara hjälpmedel utan försöker använda så kallade task runners som Grunt och Gulp för att automatisera saker som att kompilera Sass till CSS och slå ihop och minifiera JavaScript. Det är exempel på saker vi gör varje dag vi arbetar, och i alla projekt vi arbetar med, och därför lämpar sig dessa bra för att automatisera. Att automatisera skapandet av en favicon är däremot sådant som görs en gång per projekt så där tycker jag att komplexiteten inte trumfar den vinst det innebär…
Då och då behöver man börja om med en ny dator och det här är en liten guide för hur man gör datorn redo för att hoppa tillbaka in i projekten och fortsätta arbeta.
Det innebär i vårt fall att vi kommer installera de komponenter som behövs för att använda Git, Sass, Grunt (eller Gulp) på en Mac för att kunna fortsätta jobba i befintliga projekt.
Först kommer vi installera allt och se till att allt flyter, men det finns även några korta stycken i slutet med en liten lathund för dig som behöver uppdatera och lägga till komponenter med både npm.
Planen är att installera följande hjälpmedel och sedan klona ett befintligt projekt och köra igång med utvecklingen lokalt på en ny maskin:
- Git
- Node.js och npm
- Grunt / Gulp
- Sass
När detta är gjort en gång, räcker det med sista steget “Klona ett projekt, kör npm install och sedan grunt watch” för kommande projekt.
Då kör vi.
1. Installera Git
Git används för att versionshantera filer. Det finns ett installationsprogram att ladda hem på Git:s webbplats. Bara att ladda hem och installera som vilken app som helst…
Sedan är det vettigt att konfigurera Git med hjälp av följande 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 programspråk som Grunt och Gulp och de moduler som körs är byggt i. För att installera går du till sidan Downloads, laddar hem din version och kör installationsprogrammet.
Nu finns node tillgängligt i terminalen och även dess pakethanterare npm.
För att slippa köra sudo innan vi installerar de olika hjälpmedlen på Mac OS X måste man ändra var npm sparar alla globala paket. Kör följande i terminalen så ändrar du platsen som paketen sparas på till katalogen /.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ägga till den nya sökvägen i din /.bashrc så att Bash hittar rätt (eller /.zshrc om du kör Zsh).Öppna filen och lägg till följande rad:
export PATH="$HOME/.node_modules_global/bin:$PATH"
3. Installera Grunt och Gulp
I ett projekt används en så kallad task runner för att köra våra kommandon. Vi kör vanligtvis med Gulp men har även projekt där vi använder Grunt. Det spelar egentligen inte så stor roll, men det finns lite olika för- och nackdelar som vi inte behöver gå in på här. För säkerhets skull installerar vi båda två. Dessa paket installeras global, dvs de är tillgängliga överallt på din dator och inte knutna till något specifikt projekt.
Först så installerar vi Grunts Commando Line Interface (CLI) globalt med hjälp av:
npm install -g grunt-cli
Sedan kan du verifiera att Grunts CLI fungerar genom att skriva grunt .
Är du inte i en katalog som är förberedd 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 installerat Grunt för projektet och för att du saknar en Gruntfile.js – men det ändrar vi på när vi klonar ett projekt.
Sedan så installerar vi Gulps Commando Line Interface (CLI) globalt med hjälp av:
npm install -g gulp-cli
På samma sätt kan du testa att Gulp fungerar genom att skriva gulp. Och på samma sätt saknas troligen en lokal installation av gulp och en gulpfile.js. Men som sagt, det ändrar vi på snart, först skall vi bara installera Sass.
4. Installera Sass (valfritt)
Sass var ursprungligen skrivet i programmeringsspråket Ruby. Men nu för tiden finns det snabbare versioner så som Dart Sass.
Man kan installera Sass i varje projekt, men det kan även vara bra att installera Sass globalt om det finns behov av att använda det utan en massa beroenden då och då.
Sass installeras globalt i terminalen på Mac OS X genom att skriva:
npm install -g sass
Efter installationen kan du kolla så att du har rätt version installerad genom att köra:
sass -v
5. Klona ett projekt, kör npm install och sedan grunt watch
Nu har vi en lokal miljö som är redo att börja arbeta i. Dags att klona ett projekt och sätta igång. Det kan du antingen göra i ett program som Tower eller via kommandoraden.
cd /Sites/
mkdir projectname
git clone user@your-git-repo-domain.com/reponame projectname
cd projectname
Vanligtvis finns det inte några Node-moduler med i repot, utan dessa installerar man för varje projekt. Här förutsätter vi att det redan finns en fil som heter package.json uppsatt och klar i projektet och då är det bara att köra:
npm install
och vänta medan alla komponenter laddas hem.
Sedan finns det troligen även en fil som heter Gruntfile.js om man använder Grunt i projektet. 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 standardkörningen och sedan:
grunt watch
för att bevaka Sass och JavaScript-filer och kompilera dessa xvid ändringar.
Är det i stället ett projekt där man kör Gulp är processen snarlik. Kolla efter filen gulpfile.js och kör den genom gulp respektive gulp watch.
7. Överkurs
Här är en liten lista med de vanligaste kommandona för npm.
Installera och avinstallera lokala moduler med npm i projekt
Medan grunt-cli installeras globalt som vi gjorde ovan är det ganska vettigt att installera Grunt och övriga moduler i varje projekt.
Alla npm moduler finns för övrigt på www.npmjs.com och specifika plugins till Grunt finns på gruntjs.com/plugins respektive Gulp på gulpjs.com/plugins.
Installera genom:
npm install grunt --save-dev
och avinstallera genom:
npm uninstall grunt
Installera och avinstallera globala moduler med npm
På samma sätt fungerar det att avinstallera globala paket genom att häga på flaggan -g:
npm uninstall -g grunt-cli
Lista vilka globala moduler du har installerat
npm list --global --depth=0
Uppdatera dina globala npm moduler
Då och då kan det vara bra att se över sina globala npm moduler och uppdatera dessa.
Kolla vilka som har uppdateringar genom:
npm outdated -g
och sedan uppdatera dessa genom att skriva
npm update -g