Pour réaliser les applications mobiles de ses clients, Smile utilise généralement la plate-forme Apache Cordova (PhoneGap). Cette dernière permet de créer des applications distribuables sur les stores en utilisant les technologies du web (HTML5, CSS3 et JavaScript) et de cibler plusieurs OS avec le même cœur de développement.
La génération ou build de ces applications nécessite de nombreuses étapes qui sont à répéter à chaque fois que l’on souhaite pouvoir tester son application notamment sur smartphone réel.
Les étapes de build et leurs outils/langages associés :
- compilation des templates (handlebars, jade, etc.);
- compilation JavaScript (coffeeScript, etc.);
- compilation CSS (less, sass, etc.);
- analyse statique (jslint, csslint);
- concaténation et minification des JavaScript et des CSS;
- optimisation des images;
- exécution des tests;
- génération de la documentation;
- packaging natif des applications;
- archivage;
- déploiement.
Dans cette suite d’articles nous allons voir comment mettre en place une plate-forme d’intégration continue sous Mac OS X pour les projets mobiles de type webapp et/ou Apache Cordova.
La mise en place d’une plate-forme d’intégration continue nécessite un outil de build spécifique aux projets mobiles et front-end. On souhaite qu’il réponde à nos premiers besoins qui sont:
- Compilation de templates handlebars
- Exécution de tests jasmine
- Génération de documentation yuidoc
Introduction à Grunt
Grunt (http://gruntjs.com/) est un outil de build, développé par Ben Alman, et basé sur Node.js (http://nodejs.org/download/).
Installation de grunt
Grunt s’installe via le package manager de Node.js:
sudo npm install -g grunt
Gruntfile
Le gruntfile est le fichier de configuration d’un projet pour grunt, il se dépose à la racine du projet sous le nom de grunt.js.
Le gruntfile commence toujours par:
module.exports = function(grunt) {}
La variable grunt donne accès à l’api grunt.
initConfig
la fonction initConfig prend pour argument la configuration des tâches du build, par exemple:
grunt.initConfig({
min: {
{
['dist/built.js'],
dest: 'dist/built.min.js'
}
Ici, on configure la tâche “min” pour la cible “dist”, on prend le fichier “dist/built.js”, on le minifie et on dépose le résultat dans “dist/built.min.js”. On exécute le build avec la commande:
grunt min:dist
Si aucune cible n’est fournie, la tâche est exécutée pour toutes les cibles.
registerTask
grunt permet d’enregistrer de nouvelles tâches via la fonction “registerTask”. On peut l’utiliser pour définir un alias pour un ensemble de tâches:
grunt.registerTask(‘build’, ’lint qunit min’);
La commande “grunt build” effectue alors une analyse statistique des codes sources avec jslint, exécute les tests qunit et minifie les codes sources avec UglifyJS.
La documentation des tâches natives de Grunt est disponible ici :
https://github.com/gruntjs/grunt/blob/master/docs/toc.md#built-in-tasks.
loadTasks & loadNpmTasks
Grunt expose la fonction loadTasks qui charge des tâches depuis un répertoire:
grunt.loadTasks('tasks-directory');
Cette fonction est utile si on utilise des tâches qui ne sont pas disponibles sur npm.
La fonction loadNpmTasks permet justement de charger les tâches récupérées depuis npm:
grunt.loadNpmTasks('tasks-package');
On trouve facilement des plugins et tâches grunt sur http://gruntjs.com/.
Documentation
Pour plus d’information sur grunt:
https://github.com/gruntjs/grunt/blob/master/docs/toc.md
https://github.com/gruntjs/grunt/tree/master/docs
Conclusion
Après cette introduction à Grunt, on note que Grunt est un outil de build écrit en JavaScript et pour des projets en JavaScript.
En effet, il repose sur Node.js qui repose lui-même sur V8, le moteur JavaScript de Chrome, les bibliothèques JavaScript utilisées dans les projets front-end et mobiles sont facilement utilisables par Grunt.
Nous allons donc pouvoir nous appuyer sur cet outil pour automatiser les phases de build de nos applications.
Commentaires