Utilisation de Browser-Sync avec Yeoman Webapp
Mise à jour!
Ce post est super ancien . Allez simplement sur bowsersync.io à la place.
Toute personne disposant d'une suite de tests multi-appareils connaîtra la difficulté de tester des formulaires ou simplement de naviguer sur un site un navigateur à la fois. Entrez grunt-browser-sync , une tâche GruntJS qui gère des choses comme :
- Liens : cliquer sur un lien mettra à jour tous les navigateurs avec la nouvelle URL
- Défilement : Faites défiler dans un navigateur ou un appareil et regardez les autres suivre votre commande
- Formulaires : saisissez du texte dans un formulaire et, oui, tous les autres navigateurs d'appareils emboîtent le pas !
Le brancher
Voici comment faire fonctionner Browser Sync avec le générateur d'applications Web de Yeoman . Je suppose que vous savez comment faire fonctionner l'application Web de base, donc je vais sauter cette partie. Sinon, suivez l'impressionnante documentation sur Yeoman.io .
Tout d'abord, installons grunt-browser-sync :
$ npm install grunt-browser-sync --save-dev
Modifier Gruntfile.js
Ensuite, nous allons modifier le fichier Gruntfile.js fourni avec l'application Web. Il n'y a que deux modifications nécessaires pour que cela se produise. La première consiste à ajouter les options de la tâche browser_sync :
browser_sync: { files: { src : [ '/*.html', '.tmp/styles/{,*/}*.css', '{.tmp,}/scripts/{,*/}*.js', '/images/{,*/}*.{gif,jpeg,jpg,png,svg,webp}' ], }, options: { watchTask: true, ghostMode: { scroll: true, links: true, forms: true }, server: { baseDir: '' } } }Cette configuration est configurée pour surveiller tous les fichiers susceptibles de changer dans l'application, qui n'est qu'un copier-coller de la section livereload. Nous avons également défini l'option 'watchTask' sur true pour que Browser Sync fonctionne avec la tâche grunt-watch, activé le mode fantôme pour le défilement, la liaison, etc., et avons défini le répertoire racine sur notre répertoire d'applications. Consultez le fichier README de la synchronisation du navigateur pour plus d'options.
Ajouter la tâche
La dernière étape consiste à ajouter la tâche elle-même. La documentation indique de placer la tâche browser_sync avant la tâche watch :
grunt.registerTask('serve', function (target) { if (target === 'dist') { return grunt.task.run(['build', 'connect:dist:keepalive']); } grunt.task.run([ 'clean:server', 'concurrent:server', 'autoprefixer', 'connect:livereload', 'browser_sync', 'watch' ]); });Premier démarrage
Vous devriez pouvoir lancer le grunt server à partir d'ici. Pointez tous vos appareils vers l'URL que Browser Sync a automatiquement identifiée comme étant votre URL locale et regardez la pure magie se produire sous vos yeux.
Remarques
Une chose que j'ai découverte à propos de la fonction de synchronisation des formulaires est que chaque champ doit avoir un attribut ID. Bien sûr, vous l'avez déjà pour toutes vos étiquettes de formulaire accessibles, n'est-ce pas ?