Tout simplement parce que même si on code côté serveur on est aussi largement impliqué dans l’aspect client parce qu’il faut générer des pages Html et assurer le fonctionnement des pages dynamiques.

Laravel n’impose rien à ce niveau mais propose des solutions. Dans ce chapitre nous allons voir ce qui est prévu de base et la manière de s’en servir, libre à vous ensuite d’utiliser ces possibilités ou pas.

Les outils

Par défaut Laravel utilise :

•  Bootstrap (framework CSS),

•  Vue.js (framework JavaScript).

Si vous voulez vous informer sur ces deux frameworks pour le premier vous trouverez un cours sur OpenClassroom. Pour le second j’ai rédigé une série d’articles sur mon blog.

Laravel est équipé de l’outil Elixir qui a pour but de simplifier l’utilisation de Gulp.

C’est un gestionnaire de tâches. On lui demande de faire des actions (minimiser du CSS ou du JavaScript, compiler du SASS, copier des fichiers, créer un serveur…). Il sait faire beaucoup de choses parce qu’il existe une montagne de plugins pour lui. Il fonctionne avec Node.js.

Node.js

C’est un écosystème JavaScript qui permet de pratiquement tout faire côté serveur. On peut par exemple coder complètement un site avec lui et il sera très rapide (utilisation du moteur de Google Chrome et fonctionnement non bloquant) ! Pour en savoir plus il y a un cours sur OpenClassroom.

Pour le présent chapitre vous n’avez pas besoin de savoir beaucoup de choses sur Node.js mais vous avez besoin qu’il soit installé sur votre serveur de développement. Si vous utilisez Laragon il est déjà installé, de même si vous utilisez Homestead. Sinon vous n’avez plus qu’à l’installer et il vous servira sans doute pour bien d’autres choses !

Node.js comporte le gestionnaire de packages npm. C’est un peu le composer de JavaScript. Le fichier de paramétrage est package.json (l’équivalent de composer.json). Il est déjà présent à la racine de Laravel :

Voyons le contenu de ce fichier :

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "vue": "^1.0.26",
    "vue-resource": "^0.9.3"
  }
}

On y trouve les dépendances nécessaires (devDependencies). En particulier y figurent gulp et elixir.

On va installer tout ça avec :

npm install

Vous allez attendre un bon moment pour que tout s’installe…

Quand c’est fini vous vous retrouvez avec un nouveau dossier node_modules bien garni :

Il contient toutes les dépendances nécessaires.

Gulp

Pour fonctionner Gulp a besoin du fichier gulpfile.js. Ce fichier est déjà présent à la racine de Laravel :

Voici son contenu :

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

require('laravel-elixir-vue');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(mix => {
    mix.sass('app.scss')
       .webpack('app.js');
});

Comme je l’ai dit ci-dessus on n’utilise pas directement Gulp mais Elixir qui en simplifie l’utilisation.

Elixir et css

Alors voyons de plus près cet outil…

Elixir sert à définir des tâches pour Gulp. Il prend en charge la plupart des préprocesseurs (LESS, SASS, JavaScript…). Dans le code de gulp.js on trouve ce code :

elixir(mix => {
    mix.sass('app.scss')
       .webpack('app.js');
});

Sass

La méthode sass permet de compiler du code SCSS en CSS. On part du principe qu’il y a un fichier Sass nommé app.scss. Mais où se trouve ce fichier ?

Par défaut les fichiers se trouvent dans resources/assets et pour les fichiers Sass il y a le dossier sass :

Voyons son contenu :

