Automatisez votre flux de travail avec browsersync
Je suis très clair sur mon flux de travail. J’aime les choses dans une certaine mesure. Ne vous répétez pas, c’est la philosophie qui sous – tend ma façon de travailler. Si quelque chose ressemble à une lourde tâche et que je me retrouve à le faire encore et encore, j’essaierai d’automatiser. Heureusement, les outils d’automatisation et les scripts WordPress vous permettent d’optimiser différentes tâches. Une fois automatisées, les choses deviennent simples. Le travail manuel, avec moins de code modulaire, est toujours difficile et prend beaucoup de temps, ce qui me dérange. Un des problèmes les plus ennuyeux est de recharger votre navigateur chaque fois que vous changez de sujet ou de plug – in.
Dans cet article, je vais vous montrer comment utiliser browsersync pour gagner du temps avec des tests de navigateur synchrones dans WordPress. À la fin de cet article, vous aurez une connaissance pratique de l’automatisation des tests de navigateur, de la synchronisation avec d’autres appareils et du partage en ligne des sites de développement locaux sans avoir à télécharger de fichiers sur le serveur de développement \/ mise en scène. Test automatique du navigateur avec browsersync
Browsersync m’a aidé à réduire d’au moins deux tiers le temps nécessaire pour synchroniser automatiquement différents navigateurs sur différents appareils. J’essaie de rendre mon site Web beau sous tous les angles. Cependant, il est difficile d’analyser chaque changement. Mais avec browsersync, vous pouvez atteindre vos objectifs très rapidement. Comment browsersync fonctionne – t – il? Browsersync vous aide à recharger automatiquement votre navigateur lorsque vous modifiez n’importe quel type de fichier. Par exemple, si vous changez la couleur de la barre de navigation et cliquez sur Enregistrer dans un fichier CSS, vous devrez vous connecter au site Web et le recharger pour voir si vous en avez besoin.
Ce n’est pas le cas.
Mais l’utilisation de browsersync ou il recharge automatiquement votre navigateur, et aussi longtemps que vous changez les fichiers ou que les changements sont trop petits, il les injecte dans le site et ne les recharge même pas. Cela permet d’économiser des heures de développement. Pour les sites statiques: browsersync crée un serveur HTTP simple qui exécute votre site sur un hôte local avec un port spécifique. Pour les sites dynamiques: Si vous travaillez sur un site dynamique comme WordPress, vous avez déjà un serveur qui exécute des contenus tels que VVV, desktopserver ou maxp \/ xamp. Dans ce cas, vous pouvez utiliser browsersync comme serveur mandataire pour la sauvegarde sur un serveur dynamique.
De plus, browsersync insère un fichier javascript sur chaque page. Le but de ce fichier est d’interagir avec le serveur et le client pour observer les changements dans le Code ou les actions du navigateur. Lorsqu’il détecte des changements, la page en direct est rechargée. Fonctions de browsersync l’impressionnant ensemble de fonctions de browsersync m’aide à: recharger en temps réel: les tests de synchronisation sur différents navigateurs peuvent être la fonction la plus importante de browsersync. Toutes les modifications apportées au Code et à la page sont automatiquement rechargées. Le rechargement en temps réel sur les navigateurs et les appareils m’aide à tester des fonctionnalités similaires en synchronisant les défilements, les clics, les entrées de modules, et plus encore. Injection CSS: l’une des principales caractéristiques de browsersync est de voir tous les fichiers CSS actuellement disponibles dans le répertoire CSS. Ensuite, lorsque vous effectuez des modifications, il met à jour tous les navigateurs liés sans permettre le rechargement de pages. Bonne synchronisation interactive: cela signifie que tous les changements peuvent être copiés dans tous les navigateurs et appareils en une seule opération. Tunnel: depuis pr, browsersync prend en charge la visualisation des sites Web en cours à n’importe qui
Premier jour. Il suffit de changer le port et de configurer le tunnel via une URL publique aléatoire (fournie par browsersync). Il offre une excellente occasion de tester sur plusieurs appareils et peut également être partagé avec vos coéquipiers en quelques minutes. Compte tenu des vitesses de connexion plus lentes: la vitesse d’Internet est un facteur de changement global que vous ne pouvez pas contrôler. Ainsi, pour comprendre comment votre site fonctionne à des vitesses Internet plus lentes, browsersync a une fonctionnalité que vous pouvez utiliser pour limiter la vitesse de connexion de votre site. Historique de l’URL: browsersync enregistre tout votre historique de navigation afin que vous puissiez envoyer des URL de test à tous les appareils. Outils tiers: browsersync peut facilement s’intégrer à plusieurs programmes d’exécution de tâches tels que gulp et Grunt. De plus, il s’applique également à tous les systèmes d’exploitation.
Browsersync vous permet de synchroniser un site sur plusieurs appareils, de faire défiler, de cliquer, d’entrer des formulaires et tout le reste. Tant mieux! Installer browsersync configurer pour installer le plug – in browsersync par défaut dans un projet WordPress, suivez les étapes suivantes: Étape 1: installer nodejs et NPM browsersync est un paquet NPM qui nécessite l’installation d’un noeud. JS. Si elle a déjà été installée, V érifiez la commande suivante: Node – V
V7.10.0
NPM – V
4.2.0 Étape 2: installer browsersync ensuite, installez browsersync globalement en tapant la commande suivante dans le terminal.
NPM install – G Browser sync ceci téléchargera tous les fichiers browsersync et les installera globalement pour les rendre disponibles pour votre projet. Pour confirmer que sa configuration a été effectuée avec succès, tapez: browser Sync – – version dans le terminal
De cette façon, vous devriez obtenir une réponse similaire à la version 2.18.12 de browsersync, la dernière version au moment de la rédaction de cet article.
Vous pouvez également utiliser l’installation browsersync sur la ligne de commande. Voici un ensemble de commandes que vous pouvez exécuter: $browser sync Start [OPTIONS] Start browsersync
$navigateur synchronisation initialisation création de profils
$navigateur synchroniser recharger envoyer l’événement recharger via le protocole HTTP
$recette Browser sync [nom] générer un fichier pour la recette Étape 4: aide pour trouver de l’aide pour browsersync sur la ligne de commande, tapez la commande suivante:
$ Synchronisation du Navigateur — Aide vous pouvez utiliser cette commande dans votre projet comme suit: # obtenir de l’aide uniquement pour la commande boot
$démarrer la synchronisation du navigateur – aide
Obtenir de l’aide uniquement pour les commandes de recette
$recette de synchronisation du navigateur – – aide Étape 5: commandes de démarrage de synchronisation du navigateur la commande de démarrage de synchronisation du navigateur prend en charge une série d’opérations commençant par « – ». Vous pouvez ajouter n’importe quel nombre de ces sujets pour tirer le meilleur parti de browsersync. Voici une liste non exhaustive – – Serveur – S exécute le serveur local (utilise CWD comme racine Web)
Répertoire – – servestatic, – – SS, à partir duquel les fichiers statiques sont servis
Port spécifie le port à utiliser
Proxy, – P proxy for Existing Servers
Mode proxy WS seulement – Activer le proxy websocket
Navigateur, – B sélectionnez le navigateur qui doit être ouvert automatiquement
Fichier, – f chemin du fichier à surveiller
Index spécifie quel fichier doit être utilisé comme page d’index
Le plug – in charge le plug – in browsersync
Extension spécifie que l’extension de fichier est retournée
– – startpath spécifie le chemin initial vers le navigateur ouvert
Https activer SSL pour le développement local
Répertoire affiche la liste des répertoires du serveur
Xip utilise le routage du domaine xip. – moi.
Le tunnel utilise une URL publique
Ouvrir l’URL (locale, externe ou tunnel) sélectionnée pour ouvrir automatiquement ou fournir l’URL
Cors ajoute un en – tête de contrôle d’accès à chaque demande
– – config, – C spécifie le chemin du fichier de configuration
Désignation de l’hôte
Mon flux de travail de développement. Je pense qu’il devrait être ajouté au kit d’automatisation WordPress. Fais – moi confiance. Ça en vaut la peine. Pour plus de détails sur la façon dont browsersync utilise des outils tels que gulp et Grunt, cliquez ici. J’aimerais avoir vos commentaires à ce sujet. Partagez votre expérience avec moi. Comme d’habitude, n’hésitez pas à laisser des questions ou des commentaires ci – dessous, et j’essaierai de répondre à chaque question ou commentaire.