szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:nodejs|< Node.js]]

====== Browser-sync ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2021-2025
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== Bevezetés =====

Élő újratöltés.


Webhely:
  * https://browsersync.io/


===== Projekt készítése =====

<code>
mkdir app01
cd app01
</code>


<code>
npm init -y
</code>

===== 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.

<code javascript>
{
  "scripts": {
    "start": "browser-sync"
  }
}
</code>

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

<code javascript>
{
  "scripts": {
    "start": "browser-sync app"
  }
}
</code>


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

<code javascript>
{
  "scripts": {
    "start": "browser-sync src"
  }
}
</code>

Az src könyvtárat akkor szokás használni, ha production környezetben a fájlok valamilyen átalakításon mennek át. Például fordítás, tömörítés, átírás.

===== 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:
<code javascript bs-config.json>
{
    "server": ["src"],
    "port": 3000,
    "watch": true
}
</code>



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

<code javascript bs-config.json>
{
    "server": [
        "src",
        "node_modules/bootstrap/dist/css",
        "node_modules/bootstrap/dist/js"
    ],
    "port": 3000,
    "watch": true
}
</code>

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

===== Indító script =====

A package.json részlete:

<code javascript package.json>
{
  "scripts": {
    "start": "browser-sync start --config bs-config.json"
  }
}
</code>

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

===== Parancssor =====

<code>
browser-sync start --server public --watch
</code>

===== Linkek =====

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