Share
Tout au long de cette série, nous avons examiné Bower et comment il peut améliorer notre développeur WordPress. Alors que nous terminons cette série, nous allons voir comment configurer Bower pour votre prochain projet. Plus précisément, nous allons expliquer comment installer, mettre à jour et personnaliser divers composants à l’aide de Bower..
Dans des articles précédents, j'ai parlé de ce qu'est Bower et de la façon dont cela peut vous aider dans votre développement WordPress. Dans cet article, je vais vous expliquer comment installer Bower pour votre projet et quelques techniques avancées..
Certains des concepts sont similaires à Grunt, je vous suggère donc de jeter un coup d'œil à un article précédent, Configuration de Grunt pour votre prochain projet. Nous entrons enfin dans du code. Faisons cela!
La clé de Bower dans un projet est la bower.json fichier. C’est ce qui sera analysé au cours d’une bower installer pour vous et tout consommateur de votre projet. Il est également nécessaire de sauvegarder les dépendances, mais plus sur cela plus tard.
La première chose que nous allons faire est de créer un bower.json fichier dans le dossier racine du projet. Je suggère de commencer par au moins le nom, la description et la version.
Voici ce que nous allons commencer par:
"name": "tuts-bower", "description": "Exemple de projet de tutoriel sur Bower pour Tuts +", "version": "1.0.0"
Maintenant que nous avons un bower.json fichier, ajoutons Bootstrap à notre projet. Nous allons le faire en allant sur la ligne de commande et en tapant bower installe bootstrap-sass-official --save. Cela devrait créer un bower_components dossier avec un bootstrap-sass-official dossier à l'intérieur, avec mise à jour de notre bower.json fichier.
Voici à quoi cela devrait ressembler maintenant:
"name": "tuts-bower", "description": "Exemple de projet de tutoriel sur Bower pour Tuts +", "version": "1.0.0", "dépendances": "bootstrap-sass-official": " ~ 3.1.1 "
Vous remarquerez que les dépendances sont ajoutées et il y a bootstrap-sass-official avec le dernier numéro de version.
L’une de mes caractéristiques préférées de Bower est la simplicité de mise à jour des composants que j’utilise dans un projet. Pour ceux qui me connaissent, je suis généralement du genre à essayer la dernière version de toutes les bibliothèques que j'utilise actuellement. Dès qu'une nouvelle version de Bootstrap est disponible, je l'insère dans un projet. Bower rend cela très facile.
Dans notre exemple ci-dessus, le tilde "~" devant le numéro de version signifie simplement utiliser au moins cette version. Il mettra également à jour votre projet avec toute nouvelle version de correctif lorsque vous exécuterez mise à jour de bower. Par exemple, lorsque / si Bootstrap est mis à jour en 3.1.2, vous pouvez simplement exécuter mise à jour de bower et vous serez mis à jour pour cette version.
Il existe différentes façons de spécifier les versions de chaque composant à utiliser..
Accentsconagua
3.1.1 ~ 3.1.1 ^ 3.1.1 * Maintenant que Bootstrap est installé, intégrons-le à notre projet. Pour l'exemple dans cet article, je ne ferai qu'ajouter les styles au projet, pas le JavaScript ou les polices. Je les inclut dans le projet complet sur GitHub.
La première chose que nous allons vouloir faire est de créer un style.scss fichier que nous allons compiler dans notre fichier style.css à la racine de notre projet. Je crée habituellement une structure comme css / sass / puis placez tous mes .scss fichiers dans le dossier sass. Allons-y et créons notre style.scss déposer là-bas.
Puisque nous faisons un thème, nous avons besoin de quelques commentaires en haut, puis nous pouvons importer dans le bootstrap.scss fichier que nous avons démoli avec Bower. Vous aurez besoin de trouver le chemin d'accès, puis utilisez un @importation pour l'amener comme ça:
/ *! Nom du thème: Tuts Bower URI du thème: http://code.tutsplus.com/ Version: 1.0.0 Description: Exemple de projet de tutoriel sur Bower for Tuts + Auteur: Jason Bradley URI de l'auteur: http://jasonbradley.me Licence: GNU Licence publique générale v3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html * / // Importer les styles Bootstrap @import '… /… / bower_components / bootstrap-sass-official / vendor / assets / stylesheets / bootstrap ';
J'utilise grunt-contrib-sass dans mon exemple de projet. Maintenant, lorsque nous exécutons notre compilateur Sass, il compilera le bootstrap.scss dans notre style.css fichier. Nous avons maintenant tous les styles Bootstrap ajoutés à notre projet..
Vous pouvez personnaliser ces composants de deux manières: Je vais me concentrer sur le style. L’une des méthodes consiste à remplacer les styles par une autre feuille de style ou moins dans l’ordre dans lequel les éléments sont compilés. .scss des dossiers. Une autre façon, celle que je recommande, est de remplacer le système existant. .scss les fichiers que vous extrayez avec Bower.
Regardons le bootstrap.scss fichier que j'ai référencé dans la section précédente. Il importe essentiellement à l'autre .scss fichiers qu’il doit compiler. Si vous regardez les fichiers et l’ordre dans lequel les choses sont importées, vous devriez voir le variables.scss déposer en haut. En tant que projet, Bootstrap a réussi à extraire des styles couramment remplacés ou réutilisés tels que les couleurs et les tailles de police ici..
Ce que nous pouvons faire est de copier le bootstrap.scss déposer et l'ajouter à l'un de nos thèmes .scss fichiers dans le css / sass dossier. Une fois que nous aurons fait cela, nous voudrons changer le chemin de tous les fichiers importés pour qu'il pointe vers notre bower_components annuaire.
Nous pouvons aussi ajouter notre propre .scss fichiers à l'intérieur de ce fichier pour remplacer des choses, comme les variables sass dans variables.scss. Supposons que vous souhaitiez mettre à jour la couleur de fond. Il y a une variable à l'intérieur de Bootstrap variables.scs fichier appelé $ body-bg, et nous pouvons simplement remplacer cela dans notre thème variables.scss fichier.
Les deux exemples ci-dessus changeraient de ceci:
// Variables principales et mixins @import "bootstrap / variables"; @import "bootstrap / mixins";
pour ça:
// Variables principales et mixins @import "… /… / bower_components / bootstrap-sass-official / vendor / assets / stylesheets / bootstrap / variables"; // Remplacement des variables d'amorçage par défaut @import "variables"; @import "… /… / bower_components / bootstrap-sass-official / vendor / assets / stylesheets / bootstrap / mixins";
C’est une chose un peu plus difficile à expliquer sans une démonstration concrète. J’ai donc construit un exemple sur GitHub pour que vous puissiez jeter un coup d’œil..
Ceci conclut notre série sur Bower. Nous avons parlé de ce que Bower est, comment cela peut aider votre développement WordPress et nous avons maintenant discuté de la façon de le configurer..
Bower est vraiment devenu le gestionnaire de dépendances de facto, donc j'espère que cela vous aidera à connaître le concept et à comprendre comment l'utiliser dans vos propres projets..
