A cél: egy Hugo-projektben álljon a rendelkezésünkre Bulma és Vue.js, avagy SCSS forrásfájlokkal és JS modulokkal akarunk dolgozni. A függőségek kezelésére és a feladatok futtatására npm-et használunk, a Webpack gyors integrációjához pedig Laravel Mixet. Nem árt tudni, hogy a kényelem ára egy 150 MiB méretű node_modules mappa, és ha nincs szükségünk JS-re, akkor jobban járunk a Hugóból meghívott SCSS-feldolgozóval (libsass vagy dartsass), ami gyorsabb is.

Onnan indulunk, hogy van telepítve Node.js, Hugo, és van egy Hugo-projektünk. A lényegi rész a package.json, hozzuk létre a projekt mappájában, majd npm i.

{
  "private": true,
  "scripts": {
    "deploy": "rsync -az --delete public/ mydomain.hu:~/www/mysite/",
    "dev": "run-p -r dev:hugo dev:webpack",
    "dev:hugo": "hugo server -D",
    "dev:webpack": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --watch",
    "prod": "npm run prod:webpack && npm run prod:hugo && npm run deploy",
    "prod:hugo": "hugo",
    "prod:webpack": "NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "dependencies": {
    "bulma": "^0.8.0",
    "laravel-mix": "^5.0.4",
    "npm-run-all": "^4.1.5",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "vue": "^2.6.11",
    "vue-template-compiler": "^2.6.11"
  }
}

A szkripteket saját igényeinkre szabva definiáljuk. Más nem föltétlen akarja összekötni az assetek/téma fejlesztését a tartalom írásával, vagy az éles oldal lokális előállítását a publikálással, én azt szerettem volna, hogy

  • az npm run dev hatására fusson a Hugo webszervere és a Webpack watchere, így ha bármit megváltoztatok, rögtön látszik a localhost:1313-on;
  • az npm run prod hatására készüljenek el a produkciós css és js fájlok, generálódjanak a statikus oldalak, majd legyen minden publikálva az éles szerverre.

Az explicit függőségekről:

  • A bulma, vue, laravel-mix érthető, ezekre szükségünk van.
  • Az npm-run-all démonok párhuzamos futtatásához kell, lásd: run-p -r dev:hugo dev:webpack. (Igen, lehetne használni a Webpack webszerverét is, és akkor nem kéne két démon.)
  • A többit a laravel-mix telepíti, nem tudom, miért nem implicit függőségként, de túlzottan nem is érdekel, ezért használom. 🙂

Hozzuk létre a saját SCSS-fájlunkat az assets mappában, legyen a neve mondjuk assets/sass/app.scss, mint a Laravel defaulté.

@import url(//fonts.googleapis.com/css?family=Open+Sans:400italic,800italic,400,800);
@import '~bulma/sass/utilities/_all';

$body-background-color: $white-ter;
$family-primary: "Open Sans", sans-serif;

@import '~bulma/bulma';

// stb...

Aztán hozzuk létre a saját JS-fájlunkat az assets mappában, legyen a neve mondjuk assets/js/app.js – mint a Laravel defaulté!

window.Vue = require('vue')

const app = new Vue({
    el: '#vue',
})

// stb...

Most már csak a mix konfigjára van szükségünk, hozzuk létre a webpack.mix.js fájlt:

let mix = require('laravel-mix')

mix .js('assets/js/app.js', 'assets/dist/')
    .sass('assets/sass/app.scss', 'assets/dist/')

Iniciálásként futtassuk az npm run prod:webpack parancsunkat, ez létrehozza az app.js és app.css fájlokat az assets/dist/ mappában. Ha hiba nélkül lefutott, akkor működik a Laravel Mix. Végül illesszük be a témánkba a megfelelő helyre a css-t és a js-t.

{{- $css := resources.Get "dist/app.css" | fingerprint -}}
<link rel="stylesheet" href="{{ $css.Permalink }}">

{{- $js := resources.Get "dist/app.js" | fingerprint -}}
<script src="{{ $js.Permalink }}"></script>