< Node.js

Browser-sync

Szerző: Sallai András

Copyright © 2021, Sallai András

Szerkesztve: 2021-2024

Licenc: CC BY-SA 4.0

Web: https://szit.hu

Bevezetés

Élő újratöltés.

Webhely:

https://browsersync.io/

Projekt készítése

mkdir app01
cd app01

npm init -y

Telepítés

Helyi telepítés esetén a projekt könyvtárában:

npm install --save-dev browser-sync

A Browser-sync használható globálisan telepítve. Ekkor nem szükséges helyben telepíteni és fordítva. A helyi telepítést részesítjük előnyben, így függőségként meg van jelölve a package.json fájlban.

start script

Ha az index.html fájlt a projekt gyökérkönyvtárában kell keresni.

{
"scripts": {
"start": "browser-sync"
}
}

Ha az index.html fájlt a projekt app könyvtárában kell keresni.

{
"scripts": {
"start": "browser-sync app"
}
}

Ha az index.html fájlt a projekt src könyvtárában kell keresni.

{
"scripts": {
"start": "browser-sync src"
}
}

A Browser-sync beállítása

A projekt gyökérkönyvtárában hozzunk létre egy konfigurációs fájlt. A neve lehet bs-config.json.

A bs-config.json:

{ "server": ["src"], "port": 3000, "watch": true }

A bs-config.json tartalma, ha Bootstrap telepítve van:

{ "server": [ "src", "node_modules/bootstrap/dist/css", "node_modules/bootstrap/dist/js" ], "port": 3000, "watch": true }

A fájlnév nem kötelezően bs-config.json, mivel indításnál kötelező megnevezni a --config kapcsoló után.

Indító script

A package.json részlete:

{ "scripts": { "start": "browser-sync start --config bs-config.json" } }

Az alapértelmezett konfigurációs fájl a bs-config.js, de ez is csak úgy működik, ha megadjuk a --config kapcsoló után fájl nevét. Ha pedig kötelező megadni, mindegy hogyan nevezzük el.

Parancssor

browser-sync start --server public --watch

Linkek

https://browsersync.io/docs/options (2024)