Actualités

[21/07/2017] Smile lance les premiers vélos solaires connectés à l’occasion du Sun Trip Tour 2017

Smile, leader des solutions IoT et open source, confirme sa solide expertise sur le marché de l’embarqué en participant activement à la course de vélos solaires du Sun Trip Tour.

[03/07/2017] Smile remporte le Drupagora d'Or 2017 du meilleur site e-commerce

Le vendredi 30 juin, la 3ème édition des Drupagora d'Or s'est déroulée à Paris.

[30/06/2017] Découvrez les projets de nos équipes au Hackathon Data Énergie

Les 29 et 30 juin, le Hackathon Data Énergie s'est déroulé au Liberté Living Lab à Paris.

Toutes les actualités picto
       

Vous avez besoin de mettre à jour votre Lecteur Flash Flash 7

Guillemet ouvrant l'actualité des solutions
et des technologies open source Guillemet fermant
picto

Plate-forme d’intégration continue pour projets mobiles : Automatisation du build

Dans cette suite d’articles, nous souhaitons mettre en place d’une plate-forme d’intégration continue pour des projets mobiles. Dans la partie précédente, nous avions introduit Grunt, un outil de build JavaScript. Dans cette partie, nous allons utiliser Grunt pour automatiser notre build (compilation de templates, exécution de tests, génération de documentation).

Arborescence du projet

A la racine de notre projet, on trouve les répertoires suivants:

Soit une arborescence de la forme suivante:

  • templates
    • **/*.handlebars
  • tests
    • SpecRunner.html
    • lib
    • spec
  • www
    • index.html
    • lib
    • app
      • **/*.js

grunt-contrib

Le package grunt-contrib (https://github.com/gruntjs/grunt-contrib) est un meta-package comprenant plusieurs tâches grunt très utiles, entre autres, clean et copy pour manipuler des fichiers et répertoires, requirejs pour optimiser des fichiers JavaScript utilisant require.js, mincss pour minifier des sources CSS, etc.

Ce package s’installe avec la commande :

npm install grunt-contrib

Les tâches du package sont chargées en ajoutant la fonction suivante au gruntfile:

grunt.loadNpmTasks('grunt-contrib');

Ce package permet de générer la documentation yuidoc (http://yui.github.com/yuidoc/) et de précompiler des templates handlebars (http://handlebarsjs.com/).

yuidoc

La tâche grunt-contrib-yuidoc est documentée ici: https://github.com/gruntjs/grunt-contrib-yuidoc/#overview.

On configure la tâche de la façon suivante pour notre projet:

yuidoc : {

 all : {

 "name" : "project name",

 "description" : "project description",

 "version" : "1.0.0",

 options : {

 paths : "www/app/",

 outdir : "doc/"

 }

 }

}

grunt yuidocgénère la doc dans le répertoire doc à la racine du projet.

handlebars

La tâche grunt-contrib-handlebars est documentée ici:

https://github.com/gruntjs/grunt-contrib-handlebars/#overview

handlebars : {
 all : {
 files: {
 "www/app/views/template.js": ["templates/**/*.handlebars"]
 }

grunt handlebarscompile les templates et dépose le runtime dans le repertoire www/app/views.

grunt-jasmine-task

Le package grunt-jasmine-task contient la tâche nécessaire pour jouer les tests jasmine via grunt:

npm install grunt-jasmine-task

PhantomJS

Le package utilise PhantomJS pour jouer les tests (https://github.com/jasmine-contrib/grunt-jasmine-task#getting-started).

PhantomJS, développé par Ariya Hidayat, est un navigateur WebKit sans interface. Il permet d’automatiser certaines tâches comme les tests fonctionnels ou les tests de performance.

L’exécutable est situé dans le répertoire bin de l’archive (http://phantomjs.org/download.html) qu’on ajoutera au PATH.

Gruntfile

On charge la tâche dans le gruntfile:

grunt.loadNpmTasks('grunt-jasmine-task');

On ajoute la configuration de la tâche:

jasmine : {

 all : {

 src : ['tests/SpecRunner.html'],

 timeout : 20000,

 errorReporting : true

 }

}

grunt jasmine joue alors les tests du fichier SpecRunner.html.

Créer une tâche Grunt

Une tâche grunt se déclare de la façon suivante:

module.exports = function(grunt) {

 grunt.registerMultiTask(taskname, description, function() {

 // My task

 });

};

Pour plus d’information sur l’api disponible :

https://github.com/gruntjs/grunt/blob/master/docs/api.md#creating-tasks

https://github.com/gruntjs/grunt/blob/master/docs/api.md#other-methods

On dépose la tâche dans un répertoire qu’on charge dans le gruntfile:

grunt.loadTasks('directory');

La touche finale

Pour effectuer le build on exécute:

grunt handlebars jasmine yuidoc

Pour simplifier la commande on enregistre les tâches suivantes:

grunt.registerTask(‘build’, ’handlebars jasmine yuidoc’);

grunt.registerTask(‘default’, ’build’);

gruntexécute alors la tâche build.

Conclusion

Nous venons d’utiliser Grunt pour automatiser notre build. En une simple commande on compile des templates, on exécute des tests et on génère de la documentation.

Dans le cadre d’un projet, nous utilisons Grunt pour compiler nos templates, exécuter les tests du projet, générer la documentation, copier des fichiers dans les archives de build, concaténer et minifier les fichiers JavaScript et CSS et packager nos applications.

Simon Basset
picto

Commentaires

Soyez la premiere personne à ajouter un commentaire sur cet article.
Ecrire un nouveau commentaire