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!

Het bericht Gulp / Grunt en BrowserSync / LiveReload verscheen eerst op Roy Duineveld.

Wat is er nodig?

Om vanuit Sublime Text te kunnen werken aan een .NET project heb je op zijn minst toegang tot TFS nodig. Ter informatie, dit is een soort van SVN cq GIT maar dan van Microsoft. Daarnaast is het nodig om na een wijziging een build te doen, hierna is het resultaat pas zichtbaar in de browser.

TFS in Sublime Text

Hiervoor is een plugin beschikbaar: Sublime TFS! Met in deze plugin; een super handige optie “auto checkout”. Zodra je een bestand opent wordt deze automatisch uitgecheckt. Wél dien je deze optie zelf nog even aan te zetten in “sublime_tfs.sublime-settings”. Uiteraard dient “tf.exe” wel aanwezig te zijn op je pc, maar als je Visual Studio geïnstalleerd hebt staan is dat het geval.

Builden vanuit Sublime Text

Na een wijziging dient er ge-build te worden, daarvoor is er ook een plugin beschikbaar maar deze voldeed niet helemaal aan mijn wensen. De reden hiervan is dat je niet vanuit een ander bestand dan een project bestand (csproj) kan builden. Daarnaast moest dit handmatig elke keer gedaan te worden na een wijziging, makkelijker is zodra er een bestand opgeslagen wordt dit automatisch gebeurd.

New Build System

In het menu is onder “Tools” gevolgd door “Build System” is de optie “New Build System” te vinden. Plak daar het volgende in:

{
	"cmd": ["msbuild", "C:\\projects\\projectnaam\\project.csproj"],
	"working_dir": "${file_path:${folder}}",
	"file_regex": "^\\s*(.+?)\\(([0-9]+),?([0-9]+)?\\):\\s*(.*) \\[",
	"shell": true,
	"selector": "source.msbuild",
	"windows":
	{
		"path": "%PATH%;%WINDIR%\\Microsoft.NET\\Framework\\v4.0.30319;%WINDIR%\\Microsoft.NET\\Framework\\v3.5;%WINDIR%\\Microsoft.NET\\Framework\\v2.0.50727"
	}
}

Vervang hier het pad naar je project bestand. Deze stap dien je te herhalen voor elk project, zodat elk project een eigen build system heeft. Hierna kan het build system gebruikt worden door deze aan te vinken in het menu. Middels de sneltoets CTRL-B wordt de build uitgevoerd waarvan de resultaten onderin een log getoond worden. Zoals op te merken uit het bovenstaande json stukje is het .NET framework vereist.

Build on save

Elke keer CTRL-S gevolgd door CTRL-B is wat dubbel op, daarom heb ik de plugin SublimeOnSaveBuild ingezet. In mijn geval was ik voornamelijk bezig met HTML, LESS en XSLT bestanden maar daarbij werd niet ge-build. Daarvoor heb ik in “SublimeOnSaveBuild.sublime-settings” de “filename_filter” uitgebreid met extensies:

{
    "filename_filter": "\\.(css|js|sass|less|scss|html|xslt)$",
    "build_on_save": 1
}

Als enthousiaste Sublime Text gebruiker, kan ik op deze manier lekker in Sublime Text blijven!

Het bericht TFS en builden vanuit Sublime Text 2 verscheen eerst op Roy Duineveld.

CTRL - Klik								Meerdere cursor plaatsen
CTRL - D								Woord waar de cursor in staat selecteren. Hierna naar het geselecteerde woord zoeken en hier extra cursors plaatsen
CTRL - K								Woord overslaan
ALT - F3								Alle woorden selecteren
CTRL - ALT - Pijltje omhoog/beneden		Verticaal cursors plaatsen
CTRL - F 								Zoeken (met enter naar het volgende resultaat gaan)
CTRL - I 								Zoeken (met enter het eerste resultaat weergeven)
CTRL - SHIFT - P 						Command, alle functies bij elkaar
CTRL - P 								Zoeken in geopend project
CTRL - R 								Zoeken in huidig document naar functies in PHP of ID's in HTML
CTRL - P - @ 							Combinatie van de hierboven genoemde
CTRL - /								Van huidige regel of selectie commentaar maken
Selectie + "							Quotes om de selectie heen zetten
CTRL - ALT - X 							Prefixr (Prefixr package vereist)
CTRL - ALT - P 							Van project wisselen
CTRL + ] 								Inspringen
CTRL + [ 								Terug inspringen
SHIFT - CTRL - F 						In alle bestanden van een map zoeken
SHIFT - CTRL - K 						Huidige regel verwijderen
SHIFT - ALT - W 						Tag om de huidige selectie zetten
CTRL - ALT - R - B 						Browse FTP (Sublime SFTP package vereist)
CTRL - ALT - Enter 						Zen Coding / Emmet

Om dan toch een video bij dit artikel te plaatsen. Bij deze, zeker de moeite waard!

Of als losse video’s: https://tutsplus.com/course/improve-workflow-in-sublime-text-2/

Het bericht Sublime Text 2 sneltoetsen verscheen eerst op Roy Duineveld.