Technisch blog
Leestijd: 3 min

Voor het ontwikkelen van een eigen thema in WordPress gebruiken velen een basis, zoals Underscores of Storefront. Wij hebben inmiddels onze eigen basis ontwikkeld, met daarin onder andere ondersteuning voor Bootstrap en Responsive Font Sizes. We ontwikkelen het thema natuurlijk constant door: we verwijderen verouderde technieken en voegen nieuwe toe. Zo begonnen we ooit, ‘vroeger’, met een basisthema zonder package manager… can you believe it?! Maar gelukkig: tijden veranderen, en wij veranderen mee. En daarom hebben wij Laravel Mix verwerkt in ons thema. Want daarmee kun je alles wat je met Webpack kunt, maar dan met een gemakkelijkere syntax en minder lastige configuraties. En dat wil je.

 

Waarom Laravel Mix?

Waarom niet? Haha nee, grapje. We hebben er zo onze redenen voor. Want ook al is de keuze reuze als het op asset bundlers en compilers aankomt (lees: Grunt, Gulp, Webpack, Rollup, Parcel…), Laravel Mix staat bij ons met stip op één dankzij de über-gemakkelijke syntax die ervoor zorgt dat elke developer een nieuwe configuratie in Laravel Mix kan opzetten, zonder hulptroepen in te moeten roepen. Piece of cake! En los daarvan: onze bak aan ervaring met Laravel binnen projecten stroomt zowat over. De supersnelle configuratie kunnen we trouwens ook zéker waarderen.

Dankzij de über-gemakkelijke syntax kan élke developer een nieuwe configuratie in Laravel Mix opzetten. Zonder hulptroepen.

We hebben het wel eens geprobeerd hoor, met Grunt. Maar dat resulteerde nogal eens in een agressieve ‘Grrrrrrunt’ hier in de studio. Tja, met meerdere configuraties werd het echt een traaaaag bakbeest (lees: meerdere secondes per compilatie, auw). Nee, doe ons Laravel Mix maar met enkele milliseconden per compilatie!

 

Wat is Laravel Mix dan precies?

Oké, we gaan het wat technischer maken. Want wat is Laravel Mix precies? Laravel Mix is een asset bundler en compiler gebaseerd op Webpack en is standaard onderdeel van het Laravel PHP Framework. Door middel van een API kun je met Laravel Mix álles wat je met Webpack kunt, maar zoals gezegd: met een gemakkelijkere syntax en minder lastige configuraties. In het pakket zijn meerdere CSS preprocessors (SASS, LESS en Stylus) ingebouwd en heb je verschillende mogelijkheden voor het compilen of bundelen van je JavaScript (zoals Vanilla JS, ECMAScript 2015 en React). Naast al deze standaard meegeleverde opties, kun je ook direct Webpack plugings gebruiken en zelfs de Webpack configuratie aanpassen vanuit Laravel Mix. Meer over de mogelijkheden van Laravel Mix kun je lezen in hun handleiding.

Met Laravel Mix kun je álles wat je met Webpack kunt, maar dan een stuk eenvoudiger.

 

Hoe bouw je Laravel in in je eigen thema?

Zoals altijd zijn er meerdere wegen naar Rome. Kwestie van je eigen route kiezen. Wij kozen ervoor om onze configuratie en scripts in de /wp-content/themes/ map te plaatsen en daarmee niet in het thema zelf. Op deze manier kun je naast een thema ook child-thema’s genereren, en dat is wel zo prettig! Wordt dit ook voor jou dé manier? Dan heb je ook Node.js nodig – zorg dus dat je die eerst installeert. Ga vervolgens verder met het stappenplan.

 

Hier is je stappenplan

Stap 1
Plaats de volgende bestanden in de /wp-content/themes map:

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0"
    }
}

webpack.mix.js

const mix = require('laravel-mix');

let jsFiles = [
    '[THEMA]/assets/js/scripts.js'
];

let scssOptions = {
    processCssUrls: false,
    autoprefixer: {
        options: {
            grid: 'autoplace'
        }
    },
    sourceComments: true
};

mix.setPublicPath('./');

mix.js(jsFiles, '[THEMA]/assets/js/built.js')
   .sass('[THEMA]/assets/sass/style.scss', '[THEMA]/style.css').options(scssOptions);

mix.js(jsFiles, '[CHILDTHEMA]/assets/js/built.js')
   .sass('[CHILDTHEMA]/assets/sass/style.scss', '[CHILDTHEMA]/style.css').options(scssOptions);

mix.sourceMaps(true, 'source-map');

Stap 2
Wijzig in het webpack.mix.js bestand de tekst [THEMA] in de naam van het thema waar je het voor in wilt zitten (let op: belangrijk!).

Stap 3
Eventuele paden naar JavaScript bestanden en SASS/CSS bestanden kun je nu aanpassen.

Stap 4
In de ‘jsFiles’ variabele kun je meerdere JS bestanden plaatsen die gecompileerd en samengevoegd worden.

Stap 5
Wil je meerdere thema’s genereren? Dan kun je de mix commando’s gewoon dupliceren en aanpassen, zoals in het bovenstaande voorbeeld ook gedaan is voor ‘[CHILDTHEMA]’.

Stap 6
Nadat je de bestanden hebt geplaatst en gewijzigd, open je een terminal scherm en ga je naar de /wp-content/themes/ map. In deze map voer je het volgende commando uit:

npm install

NPM (de package manager van Node.js) installeert nu alle benodigdheden voor het gebruik van Laravel Mix. Het kan zijn dat je de eerste keer een foutmelding krijg met betrekking tot cross-env. No panic! Dit los je op door het volgende commando uit te voeren:

npm install -g cross-env

Stap 7
Er rest nog één keuze: wil je de compilatie eenmalig laten draaien of langer?

  • Om de compilatie éénmalig te laten draaien, gebruik je het volgende commando:
    npm run dev

    Dit commando voert al je opdrachten uit vanuit het webpack.mix.js bestand uit en stopt daarna.

  • Je kunt ook een commando starten om de bestanden waarmee je werkt in de gaten te houden en de compilatie te draaien wanneer dit nodig is. Dit doe je met het volgende commando:
    npm run watch

    Laravel Mix houdt nu je bronbestanden (SASS en JS) in de gaten. Zodra een van deze bestanden binnen je thema wordt bewerkt, wordt de compilatie voor je gedraaid en kun je het resultaat direct in je browser bekijken! Dit commando stop je door Ctrl-C in te toetsen.

 

Hurray!

Je kunt nu gebruikmaken van Laravel Mix: de kracht van Webpack in een gemakkelijk Laravel Mix jasje binnen je eigen WordPress thema’s!

Have fun!!

PS: Wij zijn alweer bezig met ons volgende blog: het compileren van productie assets tijdens geautomatiseerde deployment. Whut? Stay tuned! 😉

 

 


12 maart 2020 - 08:56