1. Asegurarse de tener Node.js instalado

BrowserSync se instala a través de npm (el gestor de paquetes de Node.js). Si no tienes Node.js instalado, puedes descargarlo desde su sitio oficial.

Para comprobar si tienes Node.js instalado, abre una terminal en Visual Studio Code y ejecuta:

node -v

También verifica que npm esté disponible ejecutando: 

npm -v

 

2. Crear un proyecto 

Si aún no tienes un proyecto, puedes crear uno nuevo. Abre la terminal de Visual Studio Code y navega al directorio de tu proyecto o crea uno nuevo.

mkdir mi-proyecto
cd mi-proyecto

 

3. Inicializar package.json en tu proyecto

Para que tu proyecto maneje las dependencias con npm, debes inicializar un archivo package.json. En la terminal de Visual Studio Code, ejecuta el siguiente comando y responde a las preguntas del asistente o simplemente presiona «Enter» para los valores predeterminados.

npm init -y

Esto creará un archivo package.json en la raíz de tu proyecto.

 

4. Instalar BrowserSync

Una vez que hayas inicializado tu proyecto, instala BrowserSync como una dependencia de desarrollo usando npm. Ejecuta el siguiente comando en la terminal:

npm install browser-sync –save-dev

Esto descargará e instalará BrowserSync y lo agregará a las dependencias de desarrollo en tu package.json.

 

5. Crear un script para iniciar BrowserSync

Ahora, en tu package.json, agrega un script para iniciar BrowserSync. Abre el archivo package.json y agrega el siguiente bloque dentro del objeto "scripts":

 

{

«scripts»: {

«start»: «browser-sync start –server –files ‘index.html, css/*.css, js/*.js'»

}

}

 

Esto le dice a BrowserSync que:

• Inicie un servidor local (--server).
• Vigile los archivos index.html, cualquier archivo .css dentro de la carpeta css y cualquier archivo .js dentro de la carpeta js.

Si tu proyecto tiene una estructura diferente, ajusta las rutas de los archivos según sea necesario.

 

6. Iniciar BrowserSync

Una vez que hayas configurado el script, puedes iniciar BrowserSync usando el siguiente comando en la terminal de Visual Studio Code:

npm run start

Esto abrirá tu página en el navegador por defecto y automáticamente recargará la página cada vez que detecte cambios en los archivos mencionados en el script.

7. Configurar opciones adicionales de BrowserSync (opcional)

Si quieres ajustar la configuración de BrowserSync más allá del script básico, puedes usar un archivo de configuración (bs-config.js). Aquí tienes un ejemplo básico de configuración:

1. Crea un archivo bs-config.js en la raíz de tu proyecto.
2. Agrega la siguiente configuración:

 

module.exports = {

server: {

baseDir: «./»

},

files: [«*.html», «css/*.css», «js/*.js»]

};

 

Ahora, en lugar de usar el script en package.json, puedes iniciar BrowserSync con el archivo de configuración:

browser-sync start –config bs-config.js

 

8. Uso en Visual Studio Code

Cuando ejecutes el comando npm run start, BrowserSync iniciará el servidor y abrirá el sitio en tu navegador por defecto. Cuando hagas cambios en cualquier archivo que BrowserSync esté monitoreando (como HTML, CSS o JavaScript), el navegador se recargará automáticamente.

Inicializa el proyecto:
npm init -y

Agrega el script de inicio en package.json y ejecuta:
npm run start

 

* OJO: Verificar los paths si se corre desde windows:

«start»: «browser-sync start –proxy \»http://localhost/Carpeta/Proyecto/\» –files \»index.php, css/*.css, js/*.js\»»