Node som byggsystem för frontend

Ett av mina starkaste mantran är att allt som kan automatiseras ska automatiseras.

Att arbeta med gränssnittsutveckling i webbprojekt har mycket som kan automatiseras. Dagens gränssnittsutvecklare pangar inte bara ut sin kod as-is i produktion längre. Istället tillämpas en hel del abstraktion för såväl CSS som JavaScript.

Jag har labbat en del med olika varianter^[1] för att öka produktiviteten och har landat i en lösning jag gillar skarpt. Lösningen är baserad på Node.js och är framtagen för att passa alla typer av webbprojekt, oavsett om de är i Rails, Django, Laravel, Drupal eller Wordpress.

package.json¶

• Här startar allt
• i scripts finns fyra definierade tasks: build, release, serve, test och watch.
• Använder browserify för att bundla bibliotek och ramverk

serve: Underlättande i det lokala kodandet¶

npm run serve

• Kör lokal webbserver
• watchar några kataloger och triggar ett subset av npm run build vid ändring

build: Förbereda inför att skeppa till produktion¶

npm run build

• Optimera bilder (JPEG och PNG)
• autoprefixa CSS
• kompilera till CSS (less, sass)
• kompilera JavaScript (JSX, Hyperscript, CoffeeScript)
• Minifiera CSS och JavaScript
• Slå ihop CSS och JavaScript (browserify)
• Zippa CSS och JavaScript
• Generera stilguide

test: Testa JavaScript och CSS¶

npm run test

Körs manuellt lokalt, används av CI-systemet. Även brukligt för att ha som en [git pre-commit hook]^[2].

• JSLint
• CSSLint
• Enhetstestning av JavaScript (jasmine, Mocha)
• Integrationstestning (PhantomJS, Karma, Selenium)

release: Skeppa kod!¶

npm run release

• Uppladdning till Amazon S3 (spara INTE credentials i koden!)
• Uppladdning till Surge.sh
• Uppladdning med (S)FTP