CodeKit + Foundation 4 + Jade + Sass

Même si d'ordinaire je préfère utiliser des outils Unix et des commandes puissantes dans le Terminal, il y a des situations où un logiciel avec une interface graphique de qualité se révèle bien pratique.

CodeKit

CodeKit (MAC OSX) compile vos projets web en temps réel et rafraîchit automatiquement la page dans le navigateur.

Il permet l'utilisation de frameworks (il reconnaît un projet Compass par exemple) et de nombreux pré-processeurs, y compris Jade que j'apprécie beaucoup.

Cependant, utiliser CodeKit avec mon framework favori, Foundation, génère des erreurs si on ne le règle pas correctement.

Vu que Foundation vient de passer en “mobile first” ce mois-ci avec la quatrième version de ce framework responsif, c'est l'occasion de l'essayer !

Installation

Si ce n'est pas déjà fait, installez RubyGems.

Ensuite pour Foundation, il suffit d'une ligne dans le Terminal :

    sudo gem install zurb-foundation

Pour le reste, CodeKit est normalement déjà équipé, mais pour utiliser Foundation nous allons devoir installer la dernière version en date de Sass et de Compass.

    sudo gem install sass compass

Réglage de CodeKit

Allez dans les préférences puis cliquez sur l'icone de Sass sur la gauche. Repérez ensuite l'option comme montré par ma flèche rouge :

En cliquant ici vous allez pouvoir spécifier à CodeKit que vous voulez utiliser votre propre version de Sass : pointez simplement vers le binaire installé par la gem, normalement ici : /usr/bin/sass.bin

Vous pouvez également spécifier la dernière version de Compass par le même procédé, même si ce n'est pas obligatoire, en pointant l'option correspondante vers /usr/bin/compass.bin.

Vous êtes prêts à utiliser CodeKit avec Foundation.

Je vous propose de vous organiser d'une certaine manière.

Création d'un projet

Placez-vous dans votre dossier de développement et entrez la ligne suivante :

    compass create nomduprojet -r zurb-foundation --using foundation

Ouvrez le dossier puis créez dedans un dossier nommé public : déplacez ensuite tout le contenu à l'intérieur de ce nouveau dossier, à l'exception de scss et config.rb.

Créez-y également un dossier jade, et dedans un dossier includes.

On se retrouve avec :

Glissez le dossier du projet sur votre éditeur de code préféré, sans aucun doute Sublime Text 2… nous allons commencer par modifier le fichier config.rb.

On va tout simplement adapter le contenu à notre structure :

    css_dir = "public/css"
    images_dir = "public/img"
    javascripts_dir = "public/js"

CodeKit utilisera ces informations pour compiler les éléments correctement.

Glissez le dossier sur l'icone ou la fenêtre de CodeKit pour y ajouter votre projet.

Réglages spécifiques

Il faut indiquer à CodeKit de ne pas compiler ni filtrer ou concaténer les scripts de Foundation, en tout cas pas pendant le développement.

Pour cela, dans la fenêtre principale, sélectionnez tous les scripts (avec une icone orange) puis cliquez en haut à droite sur “Do not compile”.

Ils se retrouvent grisés dans la liste, vous êtes tranquille.

Vous devrez également, si CodeKit ne l'a pas fait automatiquement, indiquer le chemin de sortie des codes sources (relativement à leur dossier) :

Créez un page index.jade dans le dossier jade, rafraîchissez CodeKit puis indiquez-lui, de la même manière, de générer le html dans le dossier public.

Il reconnaîtra ensuite automatiquement les includes jade et scss et ne les compilera pas directement.

Automatique !

Tapez un peu de code Jade dans votre fichier index.jade et CodeKit va générer automatiquement le fichier index.html dans le dossier public.

Glissez ce fichier html dans un navigateur et CodeKit rafraîchira la page automatiquement à chaque fois que vous sauvegardez votre fichier jade.

Editez votre fichier scss, sauvegardez et CodeKit génère le css dans le dossier correspondant et modifie immédiatement la page dans le navigateur.

Vous n'avez plus qu'à placer le contenu du dossier public sur un serveur.

CodeKit compile votre code et génère votre site au fur et à mesure, dans les bons dossiers, vous laissant apprécier les processeurs modernes : Jade, Sass, CoffeeScript, etc, sans avoir besoin d'utiliser le Terminal si ce n'est pas votre truc.

Auteur: Eric Dejonckheere