Actualités

[22/05/2017] Des Smiliens récompensés lors du Hackathon Carrefour !

Notre équipe, composée en partie de Smiliens, a remporté le Prix du Code et celui de l'Incubation lors du Hackathon Carrefour, organisé ce week-end à Paris !

[18/05/2017] OpenShift, le nouveau livre blanc Smile !

Smile publie aujourd'hui un livre blanc dédié à OpenShift, le PaaS open source orienté DevOps. A télécharger dès maintenant !

[15/05/2017] Smile décroche le label HappyAtWork 2017 !

Pour la 2ème année consécutive, Smile obtient le label HappyAtWork for Starters qui récompense les entreprises où il fait bon débuter sa carrière !

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