Magento 2 thema ontwikkeling met automatisch .less compilatie

Magento 2 thema met Grunt

Hoe je dit aanpakt? Dit kan middels Grunt. Magento 2 bevat standaard al voorbereidingen hiervoor. Maar om het aan de praat te krijgen zal je toch nog wat stappen moeten nemen.

Nota bene: Wij houden wel van een beetje nerdy talk. Geen idee waar we het over hebben wanneer we met termen als Hypernode, Grunt en Docker gooien? Dan kun je deze blog beter overslaan.

Misschien is dit geschikter leesvoer voor jou!

Stap 1: Installeer Grunt &

Om Grunt te installeren zal je “Node Package Manager” (of NPM) nodig hebben. Weet je niet of je dit beschikbaar hebt? Voor dan op de server het volgend uit:

npm -v

Krijg je een nummer terug? Mooi, dan is dat de versie van NPM die je tot je beschikking hebt. Krijg je een foutmelding, dan zal je waarschijnlijk Node.js nog moeten installeren.

Om Grunt zelf te installeren voer je op de server het volgende commando uit:

npm install -g grunt-cli

Stap 2: Activeer Grunt binnen Magento

In je <Magento_root> map dien je de volgende bestanden te hernoemen:

• package.json.sample naar package.json
• Gruntfile.js.sample naar Gruntfile.js
• grunt-config.json.sample naar grunt-config.json

Je moet nu je Node.js afhankelijkheden voor je Magento installatie verversen. Dit kan door de volgende commando’s te draaien op de server:

cd <je_magento_map>
npm install
npm update

Stap 3: Configureer Grunt en je Thema

Je hebt Grunt nu geinstalleerd binnen je Magento 2 installatie. Maar hij doet nog niets, daarvoor moet je eerst Grunt nog vertellen waar hij je css bestanden kan vinden.

Dit doe je door themes.js aan te vullen met het volgende:

<theme>: {
area: '<area>',
name: '<Vendor>/<theme>',
locale: '<language>',
files: [
'<path_to_file1>', //path to root source file
'<path_to_file2>'
],
dsl: 'less'
}

In bovenstaande toevoeging zal je nog je eigen thema gegevens moeten neerzetten. Bijvoorbeeld voor een thema met als vendor Webwijs en als themanaam Basic ziet het er als volgt uit:

Basic: {
area: 'frontend',
name: 'Webwijs/Basic',
locale: 'en_US',
files: [
'css/basic'
],
dsl: 'less'
}

In bovestaande voorbeeld wordt het bestand ‘css/basic.less’ automatisch door Grunt opgepakt. Als je dit bestand ook hebt opgenomen in je default_head_blocks.xml, maar dat is zonder Grunt ook al een vereiste om css van je thema naar de frontend te krijgen.

Het enige wat je nu nog moet doen is Grunt ‘aan’ zetten. Hiervoor moet je eenmalig de volgende commando’s op de server in je magento 2 map uitvoeren:

grunt clean:Basic
grunt exec:Basic
grunt less:Basic

Vervolgens moe tje elke keer als je wilt dat Grunt z’n ding gaat doen het volgende commando uitvoeren:

grunt watch:Basic

Let op: bovenstaande commando blijft draaien in je terminal, dus als je meer zaken in de terminal hebt te doen zal je een 2e venster moeten openen.