Aan de slag met Node.js en Gulp

Als je aan de slag gaat met development projecten, voor bijvoorbeeld nieuwsbrieven, zijn er heel wat manieren die je helpen om sneller en efficiënter te werken. Enkele voorbeelden hiervan zijn SCSS bestanden omzetten naar CSS bestanden, zorgen dat al je JavaScript netjes gebundeld wordt in 1 verkleind bestand, afbeeldingen die geoptimaliseerd worden, SVG’s die gebundeld worden tot een spritesheet,…

Wat is Gulp?

Om dit voor elkaar te krijgen, dienen je gebruik te maken van een ‘bundler’ zoals bijvoorbeeld Gulp of Webpack die je hierbij zal helpen. Al onze projecten maken gebruik van Gulp en/of Webpack om de ‘flow’ efficiënter te laten verlopen.

Gulp is een bundler mechanisme bestaande uit verschillende pakketten die je installeert. Je kan je hele Gulp configuratie dus opstellen zoals jij het wil en de taken koppelen die je nodig hebt in je project.

Voor ons Frontend framework hebben we bijvoorbeeld enkel een bundler voor JS, CSS, Twig, afbeeldingen en SVG’s nodig, terwijl voor onze MJML nieuwsbrieven of Zurb nieuwsbrieven ook MJML pakketten nodig zullen hebben. Zurb komt zelfs geheel met zijn eigen bundler opbouw setup.

Alvorens je Gulp kan gebruiken, zal je een Node.js configuratie moeten plaatsen op je computer. Gulp maakt hier gebruik van om alle processen te kunnen uitvoeren.

Code editor en terminal

Je installeert Node.js en Gulp door gebruik te maken van een terminal. Enkele goede programma’s hiervoor zijn terminal, iTerm2 of de terminal in het programma Visual Code Studio.

Hieronder een voorbeeld van Visual Code Studio waar de terminal in gebruik is.

XCode installeren (MAC Only)

• Installeer XCode op je computer. Dit hoef je alleen op een computer met een MAC omgeving te doen, dus niet op Windows. Xcode is een geïntegreerde ontwikkelomgeving met een geheel van softwareontwikkelingsproducten ontwikkeld door Apple voor het ontwikkelen van software voor macOS, watchOS, tvOS en iOS.
  

xcode-select —-install

Node Js installeren

• Controleer of je reeds een Node.JS versie op je computer hebt staan.

Node -v

• Indien je een Node versie terugkrijgt (bv. v12.13.1), dien je Node.js eerst geheel te verwijderen. Voer volgende stappen uit:

Node -Delete node and/or node_modules from /usr/local/lib
Delete node and/or node_modules from /usr/local/include
Delete node, node-debug, and node-gyp from /usr/local/bin
Delete .npmrc from your home directory (these are your npm settings, don't delete this if you plan on re-installing Node right away)
Delete .npm from your home directory
Delete .node-gyp from your home directory
Delete .node_repl_history from your home directory
Delete node* from /usr/local/share/man/man1/
Delete npm* from /usr/local/share/man/man1/
Delete node.d from /usr/local/lib/dtrace/
Delete node from /opt/local/bin/
Delete node from /opt/local/include/
Delete node_modules from /opt/local/lib/
Delete node from /usr/local/share/doc/
Delete node.stp from /usr/local/share/systemtap/tapset/v

• Vervolgens zullen we NVM installeren. NVM is een version manager dat er voor zal zorgen dat we verschillende Node versies eenvoudig kunnen beheren. Soms kan het zijn dat je in oudere projecten een oudere Node versie moet gebruiken. Gebruik daarvoor volgende commando’s:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

• Controleer of NVM correct geïnstalleerd werd. Je zou hier een verisenummer terug moeten krijgen (bv. 0.38.0).

nvm -v

• Installeer de meest recente stabiele Node.js versie

nvm install stable

• Installeer npm. NPM is de effectieve package manager waarmee je je taken kan aanroepen om je processen te starten.

nvm install-latest-npm

• Installeer vervolgens Gulp om je processen te kunnen configureren.

Npm install -g gulp

Je kan nu aan de slag om je projecten te installeren.