Comment mettre à jour et inclure Twitter Bootstrap 3 sur webapp ou yo angular?
J'ai utilisé yo webapp ou yo angulaire de créer un nouveau projet, et j'ai reçu Bootstrap est la version 2.3.2, mais je veux utiliser la dernière version de Bootstrap.
Comment puis-je mettre à jour le paquet Bootstrap avec l'invite de commande et mise à jour ultérieure lors de la création de la nouvelle webapp ou yo angulaire, choisissez inclure Twitter Bootstrap est la dernière version?
source d'informationauteur Loc_rabbirt
Vous devez vous connecter pour publier un commentaire.
Yeoman la webapp & angulaire des générateurs de saisir Sass pour Bootstrap, qui est basé sur l'2.3.2 construire de Twitter Bootstrap.
Après l'exécution de
yo webapp
ouyo angular
vous pouvez ajouter Bootstrap 3.0 en exécutant la commande suivante.Ceci va télécharger Bootstrap 3.0 pour vous.
@micjamking réponse est une très bonne astuce, mais depuis, les Hallebardiers, les choses devraient être plus facile, je vais économiser un peu de googling:
yo angular
- Dire " Non " à l'Amorçage d'ici - sinon, il va télécharger les 2.x versionbower install --save bootstrap
npm install --save-dev grunt-bower-install
modifier Gruntfile.js - insérer des lignes marquées:
modifier app/index.html - insert :
et:
le cas échéant, ceux qui permettra d'injecter des références à la charmille-ressources gérées (bootstrap css et JS dans notre cas).
mise à jour 10/5/2013: Envisager de placer
bower:xxx
à l'intérieur debuild:xxx
.Dans notre cas,
bower:css
à l'intérieur debuild:css
etbower:js
à l'intérieur debuild:js
.Cela est nécessaire pour la minification de travail lors de l'assemblage de
dist
. Cependant je considère que cette démarche pas si parfait - voir les Remarques ci-dessous. Je me suis excusé un peu, puisque c'est la très même façon, le démarrage de la version obtenue par Yeoman par défaut qui est inclus dans notre application 😛Remarque: Pour obtenir minification css de travail, vous pourriez avoir besoin de changer
build:css(.tmp)
àbuild:css({.tmp,app})
.grunt bower-install
Prêt. Maintenant, exécutez le serveur (
grunt server
) et Bootstrap 3 sera disponible.Commentaires - mise à Jour 10/5/2013 - inspiré par @Luc enquête dans un commentaire:
Basé sur cette j'ai ajouté une sous-étape pour faire
dist
minification du travail.De verdure de l'injection fonctionne, donc ne minifying, cependant, je ne suis pas très heureux avec cette approche.
Raisons:
Plus tard sur le reste de l'application seront chargés plus rapidement, c'est vrai, mais la première fois que l'utilisateur entre dans notre page, ces encombrants unique-déclarants devront être téléchargés de manière préventive.
@yao tony aussi n'avait pas trouvé cela cool - voir référencé dans la question.
Mise à jour Novembre 2013: Vous pouvez utiliser grunt est
cdnify
tâche. C'est coolLes versions des logiciels que j'utilisais:
Pour sass Bootstrap mise à jour:
Cela Fonctionne pour moi:
et sélectionnez les nouvelles versions de ces deux...
devrait peut-être ajouter un
--save
Remarque: sass-bootstrap est bean obsolète, est maintenant officiel bower pour sass version de bootstrap https://github.com/twbs/bootstrap-sass mais je n'ai pas essayé.