Laravel + Bootstrap (suite)

Micmaya — Fri, 08 Jul 2016 14:25:07 GMT

Ce billet est suite du pr�c�dent (url), qui va vous permettre de rajouter Font Awesome dans votre projet Laravel.

Ex�cuter la commande suivante:
Code : S�lectionner tout - Visualiser dans une fen�tre � part
npm install font-awesome --save-dev
Modifiez le 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'
      ]);
    mix.copy('node_modules/font-awesome/fonts','public/build/fonts');
});
Et rajoutez la ligne suivante dans votre fichier "app.scss":

@import "node_modules/font-awesome/scss/font-awesome";

Pour terminer, ex�cuter la commande suivante:
Code : S�lectionner tout - Visualiser dans une fen�tre � part
gulp
Du c�t� de Laravel Blade, il n'y a rien n'a changer puisque la librairie Font Awesome va se rajouter � la fin du fichier (g�n�r�) "public/css/app.css".

Laravel + Bootstrap

Micmaya — Fri, 08 Jul 2016 14:10:32 GMT

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')
  }

Authentification Laravel

Micmaya — Wed, 06 Jan 2016 10:42:34 GMT

Depuis Laravel 5.2, les vues d'authentifications ne sont plus disponibles, il faut saisir la commande suivante pour les obtenir:
Code : S�lectionner tout - Visualiser dans une fen�tre � part
php artisan make:auth
Ceci est pr�cis� dans la documentation: https://laravel.com/docs/master/authentication

Forum du club des d�veloppeurs et IT Pro - Blogs - Micmaya

Laravel + Bootstrap (suite)

Laravel + Bootstrap

Authentification Laravel