Použití nástroje Laravel Mix

Laravel Mix je vrstva postavena nad nástrojem Webpack a slouží pro jeho snadné nastavení pomocí několika přehledných příkazů.

Poskytuje jednoduché a přehledné API pro konfiguraci nástroje Webpack.
Podporuje všechny běžně používané CSS a JavaScript pre-procesory.

Pokud vám nastavení nástroje Webpack přišlo příliš komplikované, Laravel Mix si oblíbíte.

Laravel Mix je implementován v rámci frameworku Laravel, lze jej však nainstalovat a používat i samostatně. Jak na to se dočtete v tomto článku.

Instalace

Je třeba mít nainstalováno node.js a npm.

Vytvoříme konfigurační soubor projektu package.json:

$ npm init -y

Nainstalujeme npm balíček laravel-mix:

$ npm install laravel-mix --save-dev

Zkopírujeme soubor:

 mode_modules/laravel-mix/setup/webpack.mix.js

do kořenového adresáře projektu.

Soubor webpack.mix.js je konfigurační nástroje Laravel Mix.

Upravíme cesty ke zdrojovým souborům a cílovým složkám.

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

mix.js('www/src/app.js', 'www/dist')
  .sass('www/src/app.scss', 'www/dist')
  .setPublicPath('www/dist');

(Pozor: pokud není uvedeno .setPublicPath, kompilace končí chybou 95% emitting.)

Nyní tedy máme následující adresářovou strukturu:

node_modules/
package.json
webpack.mix.js

Spustíme zpracování souborů:

$ node_modules/.bin/webpack --progress --config=node_modules/laravel-mix/setup/webpack.config.js

Do souboru package.json přidáme:

"scripts": {
 "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
 "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
 }

Podporované funkce

Zpracování kaskádových stylů

Sloučení CSS souborů do jednoho

mix.styles([
  'public/css/vendor/normalize.css',
  'public/css/vendor/videojs.css'
], 'public/css/all.css');

Kompilace Less

mix.less('resources/assets/less/app.less', 'public/css');

Kompilace Sass

mix.sass('resources/assets/sass/app.scss', 'public/css');

Kompilace Stylus

mix.stylus('resources/assets/stylus/app.styl', 'public/css');

Podpora PostCSS

http://postcss.org/

Zpracování URL

Webpack (a tedy i Laravel Mix) přepisuje a optimalizuje všechny relativní adresy (‚../images/example.png‘) ve stylech uzavřené ve funkci url(). Absolutní adresy (‚/images/thing.png‘ nebo ‚http://example.com/images/thing.png‘) zůstávají nedotčeny.

Příklad:

.example {
  background: url('../images/example.png');
}

Laravel Mix a Webpack najde soubor example.png, zkopíruje jej do cílové složky (např. public/images) a do cílového souboru zapíše absolutní adresu:

.example {
  background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
}

V případě potřeby můžeme tuto funkcionalitu vypnout:

processCssUrls: false

Source Maps

Jsou ve výchozím stavu vypnuty. Zapnout je můžeme pomocí:

.sourceMaps()

Zpracování JavaScriptu

Mix umožňuje compiling ECMAScript 2015, module bundling, minification, and simply concatenating plain JavaScript files. Even better, this all works seamlessly, without requiring an ounce of custom configuration:

mix.js('resources/assets/js/app.js', 'public/js');

Oddělení knihoven třetích stran od kódu aplikace

Je vhodné oddělit vlastní JavaScriptový kód aplikace od kódu knihoven třetích stran:

.extract(['vue', 'vendor1', 'vendor2', ...])

Mix v tomto případě vygeneruje následující 3 soubory, které vložíme do HTML stránky v uvedeném pořadí:

public/js/manifest.js – soubor s instrukcemi
public/js/vendor.js – uvedené knihovny
public/js/app.js – kód aplikace

Spojení několika JS souborů do jednoho souboru a jeho komprimace

mix.scripts([
  'public/js/admin.js',
  'public/js/dashboard.js'
], 'public/js/all.js');

Konfigurace Webpacku

Laravel Mix odkazuje v pozadí na přednastavený konfugurační soubor Webpacku webpack.config.js.