Prepros

Outil par (Intégrateur du Dimanche, Strasbourg)
Créé le (33302 lectures)
Tags : sass, less, préprocesseur, Compass, compilation, Stylus

Prepros est un "environnement de travail" (workflow) graphique destiné aux projets d'intégrations HTML et CSS basés sur des préprocesseurs tels que LESS, Sass/Compass et Stylus.

Ce logiciel est OpenSource (licence MIT), disponible sur Windows et Mac, gratuit dans sa version de base (largement suffisante), et offre de nombreuses fonctionnalités d'optimisations et d'automatisations.

prepros

Compilation des préprocesseurs

Prepros compile automatiquement les langages LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml et Markdown. Rien que ça.

Vous pouvez choisir le format de sortie du fichier CSS, à savoir : normal, compact ou minifié.

De plus, l'outil dispose de gestions de logs et d'erreurs assez pratiques.

Compression des images

Prepros offre la possibilité de compresser les images de votre projet (JPG, PNG, GIF). À noter toutefois que l'outil d'optimisation d'images est manuel (image par image) et ne vaut pas les ténors dans le domaine même s'il est déjà très bon.

Concaténation JavaScript

Prepros minifie et concatène (réunit) les divers fichiers JavaScript pour n'en obtenir qu'un en production.

Préfixes automatiques

Inutile de vous soucier des préfixes constructeurs (-moz-, -webkit-, etc.) car l'outil peut s'en charger automatiquement pour vous. 

Et il le fait très intelligemment puisqu'il reconnaît même les anciennes syntaxes de propriétés afin de les rendre compatibles multi-navigateurs (par exemple pour les dégradés CSS3 ou les différentes versions du module flexbox).

LiveReload sur différents périphériques

Associé à une extension Chrome, Prepros offre la possibilité d'afficher en ligne son projet et surtout de voir rafraîchir la page automatiquement.

Il est également possible de tester sur mobiles et tablettes grâce au serveur intégré et à l'adresse IP qui est communiquée par l'outi.

FTP en un clic

Cette dernière fonctionnalité (réservée à l'offre payante - 19USD) permet de transférer tous les fichiers, ou uniquement ceux modifiés, vers un serveur FTP.

Conclusion

Au final, Prepros est un environnement de travail particulièrement pratique : il suffit d'enregistrer votre fichier pur qu'il soit automatiquement compilé, préfixé, minifié, mis en ligne et rafraîchi dans le navigateur !

D'autres outils de ce type existent : CodeKit (Mac uniquement) et Mixture.io.

Si vous connaissez déjà l'un de ces outils, n'hésitez pas à partager votre expérience ici.

Commentaires

benjaminzanatta a dit le

Adjugé vendu !

David-Dante a dit le

Avec Sublime text et Prepros (et Knacss), on dispose de bien jolis outils pour travailler.

Pour l'autoprefixer, il fait ça intelligemment en plus. Par exemple, pour "transform", il va juste insérer -ms- et -webkit-.

Pour les personnes sous Linux, il y a aussi koala-app.com en guise de lot de consolation. ^^ Il y a aussi ça que je viens de voir sur sidebar.io : getfireshell.com

Olivier C a dit le

Merci, je ne connaissais pas cette ressource et ça donne vraiment envie de s'y coller.

iManu a dit le

Quand il n'est pas utile d'installer grunt et ses dépendances sur un petit projet, Prepros est l'outil parfait, bien plus performant que les plugins SublimeText par exemple, ou Scout.
La fonction watch s'active par une simple case à cocher, pour Sass il compile en tenant compte du fichier contenant les @import pour ne sortir qu'un seul .css, et non pas un pour chaque .scss existant.
Je l'utilise depuis 3 semaines et ce n'est que du bonheur !

Manumanu a dit le

@David-Dante : Pas forcément bête, non. Firefox gère la propriété finale depuis suffisament longtemps, et la dernière version d'Opera utilisant Presto la prenait en charge aussi. Ne reste donc que les navigateurs sous webkit et IE9.

ILeG3nDz a dit le

ça a l'air vraiment, vraiment puissant ! La question que je me pose maintenant c'est Compass ou Prepos ? ^^

Raphael a dit le

@ILeG3nDz : Prepros n'est pas un langage ni un préprocesseur. Juste une interface graphique.
En clair, Prepros va te permettre de compiler du Compass.

ILeG3nDz a dit le

Salut Raphael,

Donc en gros on doit avoir Ruby, SASS / Compass d'install (ou la Compass APP) pour pouvoir s'en servir ?

Je l'ais encore test, mais cela ne devrait tarder :D

Raphael a dit le

@ILeG3nDz : pas la peine d'installer quoi que ce soit. Tout est déjà prêt :)
http://alphapixels.com/prepros/faq.html

David-Dante a dit le

@Manumanu : Oui, c'est bien ce que je dis. Il ne fait pas le bourrin à servir tous les prefixs dès qu'il détecte des propriétés css3. ;)

