Automatice su flujo de trabajo con BrowserSync

Soy muy específico sobre mi flujo de trabajo. Me gustan las cosas de cierta manera. Seco: no te repitieras, fue la filosofía básica detrás de la forma en que trabajo. Si algo me parece una tarea terrible, algo que me despierto, una y otra vez, me esforzaré por automatizar. Afortunadamente, las herramientas de automatización de WordPress y los scripts de automatización le permiten optimizar múltiples tareas. Una vez automatizado, las cosas se vuelven fácilmente y sin errores. El trabajo manual, con un código menos modular, siempre es pesado, requiere mucho tiempo y causa mucho dolor. Uno de los problemas más aburridos es la recarga del navegador cada vez que cambia algo en su tema o complemento.
En esta publicación, presentaré las pruebas del navegador sincronizado que ahorra tiempo en WordPress usando BrowserSync. Al final de este artículo, estará equipado con el conocimiento práctico necesario para automatizar las pruebas del navegador, su sincronización con otros dispositivos y el intercambio en línea de sus sitios de desarrollo locales sin tener que cargar archivos a un servidor de desarrollo/diseño. Prueba automática de navegador con BrowserSync

BrowserSync es una herramienta de automatización que proporciona un proceso rápido de desarrollo web. Lo hace sincronizando los cambios en archivos e interacciones en múltiples dispositivos.
Browsersync me ayudó a reducir al menos dos tercios del tiempo que tuve que gastar para automatizar la sincronización entre diferentes navegadores en diferentes dispositivos. Trabajé duro para que mi sitio se viera bien en cualquier ángulo. Sin embargo, el análisis de cada cambio se vuelve difícil. Pero con BrowserSync puedes alcanzar tus objetivos con bastante rapidez. ¿Cómo funciona Browsersync? BROWSERSYNC le ayuda a recargar automáticamente su navegador cuando se cambia cualquier tipo de archivo. Por ejemplo, si ha cambiado el color de la barra de navegación y ha presionado el rescate en un archivo CSS, deberá venir a su sitio web y recargarlo para ver si el cambio realmente ha ocurrido. Pero con Browsersync, o lo hará automáticamente Recarga el navegador por usted, tan pronto como cambie un archivo, o si los cambios son demasiado pequeños, los inyectará dentro del sitio, sin siquiera recargarlo. Por lo tanto, ahorre horas de desarrollo. Para sitios estáticos: BROWSERSYNC creará un servidor HTTP simple que ejecuta su sitio en localhost con un puerto en particular. Para sitios dinámicos: si trabaja en un sitio dinámico, como WordPress, ya tiene un servidor que se ejecuta a través de algo como VVV, DesktopServer o MAMP/XAMP, etc. En este caso, puede usar BrowserSync para un servidor proxy para acercarse a su servidor dinámico.
BROWSERSYNC también inyecta un archivo JavaScript en cada página. El propósito de este archivo es interactuar con el servidor y el cliente para rastrear los cambios en el código o acción del navegador. Cuando detecta cualquier modificación, hace una recarga de la página en vivo. BrowserSync presenta el impresionante conjunto de funciones de BrowserSync me ayuda con las siguientes cosas: Recarga en vivo: las pruebas sincronizadas en diferentes navegadores son probablemente la característica más importante de BrowserSync. Todos los cambios en su código y página se recargan automáticamente. La recarga en tiempo real en navegadores y dispositivos me ayuda a probar funciones similares con un solo clic con desplazamiento sincronizado, clics, entradas de formularios, etc.
Inyección CSS: una característica principal de BrowserSync es rastrear todos los archivos CSS que están actualmente disponibles en su directorio CSS. Más tarde, cuando se realiza un cambio, actualiza todos los navegadores conectados sin dejar que se recargue ninguna página web.
Sincronización bien interactuada: esto significa que todos los cambios se reflejan en todos los navegadores y dispositivos en un solo movimiento.
Tunnelation: Mostrar un sitio web en curso para cualquier persona es una característica que BrowserSync acepta desde el primer día. Simplemente cambie el puerto y configure un túnel a través de una URL pública aleatoria (proporcionada por BrowserSync). Ofrece una excelente oportunidad para probar en múltiples dispositivos y también para compartir con sus colegas en unos minutos.
Desarrolle teniendo en cuenta las conexiones más lentas: la velocidad de Internet es un factor que puede variar a nivel mundial y no tiene control sobre ello. Por lo tanto, para tener una idea de cómo funciona su sitio a una velocidad de Internet más baja, BrowserSync tiene una función que puede usar para reducir la velocidad de conexión. Navegación para que pueda enviar una URL de prueba a todos los dispositivos.
Herramientas de tercera parte: BrowserSync puede integrarse fácilmente con múltiples aplicaciones de cinta de correr como Gulp y Prim. También funciona con todos los sistemas operativos.
BROWSERSYNC puede sincronizar sitios en varios dispositivos, pergaminos, clics, entradas de formulario y todo. ¡Lo cual es súper fuerte! Instalación de la configuración de BrowserSync Para instalar el complemento de BrowserSync predeterminado en su proyecto de WordPress, siga estos pasos: Paso #1: Instalar NodeJS y NPM BrowserSync es un paquete NPM y necesita instalarse Node.js. Si ya lo ha instalado antes, verifique los siguientes comandos: nodo -v
# V7.10.0
Npm -v

