28172 sujets

CSS et mise en forme, CSS3

Bonjour =)

Je cherche une extension pour Sublime Text 2 qui me permette de rafraichir automatiquement le navigateur lorsque je modifie mon fichier LESS... ou au pire la CSS (vu que j'ai déjà Less2Css qui marche très bien).

De plus, je cherche un moyen d'automatiquement "minifier" ma CSS.

En gros, faire Ctrl + S et entrainer 1) compilation Less en CSS, 2) compilation en min.css et 3) rafraichissement du navigateur.

J'ai testé déjà Browser Refresh mais il rend la fenêtre du browser active et je dois utiliser un raccourci comme Ctrl Alt S... peut etre que c'est modifiable, je sais pas...

Bref, quelle est la meilleure solution pour vous ? =)

Merci =)
Administrateur
Hello,

Je me pose les mêmes questions que toi.

Dew utilise le plugin LESS2CSS (qui nécessite node.js) et il en est satisfait : https://github.com/timdouglas/sublime-less2css (Less2CSS permet de minifier les fichiers).

En ce moment, j'expérimente Prepros : http://alphapixels.com/prepros/
C'est un environnement qui réalise (entre-autre) ce que tu souhaites : en enregistrant ton LESS (Ctrl+s), il le compile et le minifie si tu le souhaites et rafraîchit automatiquement sur le navigateur (et en plus il ajoute automatiquement les bons préfixes CSS)
Modifié par Raphael (13 Sep 2013 - 11:40)
Tiens, j'ai pas recu d'alertes par email...

J'utilise Less2Css et ca marche bien sauf que ca ne rafraichit pas.

Je viens de commencer de tester Prepros, donc si j'ai bien compris :
1) Installer le logiciel, .exe
2) Nouveau projet > selectionner le dossier de notre site web
3) Selectionner les options de mon fichier less a la sauvegarde (auto compile, etc)
4) dans reglages, "auto refresh" est selectionne mais ne marche pas, comment faire ?
J'ai egalement installe l'extension chrome...

Edit: j'ai trouve, il suffit de cliquer sur l'icone de globe en bas a gauche "Open project live url". Du coup, je bosse sur ma LESS, ca compile en CSS, ca minifie la CSS et ca rafraichit la page du browser instantanement...

Merci =)

Pourquoi ne pas l'adopter ? Du coup, il remplace Less2Css en rajoutant le browser refresh ainsi que les autres modes comme SASS, etc non ?
Modifié par LightBen (15 Sep 2013 - 14:57)
Administrateur
LightBen a écrit :
Pourquoi ne pas l'adopter ? Du coup, il remplace Less2Css en rajoutant le browser refresh ainsi que les autres modes comme SASS, etc non ?

C'est tout à fait ça :
- Il supporte LESS, mais aussi Sass/Compass et Stylus/Nib.
- Il optimise les images
- Il minifie CSS, mais aussi JS
- Il combine les fichiers JS en un seul
- Il permet même depuis la dernière version (pro) de profiter d'un transfert FTP direct

Et je rajouterais que son autoprefix est tout simplement génial : si tu entres
.flex {
  display : flex;
}


... il trouve même les anciennes syntaxes de flexbox et sort ce résultat :
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}


Moi je suis assez fan en ce moment ! Smiley smile

PS : il existe également Mixture qui semble encore plus complet (avec serveur intégré pour pouvoir gérer du PHP par exemple), mais qui est forcément payant.
Administrateur
Bonjour,

pour la partie :
- Enregistrer dans l'éditeur
- Changer de fenêtre pour Firefox
- recharger l'onglet courant
je me servais d'un script AutoHotKey (macro clavier) déclenché par une seule touche (la moins utilisée de mon clavier et tout de même bien placée : ²)

Il est dispo ici : http://jsfiddle.net/gP78y/1/ , est à lancer à chaque démarrage de Windows et va donc appuyer à ta place sur Ctrl-S (remplacer "Notepad++" par une partie du titre de la fenêtre de ton éditeur comme "Sublime Text 2"), sur Alt-Tab jusqu'à trouver la 1ère fenêtre ayant pour titre "Mozilla Firefox" et enfin sur Ctrl-R pour recharger l'onglet courant.
Faudrait que j'ajoute une vérification pour éviter de recharger un onglet Google Drive ou pire perdre des données mais ne recharger que si l'onglet s'appelle "localhost" ou contient le nom du serveur de dév ou du client. Bref, AHK est extensible à l'infini selon tes besoins Smiley cligne
Modifié par Felipe (15 Sep 2013 - 21:51)
J'ai essayé Livereload j'ai pas reussi a l'installer.

Mais j'ai pour le moment adopte Prepros c'est vraiment genial, et de pouvoir rafraichir en live sur mon smartphone pareil, tout ca en un Ctrl S, trop la classe Smiley langue