Logiciels pour gérer un site avec macOS

CodeKit, un compilateur multi-langages, et bien plus…

CodeKit est un utilitaire qui simplifie le travail des développeurs de sites Internet en traitant automatiquement des fichiers de code source de développement.

Il s'intercale entre l'éditeur de code source (comme l'éditeur de code BBEdit) et les navigateurs web : CodeKit se charge en effet d'optimiser les différents fichiers qui composent votre projet, mais aussi de rafraîchir l'aperçu dans votre navigateur dès que vous modifiez quelque chose.

Il permet notamment de minimifier, transpiler et optimiser, poétique n'est ce pas !

Compiler tous les langages du web, ou presque...

Son champ de prédilection tourne autour du développement web, et de la multitudes de langages et formats que l'on peut utiliser pour coder ses sites.

Voyons les différentes possibilités offertes selon les technologies utilisées.

CodeKit pour les feuilles de styles CSS

Le logiciel permet de compiler les sources Less, Sass (via la librairie Libsass) et Stylus (ce sont 3 outils permettant une syntaxe évoluée du CSS avec des variables et de la programmation simple) afin de générer les fichiers .css.

Egalement au programme, la fonction Autoprefixer, pour ajouter automatiquement les prefixes CSS nécessaires selon les navigateurs, et en fonction des versions minimales souhaitées : top !

Une des applications pratiques du compilateur Sass : personnaliser l'apparence du framework Bootstap 4 !

Transpilage de code en Javascript avec CodeKit

CodeKit permet aussi de générer du code Javascript à partir de sources CoffeeScript, TypeScript, ou ES6. Il utilise notamment Babel.js pour “transpiler” du ECMAScript 7, 6 ou 2015 vers ES5.

Application pratique : travailler avec des projets Angular 2+, qui se base sur Typescript.

Alléger le Javascript

CodeKit peut aussi se charger de concaténer et minifier les fichiers .js, ce qui fera gagner du temps de chargement pour les visiteurs du site.

Alléger les images

CodeKit permet également d'optimiser la taille des images au format SVG, PNG (via PNGQuant), GIF ou JPEG.

Tests en temps réel

Dès qu'une modification est enregistrée dans un fichier source, CodeKit lance l'optimisation adéquate pour générer un fichier prêt à publier sur le web.

Mais en même temps, via un serveur web interne, le logiciel est capable de mettre à jour la page du projet affichée dans n'importe quel navigateur : Mac, PC, iOS, Android (et pourquoi pas, réfrigérateur de cuisine connecté !). Plus besoin de rafraichir la page avec Commande+R.

Ajout de composants

Bower est intégré CodeKit, ce qui permet d'installer ou mettre à jour plus de 56000 composants d'un simple clic. De jQuery à WordPress en passant par AngularJS, Modernizr, Bootstrap, Zurb ou encore MathJS.

Correction d'erreurs et débogage

CodeKit intègre les célèbres outils suivant :

• ESLint : scrutez votre JavaScript avec le meilleur vérificateur de syntaxe, tout en pouvant paramétrer finement des centaines de règles commentées via l'interface).
• JSHint & JSLint (ces 2 composants sont également intégrés) : cela permet de voir à quelle ligne se situe l'erreur)
• CoffeeLint : Traquez les erreurs CoffeeScript également

Fonctionnement de base

Vous devrez dans un premier temps définir un projet dans CodeKit. Glissez simplement le dossier contenant le site dans l'application et vous aurez alors la liste des fichiers avec, pour chacun, différentes options. On peut ainsi réduire la taille des images, mais aussi optimiser les fichiers JavaScript en les combinant et en appliquant un processus “minify”. CodeKit contient d'autres fonctions, comme une vérification des fichiers JavaScript avec JSHint et JSLint ou encore la compilation de formats plus rares, comme les fichiers Less, Sass, Haml ou encore Compass.

CodeKit sait actualiser automatiquement l'onglet actif de Safari, Firefox ou Chrome (et même Internet Explorer/Edge dans une machine virtuelle Windows !) à chaque enregistrement de fichier dans votre éditeur de code. De quoi constater immédiatement l'impact d'une modification. Pour les utilisateurs plus avancés encore, cet utilitaire sait gérer des frameworks à intégrer dans plusieurs projets et on peut même utiliser CodeKit pour travailler sur un même projet à plusieurs.

En conclusion

Compiler, optimiser, compresser, corriger : CodeKit est globalement un très bon outil pour ces tâches. Il est ultra-pratique pour gérer dans une seule appli toute la panoplie LESS, SASS, JSHint et autres.

Il est un compagnon idéal de votre logiciel de codage, notamment de l'éditeur de code BBEdit.

Télécharger le logiciel CodeKit pour macOS (version d'essai disponible)

Points forts de CodeKit

• traite un grand nombre de langage du web (pour générer du HTML, CSS et JS propre)
• Autoprefixer pour les propriétés CSS spécifiques aux navigateurs !
• permet de recharger en live Chrome ou Safari (en réinjectant les CSS modifiées)
• erreurs de compilation via les notifications
• interface agréable

Points faibles de CodeKit

• assez gourmand en mémoire
• peut être substitué si on utilise pas beaucoup de ses fonctions (si vous voulez juste compiler du LESS, utilisez LESS.app)
• uniquement disponible sur macOS

Historique des versions de CodeKit ( Incident 57 )

3 versions majeures entre avril 2012 et octobre 2019

A découvrir également : les outils de développement intégrés aux navigateurs web.