Yeoman, Yo, Bower, Grunt, Compass...

Par LightBen, il y a 11 ans

Les bases HTML/CSS

Bonjour tout le monde =)

Je suis en ce moment a la decouverte de tous les outils pour se faciliter la vie.
J'ai adopte SASS, Sublime Text, Emmet, snippets, Prepros... mais je suis sur que je peux aller encore plus loin. J'ai pas mal de questions et meme si quelqu'un a ne serait-ce qu'une reponse parmi toutes les questions ca peut etre cool n'hesitez pas a repondre =)

1) J'ai decouvert Bower qui apparemment permet d'inclure en quelques secondes des librairies. J'ai tout compris : comment installer NodeJS, installer bower, installer les librairies (JQuery, Angular etc) dans un projet mais... comment on fait pour inclure tout ca a son site web ? Je veux dire, on doit inclure le fichier JSON dans le head du site ?

2) En cherchant sur le web a propos de Bower, j'ai decouvert Yeoman. Concretement j'ai compris que c'est une association de Yo, Bower et Grunt. Si j'ai bien compris, Bower c'est pour inclure les librairies facilement. Grunt, c'est pour... compiler ? Et Yo, c'est quoi ?

3) Je n'arrive pas a comprendre le pourquoi du comment de Compass. Apparemment c'est une librairie pour SASS. Mais... comment on l'installe ? Comment on s'en sert ? C'est quoi en fait, un ensemble de mixins ? Il faut le compiler ou le SASS compiler s'en charge ?

C'est deja pas mal de questions pour le moment :P merci =D

2 réponses

Maenhyr, il y a 11 ans

1) Par défaut, Bower te permet juste de charger les librairies facilement au lieu de les copier/coller à la main. Tu dois ensuite écrire les urls à la main dans ton fichier index.html

<script src="..."></script>

Il existe un module Grunt et Gulp pour le faire automatiquement cependant.

2) Yo c'est un module qui permet de créer des générateurs pour pouvoir générer un projet rapidement au départ. Tu peux ainsi avoir directement tout une base de code (fichier CSS, JS, ...) avec une seule ligne de commande.

3) Compass est en effet un ensemble de mixins. Tu l'installes via Ruby comme Sass. Ensuite, il te faut l'inclure dans ton fichier SCSS via la commande suivante :

@import "compass"

Enfin, il te faut un fichier config.rb. Tu as ici, un moyen de le créer atomatiquement http://compass-style.org/install/, si tu remplis le formulaire de la partie "Tell us about your project and we'll help you get it set up:".

Pour compiler le fichier SCSS en fichier CSS, il te faudra maintenant utiliser la commande

compass watch

au lieu de

sass --watch input.scss:output.css
LightBen, il y a 11 ans

Merci a toi =) je vais essayer de m'entrainer maintenant =) si tu avais juste un lien pour ce module Grunt et celui de Gulp pour ajouter automatiquement les scripts... ?

Mais sinon, c'est bien ca ? > Yeoman = utilisation de Yo, Bower et Grunt?