--- title: "Förbered dig för front end-arbete med Node.js och Gulp" description: "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." date: 2020-02-02 author: "Christofer Sandin" canonical_url: "https://www.republic.se/artiklar/forbered-dig-for-front-end-arbete-med-node-js-och-gulp" section: "Articles" --- # 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](http://git-scm.com) används för att versionshantera filer. Det finns ett [installationsprogram att ladda hem på Git:s webbplats](http://git-scm.com/download/mac). 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](https://nodejs.org/en/) 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](https://nodejs.org/en/download/), 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](http://sass-lang.com) 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](http://www.git-tower.com/) 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](https://www.npmjs.com) och specifika plugins till Grunt finns på [gruntjs.com/plugins](http://gruntjs.com/plugins) respektive Gulp på [gulpjs.com/plugins](https://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`