Node.js
Autoreload przy zmianach

Automatyczne ładowanie zmian kodu źródłowego za pomocą nodemon

Pakiet nodemon umożliwia automatyczne przeładowanie programu po zmodyfikowaniu dowolnego pliku w kodzie źródłowym.

Globalna instalacja nodemon

npm install -g nodemon (lub npm i -g nodemon )

Lokalna instalacja nodemon

Jeśli nie chcesz instalować go globalnie

npm install --save-dev nodemon (lub npm i -D nodemon )

Korzystanie z nodemon

Uruchom swój program z nodemon entry.js (lub nodemon entry )

Zastępuje to zwykłe użycie node entry.js (lub node entry ).

Możesz także dodać swój start nodemon jako skrypt npm, co może być przydatne, jeśli chcesz podać parametry i nie wpisywać ich za każdym razem.

Dodaj pakiet.json:

  "scripts": {
    "start": "nodemon entry.js -devmode -something 1"
  }

W ten sposób możesz po prostu użyć npm start z konsoli.

Browsersync

Przegląd

Browsersync to narzędzie, które umożliwia oglądanie plików na żywo i ponowne ładowanie przeglądarki. Jest dostępny jako pakiet NPM .

Instalacja

Aby zainstalować Browsersync, musisz najpierw zainstalować Node.js i NPM. Aby uzyskać więcej informacji, zobacz dokumentację SO dotyczącą instalowania i uruchamiania Node.js.

Po skonfigurowaniu projektu możesz zainstalować Browsersync za pomocą następującego polecenia:

$ npm install browser-sync -D

Spowoduje to zainstalowanie Browsersync w lokalnym katalogu node_modules i zapisanie go w zależnościach programisty.

Jeśli wolisz zainstalować go globalnie, użyj flagi -g zamiast flagi -D .

Użytkownicy systemu Windows

Jeśli masz problemy z instalacją Browsersync w systemie Windows, może być konieczne zainstalowanie programu Visual Studio, aby uzyskać dostęp do narzędzi do kompilacji w celu zainstalowania Browsersync. Następnie musisz określić używaną wersję programu Visual Studio:

$ npm install browser-sync --msvs_version=2013 -D

To polecenie określa wersję Visual Studio 2013.

Podstawowe użycie

Aby automatycznie ponownie ładować witrynę po każdej zmianie pliku JavaScript w projekcie, użyj następującego polecenia:

$ browser-sync start --proxy "myproject.dev" --files "**/*.js"

Zamień myproject.dev na adres internetowy, którego używasz do uzyskania dostępu do swojego projektu. Browsersync wyświetli alternatywny adres, którego można użyć do uzyskania dostępu do witryny za pośrednictwem serwera proxy.

Zaawansowane użycie

Oprócz interfejsu wiersza poleceń, który został opisany powyżej, Browsersync może być również używany z Grunt.js i Gulp.js.

Grunt.js

Użycie z Grunt.js wymaga wtyczki, którą można zainstalować w następujący sposób:

$ npm install grunt-browser-sync -D

Następnie dodasz tę linię do gruntfile.js :

grunt.loadNpmTasks('grunt-browser-sync');

Gulp.js

Browsersync działa jako moduł CommonJS , więc nie ma potrzeby używania wtyczki Gulp.js. Po prostu wymagaj takiego modułu:

var browserSync = require('browser-sync').create();

Możesz teraz użyć interfejsu API Browsersync, aby skonfigurować go do swoich potrzeb.

API

Interfejs API Browsersync można znaleźć tutaj: https://browsersync.io/docs/api