Convertir l'échafaudage frontal de Laravel 5 en Bower

Convertir l’échafaudage frontal de Laravel 5 en Bower

Laravel 5 est livré avec des modèles de base, qui importent Bootstrap.js et jQuery, et une feuille de style de base qui importe LESS Bootstrap. Si vous ne l’aimez pas, vous pouvez le supprimer instantanément avec php artisan freshmais pour de nombreux cas d’utilisation de démarrage rapide et de développement rapide, j’ai vraiment adoré.

Cependant, que se passe-t-il si vous préférez gérer vos dépendances frontend avec Bower ? Il est en fait très simple de conserver la configuration par défaut de Laravel 5 et de la modifier un peu pour s’appuyer sur Bower. Vérifiez-le:

1. Ajouter `bower.json`

Tu as besoin d’un bower.json fichier pour commencer. Créez un fichier à la racine de votre répertoire avec le contenu suivant :

{
  "name": "your-project"
}

2. Ajouter `.bowerrc`

Par défaut, Bower s’installe dans /bower_componentsmais nous voulons nos dépendances bower dans notre resources/assets dossier. Créer un .bowerrc fichier à la racine de votre projet qui contient les éléments suivants :

{
  "directory": "resources/assets/bower"
}

3. Installer les dépendances

Maintenant, en supposant que Bower est installé (sinon, $ npm install -g bower), vous pouvez exécuter les commandes suivantes pour ajouter jQuery et Bootstrap à votre bower.jsonet installez-les :

$ bower install jquery —save
$ bower install bootstrap —save

4. Mettre à jour l’importation MOINS

Maintenant, nous devons mettre à jour nos scripts pour extraire les nouvelles dépendances. Dans resources/less/app.lesschange ça:

@import "bootstrap/bootstrap";

pour ça:

@import "../bower/bootstrap/less/bootstrap";

5. Apportez des scripts

Dans gulpfile.js ajoutez ces lignes (dans le elixir() bloc):

mix.scripts([
    '../assets/bower/jquery/dist/jquery.js',
    '../assets/bower/bootstrap/dist/js/bootstrap.js'
], 'public/js/vendor.js');

6. Modifier les références du modèle

Dans resources/views/app.blade.phpremplacez ces lignes :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

Avec ça:

<script src="https://mattstauffer.com/blog/{{ asset("/js/vendor.js') }}"></script>

7. Nettoyer

Supprimer le resources/assets/less/bootstrap dossier.

8. Courez `gulp`

Maintenant, il suffit de courir gulp depuis la ligne de commande. Il combinera les dépendances du fournisseur dans public/js/vendor.jsil intégrera les nouvelles versions du bootstrap LESS dans votre feuille de style, et vous êtes maintenant prêt à partir.

C’est ça!

Tu es prêt! Votre site doit regarder exactement le même, mais il est maintenant soutenu par la puissance de Bower. (ba dum ching)

Si jamais vous souhaitez ajouter de nouvelles dépendances, vous pouvez simplement utiliser bower et ajouter des fichiers javascript à votre gulpfile.js mix.scripts tableau, et ajoutez LESS ou CSS à votre app.less importations. Fait!

Post-scriptum

Et si vous souhaitez importer un thème depuis Bootstrap ? Il s’avère que c’est extrêmement facile. Apportez votre variables.less du thème, et il suffit de le charger dans app.less après vous importez le Bower Bootstrap. Il s’avère que les variables LESS sont écrasées si de nouvelles versions de celles-ci sont importées ultérieurement (HT @marcorivm), vous faites donc cela dans app.less:

@import "../bower/bootstrap/less/bootstrap";
@import "../bootswatch/variables";
@import "../bootswatch/bootswatch";

1. Ajouter bower.json

2. Ajouter .bowerrc