Micmaya

Laravel Elixir fournit une API propre couramment pour définir les tâches de base de Gulp pour votre application Laravel. Elixir supporte plusieurs CSS et JavaScript commun pré-processeurs, et même des outils de test.

Installation de Elixir:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
sudo apt-get install nodejs npm
sudo apt-get install nodejs-legacy
npm install -g gulp
npm install

Après cela, une série de modules ont été téléchargé dans le dossier "node_modules" qui se trouve à la racine de votre projet Laravel. Installez ensuite "Bootstrap" comme suit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

npm install bootstrap-sass-official --save

Pour la partie CSS:

Créer un fichier "app.scss" se trouvant dans "resources/assets/sass" qui contiendra ceci:

@import url(https://fonts.googleapis.com/css?family=Lato);
$font-family-sans-serif: 'Lato', sans-serif;

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

Pour le fun, j'ai rajouté une police plus jolie que celle de base venant de Bootstrap.

Ouvrez votre fichier "gulp.js" qui se trouve à la racine de votre projet Laravel, il devrait ressembler à ceci:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
var elixir = require('laravel-elixir');
 
elixir(function(mix) {
       mix.sass('app.scss');
});

Et modifiez-le comme suit:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
var elixir = require('laravel-elixir');
 
elixir(function(mix) {
       mix.sass('app.scss')
           .version('public/css/app.css');
});

Et pour terminer, exécuter la commande suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

gulp

Ce qui aura pour effet de générer les fichiers compilés de SASS dans le dossier "public/css/app.css" de votre projet Laravel.

Pour la partie JS:

Créer un dossier "JS" dans le dossier "resources/assets" et créer un fichier se nommant "app.js" qui contiendra ceci:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
window.$ = window.jQuery = require('jquery')
require('bootstrap-sass');
 
$(document).ready(function() {
  // Votre code JS
  console.log('jQuery : ' + $.fn.jquery);
  console.log('Bootstrap JS: ' + $.fn.tooltip.Constructor.VERSION);
});

Ensuite modifiez votre fichier "gulp.js" comme suit:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
var elixir = require('laravel-elixir');
 
elixir(function(mix) {
    mix.sass('app.scss')
      .browserify('app.js')
      .version([
        'public/css/app.css',
        'public/js/app.js'
      ]);
});

Et pour terminer, exécuter la commande suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

gulp

Ce qui aura pour effet de générer les fichiers jQuery et Bootstrap.js dans le dossier "public/js/app.js" de votre projet Laravel.

Pour la partie Blade (de Laravel):

Modifiez vos lignes pour les styles et les scripts JS comme suit:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<link href="{{ elixir('css/app.css') }}" rel="stylesheet">
 
<script src="{{ elixir('js/app.js') }}"></script>

Tous les bibliothèques Bootstrap.css et vos lignes SASS se trouvant dans le fichier "resources/assets/css/app.scss" pareillement pour les fichiers JS (Bootstrap + jQuery + le vôtre) seront concaténé ensemble.

Et enfin pour terminer, vous pouvez exécuter la commande suivante pour minifier les fichiers JS et CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

gulp --production

Pour info, voici à quoi ressemble mon fichier "package.json":

Code json :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.6",
    "gulp": "^3.9.1",
    "laravel-elixir": "^5.0.0"
  },
  "dependencies": {
    "gulp-install": "^0.6.0",
    "jquery": "^2.2.4",
  }
}

PS: J'ai du rétrograder la version de jQuery de 3.0.0 à 2.2.4, car la librairie JS de Bootstrap, empêche toutes les versions supérieur à 3, voici la ligne qui génère cette erreur:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
  var version = $.fn.jquery.split(' ')[0].split('.')
  if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 2)) {
    throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3')
  }