Laravel est un framework PHP consacré à la gestion côté serveur mais on ne peut pas créer une application web sans générer du HTML et pour l'accompagner du CSS et du Javascript. Laravel n'impose rien en la matière mais avec l'arrivée de la version 8 il a tendance à fortement influer. Jetstream est un bel outil que j'ai déjà longuement présenté dans ce cours. J'ai aussi expliqué comment s'en passer mais évidemment au détriment de la perte de belles fonctionnalités toutes prêtes.
Toujours est-il que Laravel que côté frontend Laravel propose NPM comme installeur. Je vais expliquer dans cet article comment ça se passe avec comme exemple Jetstream mais évidemment ça restera valable quel que soit le système qu'on a envie de mettre en place côté client.
On va donc installer Laravel avec Jetstream comme on l'a déjà vu précédemment :composer create-project --prefer-dist laravel/laravel laravel8
composer require laravel/jetstream
php artisan jetstream:install livewire
php artisan migrateLe CSS avec Laravel Mix
Si vous voulez utiliser un langage de génération de CSS comme Sass (qui connait un grand succès) ou Less alors vous pouvez opter pour Laravel Mix. Il est vrai que ces langages présentent de nombreux avantages par rapport au simple CSS :
- utilisation de variables
- imbrication de code
- importations
- mixins (groupe de déclaration CSS réutilisable)
- héritage
- opérateurs...
sass input.scss output.cssMais on peut aussi utiliser Laravel Mix. Sous le capot il utilise Webpack qui n'est pas si simple que ça à utiliser directement. Du coup c'est une façon plus simple d'utiliser Webpack.
Installation
Pour utiliser Laravel Mix vous devez disposer de NPM, donc aussi de node.js. Si vous n'êtes pas trop sûr d'avoir ça sur votre machine entrez ça dans votre console :
node -v
npm -vSi vous obtenez un numéro de version c'est que vous en disposez mais assurez-vous quand même que ce ne soient pas des versions trop anciennes sinon vous aurez des soucis !
Si vous n'avez rien alors installez-les en suivant les procédures sur les sites correspondants.
Dans l'installation de Laravel vous trouvez déjà un fichier package.json à la racine :
Il comporte toutes les déclarations de scripts et de dépendances nécessaires. Selon vos besoins vous pourrez adapter tout ça. Pour le moment on a ce code :
{
"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",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"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": {
"@tailwindcss/ui": "^0.5.0",
"axios": "^0.19",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"postcss-import": "^12.0.1",
"resolve-url-loader": "^3.1.0",
"tailwindcss": "^1.3.0"
}
}npm install
Utilisation
Maintenant vous pouvez utiliser le fichier webpack.mix.js pour préciser ce que vous voulez compiler. Par défaut on a ce code :
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
]);On a la méthode postCss (on dispose également de less , sass, et stylus) et on demande de compiler le fichier resources/css/app.scss dans public/css. On a effectivement ce fichier ici :
On y trouve l'importantion de tailwind :
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';npm run dev
Ce qui a pour effet de créer (en fait ici régénérer parce qu'il existe déjà) le fichier app.css (et aussi celui du Javascript mais j'en parlerai plus loin) :
Le code CSS est en clair puisqu'on est en mode développement :
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}npm run prodLà on obtient un code minifié pour gagner en dimension de fichier, donc en temps de téléchargement.
Un aspect intéressant est le mode observateur :
npm run watchDans ce mode le code est surveillé et la compilation se lance à chaque changement, ce qui est parfait quand on développe.
Le Javascript avec Laravel Mix
Pour le Javascript on peut aussi utiliser Laravel Mix comme on l'a vu ci-dessus pour le CSS. D'ailleurs on a dans le fichier webpack.mix.js une compilation de javascript :
mix.js('resources/js/app.js', 'public/js')On utilise la méthode js pour compiler le fichier resources/js/app.js dans public/js. On a effectivement ce fichier ici :
Et le résultat compilé va se retrouver ici :
Les commandes sont strictement les mêmes que celles qu'on a vues pour le CSS puisque les opérations sont groupées.
Voyons de plus près le fichier resources/js/app.js :require('./bootstrap');window._ = require('lodash');
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';Les actions de Laravel Mix
Laravel Mix sait faire bien d'autres choses que compiler du CSS ou du Javascript. Par exemple il sait copier des fichiers :mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');mix.copyDirectory('assets/img', 'public/img');En résumé
- Laravel Mix permet de compiler du CSS.
- Laravel Mix permet de compiler du Javascript.
- Laravel permet aussi d'effectuer des opérations sur les dossiers et les fichiers.
Par bestmomo
Aucun commentaire