# 4.2.0 Paso 2: Instale BrowserSync luego, instalará BrowserSync a nivel mundial, escribiendo los siguientes comandos en el terminal.
NPM Install -G Browser -Sync Esto descargará todos los archivos de BrowserSync e instalará a nivel mundial para que estén disponibles para sus proyectos para confirmar la finalización exitosa de su instalación, en su tipo de terminal: Browser -sync –Versión
Al hacerlo, debe obtener una respuesta como Browsersync versión 2.18.12, que es la última al momento de escribir.
Paso #3: Uso de BrowserSync con su línea de comando, también puede usar su BrowserSycn con la línea de comandos. Aquí está el conjunto de comandos que se pueden ejecutar: $ browser-sync inicio [opciones] inicio browsersync $ browser-sync init crea un archivo de configuración
$ BROWSER-SYNC RELOAD envía un evento de recarga a través del protocolo HTTP
$ BROWSER-SYNC Receta [Nombre] Genere archivos para una receta Paso #4: Ayuda en la línea de comandos para buscar navegserSync, escriba el siguiente pedido:

$ BROWSER-SYNC -HELP Puede usar este comando en su proyecto de la siguiente manera: # Obtenga ayuda solo para el pedido de inicio
$ Browser-sync inicio-Help
# Obtenga ayuda solo para el comando de recetas
$ BROWSER-SYNC Reciproci-Help Paso #5: Comandos de inicio de Sync Sync Sync Inicio Aceptar un conjunto de acciones precedidas por un “-“. Puede agregar cualquier número de estos argumentos para obtener los mejores resultados de BROWSERSYNC. Aquí hay una lista de inexhaustiva. -Server, -s rolla un servidor local (use su CWD como raíz web)

