Example de projet statique

Cette documentation explique comment automatiser les taches répétitives d'un projet pour vous laisser vous concentrer sur votre travail.

Préparer l'environnement

La première fois que vous récupérez le projet, vous devez préparer/adapter votre environnement pour ce projet.

Avant toute chose, si ce n'est déjà fait, vous devez installer les outils suivant sur votre système:

• Ruby
• Rubygems
• Bundler
• NodeJS
• grunt-cli

Si vous utilisez un Mac, vous devez installer XCode et les outils de ligne de commande (cela installera automatiquement Ruby et Rubygems)

NOTE : Toute les commandes ci-après doivent être executé depuis le repertoire du projet, jamais dans l'environnement global.

Environnement Ruby

Ce projet à besoin de certaines Gem pour pouvoir être automatisé.

• compass 0.12.2

A chaque fois que vous prévoyez de travailler sur ce projet, vous devez vous assurez que les Gems de votre environnement sont dans les versions attendu par le projet. La façon la plus simple de mettre l'environement en conformité est d'utiliser bundler.

Pour mettre votre environnement à jour, utilisez cette commande :

$ bundle install

**NOTE : ** Si vous ajoutez des Gems pour automatisé le projet, vous devez mettre à jour les fichiers Gemfiles et Gemfiles.lock pour que les autres developpeurs puissent mettre leur environnement à jour proprement.

Environnement NodeJS

Ce projet automatise les taches grace à grunt et utilise les modules NodeJS suivant :

• grunt 0.4.4
• grunt-bower 0.31.1
• grunt-contrib-clean 0.5.0
• grunt-contrib-compass 0.6.0
• grunt-contrib-connect 0.5.0
• grunt-contrib-copy 0.4.1
• grunt-contrib-imagemin 0.4.0
• grunt-contrib-uglify: 0.4.0
• grunt-contrib-watch 0.5.3
• assemble 0.4.28
• lodash 2.4.0
• js-beautify 1.4.2

Pour installer les modules dans le repertoire de votre projet, utiliez la commande suivante:

$ npm install

NOTE : Si vous ajoutez des modules pour automatiser le projet, vous devez mettre à jour le fichier package.json pour que les autres developpeurs puissent mettre leur environnement à jour proprement.

La façon la plus simple de mettre ce fichier à jour et d'ajouter l'option de commande --save-dev lorsque vous utilisez npm intall pour ajouter un module.

Travailler sur le projet

Pour produire une version statique du projet, utilisez la commande suivante:

$ grunt build

Cela va produire une version de "développement" et une version de "production". La première est celle qui sera utlisée pendant votre travail; la seconde sera celle qui sera publiée en production (avec les outils de developpement en moins et des optimisation supplémentaire sur les ressources qui peuvent l'être)

NOTE : Il est recommandé d'executer cette commande la première fois que vous récupérez le projet et à chaque fois que vous mettez le projet à jour.

Pour vous simplifier la vie, utilisez l'observateur pour qu'à chacun de vos changements ceux-ci soient automatiquement pris en compte dans la version statique de developpement du projet.

Pour lancer l'observateur, utilisez la commande suivante :

$ grunt watch

Si vous le souhaitez, vous pouvez en même temps lancer un serveur web qui permettra de consulter le site web statique généré à l'adresse http://localhost:8000

Pour lancer l'observeur et le serveur web en même temps, utlisez la commande suivante:

$ grunt live

NOTE : Le serveur lancé de cette manière utilise livereload : A chaque fois que l'observateur verra un changement, le serveur mettra la page à jour.

Pour lancer le serveur seul sur la version de développement, utilisez la commande suivante:

$ grunt connect:dev

Pour lancer le serveur seul sur la version de production, utilisez la commande suivante:

$ grunt connect:prod