Manumanu a dit le

@David-Dante : Ah oui pardon, j'avais mal lu ton commentaire !

Nico3333fr a dit le

Testé sur un projet, plutôt convaincu ! :)

Shakup a dit le

Fidèle utilisateur de CodeKit sur Mac, j'ai longtemps espéré trouver un équivalent sur Windows. C'est maitenant chose faite ! Non seulement il est complet mais il sait se faire discret. Un très bon outil.

Heillige Leben a dit le

Attention, c'est tout de même un petit peu plus compliqué que ça.
Et pour faire tourner des plugins de compass (je pense à susy) ;
L'installation complète de ruby, sass, compass et du plugin semble nécessaire.
L'onglet "Advanced" des options semble fait pour ça.

Cela dit, peut être que Prepros reconnais susy s'il est installé en tant que plug in directement inclus dans compas... Mais j'ai pas compris comment...

Ten a dit le

Un peu dommage qu'il ne tienne pas compte des css natifs : la concaténation et minification de fichiers existants est très pratique, même si l'on n'utilise pas de préprocesseurs -_-

David-Dante a dit le

@Ten : Rien ne t'empêche de faire un dossier sass incluant des fichiers scss... qui reste en css natif. Je n'ai pas testé mais je ne vois pas pourquoi ça ne marcherait pas. ^^

Ten a dit le

@David-Dante : Un peu dommage d'en passer par là, non ? Il existe des outils qui concatènent et minifient du css natif sans que je doive changer leur extension ><

Raphael a dit le

@Ten : je suis un peu d'accord avec ça.

stilone a dit le

Hello,
J'ai testé cela dernièrement, c'est hyper bien foutu la combinaison.
https://github.com/polem/generator-gruig

David-Dante a dit le

@Ten : Oui mais tu n'as pas le coté "automatisé" de la chose. En modifiant le fichier css en scss, tu travailles sur ta css et prepross se charge de minifier et concaténer lors de chaque enregistrement.

C'est un petit hack mais je ne faisais que répondre à ta question au cas où tu n'y avais pas pensé. :)

ThomasF a dit le

Et est-il possible par l'intermédiaire de prepros de générer un export statique en compilant des fichiers HTML (ex : header.html à inclure dans le template de la page en cours) ?

Raphael a dit le

@ThomasF : Non, pas à ma connaissance. Mais la communauté sur Github est assez dynamique, peut-être suffirait-il de lui proposer ?

ThomasF a dit le

@Raphael, effectivement, c'est un réflexe que je n'ai pas mais c'est donc fait. Merci.

rigamarole a dit le

@ThomasF : Même suggestion que Raphaël. Le développeur Subash Pathak a l'air à l'écoute, très réactif et consciencieux. Étant donné que tu ne sembles pas être le seul à proposer cette modification, cela trouvera certainement un écho favorable à ses oreilles.

@Raphael : Merci pour cette trouvaille. Je vais tester ça sur mes prochains projets.

alexeyk a dit le

Excellent outil !

DavidC a dit le

Très bon outils, je l'utilise depuis plusieurs mois pour les petits projets.
La seule chose vraiment dérangeante, c'est son support assez limité de Haml.

Impossible de faire des render :partial ou ce genre de choses sans passer par du bidouillage (http://goo.gl/I4QkTa). J'ai l'impression que toutes les fonctionnalités natives à Ruby sont totalement absente, ce qui du coup fait perdre quand même pas mal de son charme à Haml.

J'ai noté qu'il était aussi préférable d'utiliser le config.rb pour Sass et Compass plutôt que de passé par Prepros.

Dans le genre petit mais complet, il y a fire.app (http://fireapp.kkbox.com/) qui est une perle dans le genre. Dommage qu'il soit payant et assez laid.