// Fonts
@import url(<a href="https://fonts.googleapis.com/css?family=Raleway:300,400,600">https://fonts.googleapis.com/css?family=Raleway:300,400,600</a>);

// Variables
@import "variables";

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

On importe une police, on importe un fichier de variables pour Bootstrap, et enfin on importe la librairie Bootstrap au format Sass.

Donc on va modifier Bootstrap avec des valeurs de variables spécifiques pour changer l’aspect par défaut. Voici ces variables (variables.scss) :

// Body
$body-bg: #f5f8fa;

// Borders
$laravel-border-color: darken($body-bg, 10%);
$list-group-border: $laravel-border-color;
$navbar-default-border: $laravel-border-color;
$panel-default-border: $laravel-border-color;
$panel-inner-border: $laravel-border-color;

// Brands
$brand-primary: #3097D1;
$brand-info: #8eb4cb;
$brand-success: #2ab27b;
$brand-warning: #cbb956;
$brand-danger:  #bf5329;

// Typography
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 14px;
$line-height-base: 1.6;
$text-color: #636b6f;

// Navbar
$navbar-default-bg: #fff;

// Buttons
$btn-default-color: $text-color;

// Inputs
$input-border: lighten($text-color, 40%);
$input-border-focus: lighten($brand-primary, 25%);
$input-color-placeholder: lighten($text-color, 30%);

// Panels
$panel-default-heading-bg: #fff;

Je ne vais pas entrer dans le détail mais par exemple :

• $body-bg : on change la couleur de fond,

• $brand-primary : on change la couleur primaire (par défaut un bleu profond),

• $font-size-base : on change la taille de la police.

C’est la méthode classique pour mettre Bootstrap à son goût.

Par défaut le fichier résultant se trouvera ici :

On peut changer ce comportement par défaut en définissant une autre cible mais on va garder celle-là. Le fichier s’y trouve d’ailleurs déjà dans l’installation de base :

@import url(<a href="https://fonts.googleapis.com/css?family=Raleway:300,400,600">https://fonts.googleapis.com/css?family=Raleway:300,400,600</a>);/*!
 * Bootstrap v3.3.7 (<a href="http://getbootstrap.com">http://getbootstrap.com</a>)
 * Copyright 2011-2016 Twitter, Inc.
 ...

Modifiez gulpfile.js ainsi :

elixir(mix => {
    mix.sass('app.scss');
});

Comme ça on ne va agir que sur le fichier Sass. Lancez Gulp :

gulp

Normalement tout devrait bien se passer :

Si on regarde dans le dossier :

On se retrouve avec deux fichiers cette fois. En effet par défaut le fichier map (qui sert au débogage) est aussi créé. On peut éviter cette génération en ajoutant cette ligne dans gulpfile.js :

elixir.config.sourcemaps = false;

Si vous regardez maintenant le fichier app.css généré :

@charset "UTF-8";
@import url(<a href="https://fonts.https://fonts.googleapis.com/css?family=Raleway:300,400,600">https://fonts.googleapis.com/css?family=Raleway:300,400,600</a>);
/*!
 * Bootstrap v3.3.7 (<a href="http://getbootstrap.com">http://getbootstrap.com</a>)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (<a href="https://github.com/twbs/bootstrap/blob/master/LICENSE">https://github.com/twbs/bootstrap/blob/master/LICENSE</a>)
 */
/*! normalize.css v3.0.3 | MIT License | <a href="github.com/necolas/normalize.css">github.com/necolas/normalize.css</a> */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }
...

Vous constatez qu’il n’est pas minifié. C’est le comportement par défaut, pour avoir en plus la minification il faut ajouter une option :

gulp --production

On procéderait exactement pareil pour du LESS.

Pour avoir une génération automatique en cas de changement de la source il faut utiliser cette commande :

gulp watch

C’est quand même bien pratique .

Elixir et JavaScript

Elixir sait aussi très bien gérer les fichiers JavaScript. On a souvent besoin de rassembler plusieurs fichiers dans un seul, avec Elixir c’est facile :

elixir(function(mix) {
    mix.scripts([
        'main.js',
        'module.js'
    ]);
});

Par défaut les fichiers doivent se trouver dans resource/assets/js. Le fichier résultant sera public/js/all.js. Vous pouvez évidemment changer tout ça si vous le voulez.

De la même manière que pour le CSS la minification se produira si on utilise l’option –production.

En plus du JavaScript classique Elixir sait aussi gérer CoffeeScript, Browserify, Babel et bien d’autres ! Vous pouvez donc tranquillement écrire votre JavaScript en ES2015 ou même en TypeScript.

Mais on va s’intéresser à Vue.js parce qu’il est prévu par défaut dans l’installation. Modifiez le code de gulpfile.js ainsi :

elixir(mix => {
 	mix.webpack('app.js')
});

Le but est de compiler des fichiers écrits en ES2015, donc modulaires et de les rassembler en un seul fichier.

Les sources sont dans resources/assets/js :

Et le résultat sera dans public/js/app.js.

La commande est évidemment la même :

Qu’est-ce qu’on a dans le fichier résultant ? Pour le savoir il faut regarder resources/assets/js/bootstrap.js :

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');
require('vue-resource');

/**
 * We'll register a HTTP interceptor to attach the "CSRF" header to each of
 * the outgoing requests issued by this application. The CSRF middleware
 * included with Laravel will automatically verify the header's value.
 */

Vue.http.interceptors.push((request, next) => {
    request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;

    next();
});

On charge :

• jQuery,

• Bootstrap (la librairie JavaScript),

• Vue.js,

• Vue-ressource (un composant pour Vue.js qui permet d’utiliser Ajax),

• Un intercepteur pour mettre le token de la protection CSRF dans les headers.

D’autre part on a un composant Vue.js (resources/assets/js/components/Example.vue) :

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        ready() {
            console.log('Component ready.')
        }
    }
</script>

Ce composant s’appelle tout simplement example :

Vue.component('example', require('./components/Example.vue'));

On va s’en servir pour voir si ça fonctionne… Il suffit de créer une vue qui charge le CSS et le JavaScript et qui inclue le composant de Vue.js :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        {!! Html::style('css/app.css') !!}
    </head>
    <body>
        <div id="app">
            <example></example>
        </div>
        {!! Html::script('js/app.js') !!}
    </body>
</html>

Et voici le résultat :

Comme vous le constatez l’intendance est en place si vous voulez l’utiliser !

En résumé

• Laravel n’impose rien concernant le CSS et le JavaScript mais il propose des solutions.

• Elixir est un outil qui permet d’utiliser simplement Gulp.

• Avec Elixir on peut compiler du CSS et du JavaScript.‌

• La librairie JavaScript Vue.js est prévue par défaut.