-servestatic, -ss directores desde los cuales servir archivos estáticos
-port especifique un puerto para usar
-Proxy, -p proxy un servidor existente
-WS solo en modo proxy -inable proxy webocout
-Browser, -B Elija qué navegador debe estar abierto automáticamente
-Files, -f las pistas de los archivos a seguir
-dex especifica qué archivo debe usarse como una página de índice
-Plugins cargue los complementos de BrowserSync
-Extensiones Especifique extensiones de archivos de repuesto
-StartPath especifique la forma inicial para el navegador abierto
-HTTPS activar SSL para el desarrollo local
-Directorio muestra una lista de director para server-xip utilizando el enrutamiento del dominio XIP.IO
-Tunnel usa una URL pública
-Apen elige qué URL se abre automáticamente (local, externo o túnel) o proporcione una URL
-Cor agregue encabezados para controlar el acceso a cada solicitud
-config, -c especifica una forma de configuración
-Host especifica un nombre de host para usar
-Loglevel establece el nivel de salida del registrador (silencio, información o solución de problemas)
-RROAD -Delay tiempo en milisegundos para retrasar el evento de recarga después de los cambios de archivo
-Engrimento de carretera restringe la frecuencia en la que los eventos del navegador: la recarga se puede emitir a los clientes conectados
-Port-Informe especifique un puerto para usar la interfaz de usuario
-WatchEvents especifica en qué eventos de archivo responder
-Notificar desactiva el elemento de notificación en los navegadores
-O-Open no abre una nueva ventana del navegador
-No Online obliga al uso fuera de línea
-No-No estoy iniciado la interfaz de usuario
-No-ghost-mode desactiva el modo fantasma
-No-Inject-Change Recarga a cada cambio de archivo
–No-Reel-on -Star no recarga automáticamente todos los navegadores después de un reinicio me permita mostrarle cómo puede usarlos con algunos ejemplos útiles.
Paso #6: Ejecutando BROWSERSYNC Estoy seguro de que tiene una idea decente sobre BrowserSync y su funcionamiento. Definamos ahora los pedidos de operación real y veamos cómo funciona. Mencioné que BrowserSync crea un servidor para sitios web estáticos y puede usarse como proxy para sitios dinámicos. Por lo tanto, define comandos separados para cada uno de ellos. Sitios web estáticos Si desarrolla un sitio estático, vaya a la carpeta del proyecto del sitio y en la carpeta raíz ejecute este comando en su inicio de sincronización del navegador-archivos de servidor “CSS/*. CSS” “CSS/”./* Medios Cualquier cosa/todos los directorios y todos los archivos dentro de ellos. Sitios web dinámicos porque con el desarrollo de WordPress, ya tiene un servidor que ejecuta su sitio dinámico (por ejemplo, DesktoPser, MAMP, VVV, etc.)- Aquí puede usar BrowserSync como proxy. A localmente. I Local. Tenga un sitio local llamado local.dev para iniciar BrowserSync para dicho sitio, ejecute el siguiente comando: BROWSER-SYNC START-PRXY “LOCAL.DEV”-ARCHIVOS “**/*” Y BROWSERSYNC comenzará a seguir su dinámica Sitio para Modi hijas.
Paso #7: Túnel Como mencioné anteriormente, BrowserSync le permite compartir un sitio de desarrollo local con sus compañeros de equipo en Internet, directamente desde su propia computadora. Aquí es donde interviene la opción de túnel de BrowserSync. Cada vez que comience BROWSERSYNC, ingrese el argumento “-Tunnel” como: BROWSER-SYNC START-PRIXY “LOCAL.DEV”-ARCHIVOS “**/*”-CLORACIÓN DE TUMNEL Este comando le dará un conjunto de la siguiente información : URL local: esta es la URL habitual de su anfitrión local, que continúa recargándose para sus cambios.
La URL externa: la URL que puede acceder en la red Wi-Fi local, la que uso para probar mi sitio en una serie de otros dispositivos.
La URL del túnel: la URL que puede compartir público con compañeros de equipo de todo el mundo y pueden echar un vistazo a su sitio local, dentro de su computadora, como en un servidor provisional.
UI: Esto es predeterminado para la configuración de BrowserSync.
UI externa: para establecer la interfaz de usuario implícita en cualquier red local, use este enlace externo.
BROWSERSYNC UI Haga clic en el enlace BROWSERSYNC y se le dirigirá a una nueva ventana del navegador (sugerencia: puede presionar y presionar el comando ⌘ en Mac al hacer clic en el enlace del terminal para abrirlo de inmediato). Aquí encontrará una gama de opciones que se pueden configurar. Todo lo que tiene que hacer es hacer clic en la barra lateral a la izquierda y configurarla en consecuencia.