Free Press

Grande nouvelle ! Nous avons minifié et combiné toutes nos CSS en un seul fichier. Oh, sauf pour le CSS de Bootstrap ! Nous avons deux bonnes options. Premièrement, nous pourrions pointer le lien vers un CDN Bootstrap public. Ou nous pourrions fourrer le bootstrapstyling directement dans main.css. Faisons cela – c’est beaucoup plus intéressant.

Bower!

Bootstrap est installé grâce à Bowser. Hum, je veux dire bower. Bower est le compositeur pour les actifs frontaux, comme Bootstrap ou jQuery. C’est une alternative pour télécharger les fichiers et les commiter dans votre repo.

Bower lit depuis, surprise !, un fichier bower.json:

Et quand j’ai créé le projet, j’ai aussi ajouté un fichier .bowerrc. Cela dit à Bower de télécharger des choses dans ce web/vendor répertoire:

Cela les rendait accessibles au public.

Mais maintenant que nous avons le muscle de Gulp, je veux compliquer les choses. Changez cela pour être vendor/bower_components:

Cela va mettre ces fichiers en dehors du répertoire public, ce qui au début, va causer quelques problèmes. Supprimez ces vieux trucs :

rm -rf web/vendor

Allez dans le terminal et faites ctrl+c pour sortir de gulp. Maintenant, exécutez bower install:

bower install

Si vous n’avez pas la commande bower, consultez simplement leur docs. Il est installéglobalement via npm, exactement comme gulp.

Fait ! Maintenant, dans mon répertoire vendor/, j’ai un beau bower_componentsdossier.

Ajout de fichiers CSS à notre flux de styles Gulp

Mais même si je voulais avoir 2 balises de lien séparées dans ma mise en page, je ne peux pas:Bootstrap n’appelle plus le répertoire web/ home. Donc, débarrassez-vous de sa balise de lien.

En gulpfile.js, essayons de réparer les choses ! Je vais commencer par ajouter une nouvelle variable de configuration appelée bowerDir, parce qu’il va être très courant de se référer à des choses dans ce répertoire. Définissez-la à vendor/bower_components:

Si vous ouvrez ce répertoire, vous pouvez voir où vit le fichier bootstrap.css. Remarquez qu’il ne s’agit pas d’un fichier Sass, mais d’un bon vieux CSS. Il existe en fait une version Sass de Bootstrap, et vous pouvez tout à fait l’utiliser à la place si vous voulez contrôler vos variables Bootstrap.

Mais la question est, pouvons-nous pousser des fichiers CSS ordinaires à travers notre fonction de traitement SassaddStyle ? Bien sûr ! Ajoutons config.bowerDir puis /bootstrap/dist/css/bootstrap.css:

Et nous n’avons même pas besoin de nous soucier de récupérer le fichier min, car nous nous en occupons déjà. Ce fichier va passer par le filtre sass, mais ce n’est pas grave ! Il ressemblera juste au plus ennuyeux des fichiers Sass.

Retournez-y et lancez gulp:

gulp

Et maintenant, main.css commence avec du glorieux code Bootstrap. Et il serait minifié si j’avais passé le drapeau --production.

Notre site devrait encore être beau. Alors rafraîchissez. Yep, c’est comme avant, mais avec un fichier CSS moins embêtant à télécharger.

Renommer la tâche en styles

Et avant de continuer, je pense que nous pouvons faire une autre amélioration. Notre tâche s’appelle sass. Changeons-la en styles, car son travail consiste en fait à traiter les styles, que ce soit des fichiers CSS ou Sass.

Nous devons également changer ce nom sur la tâche default. Oups, et avant de redémarrer Gulp, changez aussi le nom sur la tâche watch en styles:

Ok, maintenant nous pouvons essayer des choses. ctrl+c pour arrêter Gulp, et le redémarrer :

gulp
 

Oui, pas d’erreurs ! Et le site a toujours l’air Tri-tastique ! Vous voyez ce que j’ai fait là ?