Créer un environnement de développement pour votre client JS avec Coffeescript, Cake, Stylus et Uglifyjs (partie 1)

Développer des applications webs requiert désormais une bonne dose de travail côté client. En effet, la partie Javascript est presque codée comme un client lourd. Malheureusement, comme chacun sait Javascript n’est pas la panacée pour écrire des programmes conséquents. Cela demande aussi de maintenir une feuille de style à jour pour définir proprement le look and feel.

Heureusement avec l’arrivée de Node.js (un framework de développement pour serveur en javascript), une multitude de tools ont vu le jour pour développer efficacement avec Javascript :

  • Coffeescript : un langage à la syntaxe très légère qui est convertible en javascript. Ce langage est également enrichi en fonctionnalités (classes explicites, séquencement d’appels asynchrones…).
  • Cake : un système permettant de créer des fichiers de build qui utilise Node.js lors de leur exécution. Ceci est intéressant pour faire des builds évolués. C’est l’équivalent du makefile pour Coffeescript
  • Stylus : un langage à la syntaxe légère permettant de générer des CSS facilement.
  • Uglifyjs : un minifier de javascript pour générer le fichier le plus léger possible en bout de chaîne.

Avant de continuer nous allons installer ces quatre logiciels. Je ne m’étends pas sur leur fonctionnalités, chacun mériterait un long post.

Vous l’avez compris tout ces programmes se basent sur node.js, il nous faut donc l’installer :

git clone https://github.com/ry/node.git 
cd node
./configure

make && make install

Ensuite nous aurons besoin du gestionnaire de packet de Node.js, npm :

curl http://npmjs.org/install.sh | sh

Pour enfin installer nos quatre logiciels :

npm install coffe-script
npm install cake
npm install uglifyjs
npm install stylus

Chaque logiciel s’utilise avec la syntax suivante

# Compile un fichier de Coffeescript à JS.
coffee mon_fichier.coffee

# excécute l'action "action" du Cakefile
cake action

# Minifie un fichier JS vers un fichier minifié.
uglifyjs mon_fichier.js > mon_fichier_minify.js

# Convertit un fichier Stylus en CSS.
stylus mon_fichier.styl

Fin de la première partie, dans la seconde on attaque le vif du sujet avec le fichier de build, le Cakefile.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: