Formation PUB030 : Laravel, 2019 Les outils de Laravel

2.11 Laravel Mix


Laravel Mix est un outil qui permet d'automatiser différentes tâches reliées notamment à l'utilisation de préprocesseurs CSS et JavaScript. Il facilite l'utlisation d'outils comme less, sass, coffee. Il est bâti sur Webpack et nécessite que node.js soit installé.

Il est idéal pour combiner ensembles les fichiers Javascript et pour les minifier. Il en va de même pour les feuilles de style.

Depuis Laravel 5.4, Laravel Mix remplace Elixir.

Installation

Pour voir si node.js est installé :

Console Vagrant SSH

node -v

Si vous travaillez avec Homestead, node.js est déjà prêt pour vous. Passons maintenant à Laravel Mix proprement dit.

Le fichier package.json, à la racine de votre projet, contient toutes les configurations pour installer Laravel Mix. Vous n'avez qu'à demander à Laravel d'effectuer les installations préconfigurées dans ce fichier :

Console Vagrant SSH

sudo npm install

ou, si Homestead est installé sous Windows :

Console Vagrant SSH

sudo npm install --no-bin-links

Si vous obtenez une erreur du genre « ERR! code ETXTBSY », essayez plutôt ceci :

Console Vagrant SSH

sudo npm install grunt -g --no-bin-links

Vous devez ensuite installer le module cross-env.

Console Vagrant SSH

sudo npm install --global cross-env

Retrouver la version installée

Lancez la commande suivante :

Console Vagrant SSH

npm list webpack

Vous verrez à la fois la version de Webpack et de Laravel-Mix.

Résultat à l'écran

vagrant@homestead:~/code/monprojet$ npm list webpack
/home/vagrant/code/monprojet
└─┬ laravel-mix@5.0.4
  └── webpack@4.43.0

Mettre à jour Laravel-Mix

Pour installer une version plus récente de Laravel-Mix :

Console Vagrant SSH

npm update laravel-mix

Définition de la version ECMAScript sous PhpStorm

Le fichier webpack.mix.js, présent à la racine de tout projet Laravel, contiendra les instructions Javascript qui dictent à Laravel Mix le travail à effectuer.

Si vous travaillez avec PhpStorm et que la version ECMAScript configurée n'est pas la bonne, vous pourriez avoir l'erreur « Destructuring assignments are not supported by current JavaScript version » dans le fichier webpack.mix.js.

Destructuring assignments are not supported by current JavaScript version

Si c'est votre cas, rendez-vous dans le menu Files / Settings (Windows) ou PhpStorm / Preferences (Mac) puis Languages & Frameworks / JavaScript. Changez la version de JavaScript pour ECMAScript 6. Vous devrez peut-être refermer le fichier puis le réouvrir pour que l'erreur disparaisse.

Configurer la version de JavaScript

Définition des tâches Laravel Mix

Vous pouvez maintenant définir dans le fichier webpack.mix.js les tâches que Laravel Mix doit réaliser. Par exemple, pour combiner en un seul fichier les feuilles de style listées, qui sont présentes dans le dossier ressources/css :

Fichier webpack.mix.js (JavaScript)

mix.styles([

        'resources/css/styles.css',

        'resources/css/menus.css',

        'resources/css/messtyles.css'

    ], 'public/css/all.css');

On fera l'équivalent pour les fichier Javascript avec mix.scripts().

Il est possible d'ajouter une gestion des versions afin que, lorsque vous modifiez vos fichiers .css ou .js, les navigateurs relisent les fichiers plutôt qu'à utiliser leur cache :

Fichier webpack.mix.js (JavaScript)

mix.styles([

        'resources/css/styles.css',

        'resources/css/menus.css',

        'resources/css/messtyles.css'

    ], 'public/css/all.css')

    .version();

Laravel Mix peut effectuer de nombreuses autres tâches. Par exemple, pour copier automatiquement les fichiers d'un dossier vers un  autre :

Fichier webpack.mix.js (JavaScript)

// copie des images et polices pour éviter que le manifeste ne puisse pas les retrouver (le fichier .css sera dans public/css)

// seuls les éléments référencés par le CSS sont touchés ici

mix.copy('resources/img', 'public/img');

Exécution des tâches Laravel Mix

Pour exécuter les tâches définies dans le fichier webpack.mix.js pendant le développement :

Console Vagrant SSH

npm run dev

ou lorsque le site est prêt à être mis en production (minifiera les fichiers JavaScript et CSS) :

Console Vagrant SSH

npm run production

ou, pour que les modifications à un des fichiers référencé soient automatiquement prises en compte (à faire seulement pendant que vous travaillez intensément dans votre css ou dans votre JavaScript) :

Console Vagrant SSH

npm run watch

Si vous obtenez une erreur du genre « Error: spawn EACCES », essayez la commande suivante :

Console Vagrant SSH

npm rebuild

Pour plus d'information

« Compiling Assets (Mix) ». Laravel. https://laravel.com/docs/master/mix

▼Publicité

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Merci de partager !
Soumettre