Grunt: Tests synchronisés entre appareil mobile & ordinateur.

werbeagentur frankfurt grunt yeoman

Teilen:

Google+TwitterFacebookLinkedInPinterestEmail

Si, comme moi, vous utilisez Yeoman et notamment Grunt pour développer localement vos Applications Web. Il vous est alors possible de tester votre application parallèlement (sur votre ordinateur et vos différents appareils mobiles).

Si vous n’utilisez pas encore Yeoman je sous conseille vivement d’y jeter un oeil: yeoman.io

Après avoir démarré, depuis l’emplacement de votre project, votre serveur local en effectuant la tâche Grunt:

grunt serve

Grunt observe alors tous les changements effectués aux fichiers dans ce dossier. Lors de la sauvegarde, la fenêtre de votre navigateur est automatiquement mise à jour et actualisée.
Si vous utilisez Yeoman pour échafauder votre projet le générateur yeoman a déjà crée un fichier pour vous (Gruntfile.js) avec tous le code nécessaire pour vous permettre de créer un « live Reload  » c.a.d rafraîchir l’affichage en temps pratiquement réel de votre page dans votre navigateur par défaut.

Néanmoins pour pouvoir tester votre Localhost (l’hôte local en français) sur vos appareils mobiles, il y a une modification supplémentaire et nécessaire à effectuer. Cherchez dans le fichier Grunt « Gruntfile.js » la section responsable de la connection au serveur local, si le nom de l’hôte est attribué à « localhost » changez le pour 0.0.0.0. Comme indiqué par le générateur (ligne 68):


// The actual grunt server settings
    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35729
      },


Ensuite, redémarrez votre serveur local, une nouvelle fenêtre de navigation devrait s’ouvrir et afficher votre site de développement. Votre url dans la barre d’adresse devrait alors ressembler à celle-ci localhost:9000 (9000 étant le « port »).

Vous avez maintenant besoin de votre adresse IP interne: dans votre Terminal entrez

ipconfig

et prenez note de votre adresse IP interne. Cela devrait ressembler à ceci: 192.168.2.1
Finalement, utilisez le navigateur de votre appareil mobile, avec lequel vous souhaitez synchroniser le développement, et entrez cette adresse IP suivie du port 9000 cela devrait ressembler à cette adresse 192.168.2.1:9000

Maintenant vous pouvez effectuer les modifications nécessaires à votre projet et remarquer les mises à jours automatiques dans vos navigateurs respectifs.

Il me reste cependant une dernière chose à ajouter: vos appareils doivent être connectés au même réseau que votre laptop ou ordinateur. Mais cela ne devrait poser aucun problème s’ils partagent le même réseau wifi.