Automatisch LESS/SASS compilen, CSS/JS minifien, je browser verversen én CSS injecteren? En nog op meerdere apparaten tegelijk ook? Dat kan! Hieronder een aantal handige tools om nog sneller te ontwikkelen!
Gulp / Grunt
Gulp en Grunt zijn “build systems” of “task runners”, hiermee kan je bestanden “watchen” en wanneer deze veranderen een taak uitvoeren. Tijdens het ontwikkelen is dit handig om bijvoorbeeld je LESS bestanden in de gaten te houden, wanneer deze veranderen kunnen deze automatisch omgezet worden naar CSS. Nadat het CSS is kan er nog een minifier overheen zodat het geheel nog verkleint wordt ook. Twee mooie voorbeelden van Gulp en Grunt taken zijn in het Magento Boilerplate template te vinden: gulpfile.js en gruntfile.js.
LiveReload / BrowserSync
Tijdens het ontwikkelen switch je continu tussen je editor/IDE en je browser(s) om te kijken of het resultaat naar wens is. Dit switchen kost niet heel veel tijd maar kan sneller! LiveReload of BrowsesrSync kan je aan je Gulp of Grunt taak hangen en zorgt ervoor dat wanneer een bestand wijzigt automatisch je browser ververst wordt. CSS kan “geïnjecteerd” worden zodat de pagina niet eens herladen hoeft te worden. In het verleden heb ik LiveReload gebruikt vanuit het Magento Boilerplate, inmiddels overgestapt naar BrowserSync omdat daarbij géén browser plugin nodig is, het op meerdere apparaten tegelijk werkt en het acties op een pagina ook synchroniseert (scrollen, klikken en typen). Een korte video tutorial van Tuts+:
Bless
Recent liep ik tegen het probleem aan dat niet alle styling in Internet Explorer 9 tevoorschijn kwam. Tja, sommige klanten hebben nog veel bezoekers vanuit IE9 en dan dient IE9 gewoon ondersteund te worden. Klant is koning! Na veel proberen met allerlei crappy tools maar even een image erbij gepakt van Windows 7 met Internet Explorer 9 en in Virtual Box geladen. Na veel geprobeerd te hebben bleek IE9 een limiet van CSS regels te hebben waardoor de helft van de styling maar geladen werd. De oplossing hiervoor is Bless! Deze splitst de CSS op in meerdere bestanden waardoor IE9 niet meer onderuit gaat. Tevens kan Bless gebruikt worden vanuit Gulp of Grunt waardoor dit automatisch geregeld wordt.
Mijn ideale ontwikkel omgeving? Sublime Text 3, Gulp (met LESS, Minify, Uglify, Bless en BrowserSync), GIT (vanuit Cygwin) en WAMP!
