Node.js
Automatisch opnieuw laden bij wijzigingen

Automatisch opnieuw laden bij wijzigingen van broncode met behulp van nodemon

Het nodemon-pakket maakt het mogelijk om uw programma automatisch opnieuw te laden wanneer u een bestand in de broncode wijzigt.

Nodemon wereldwijd installeren

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

Nodemon lokaal installeren

Als u het niet wereldwijd wilt installeren

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

Nodemon gebruiken

Voer uw programma uit met nodemon entry.js (of nodemon entry )

Dit vervangt het gebruikelijke gebruik van node entry.js (of node entry ).

Je kunt ook het opstarten van je nodemon toevoegen als een npm-script, wat handig kan zijn als je parameters wilt opgeven en ze niet elke keer wilt uittypen.

Voeg package.json toe:

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

Op deze manier kunt u gewoon npm start vanaf uw console.

Browsersync

Overzicht

Browsersync is een tool waarmee live bestanden kunnen worden bekeken en de browser opnieuw kan worden geladen. Het is beschikbaar als een NPM-pakket .

Installatie

Om Browsersync te installeren, moet u eerst Node.js en NPM hebben geïnstalleerd. Zie de SO-documentatie over Node.js installeren en uitvoeren voor meer informatie.

Nadat uw project is ingesteld, kunt u Browsersync installeren met de volgende opdracht:

$ npm install browser-sync -D

Hiermee wordt Browsersync in de lokale map node_modules en opgeslagen in de afhankelijkheden van uw ontwikkelaar.

Als u het liever wereldwijd installeert, gebruikt u de vlag -g in plaats van de vlag -D .

Windows-gebruikers

Als u problemen ondervindt bij het installeren van Browsersync op Windows, moet u mogelijk Visual Studio installeren, zodat u toegang hebt tot de build-tools om Browsersync te installeren. Vervolgens moet u de versie van Visual Studio die u gebruikt als volgt opgeven:

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

Deze opdracht geeft de 2013-versie van Visual Studio aan.

Basisgebruik

Gebruik de volgende opdracht om uw site automatisch opnieuw te laden wanneer u een JavaScript-bestand in uw project wijzigt:

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

Vervang myproject.dev door het webadres dat u gebruikt om toegang te krijgen tot uw project. Browsersync zal een alternatief adres uitvoeren dat kan worden gebruikt om toegang tot uw site te krijgen via de proxy.

Geavanceerd gebruik

Naast de opdrachtregelinterface die hierboven is beschreven, kan Browsersync ook worden gebruikt met Grunt.js en Gulp.js.

Grunt.js

Gebruik met Grunt.js vereist een plug-in die als volgt kan worden geïnstalleerd:

$ npm install grunt-browser-sync -D

Dan voeg je deze regel toe aan je gruntfile.js :

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

Gulp.js

Browsersync werkt als een CommonJS- module, dus er is geen plug-in Gulp.js nodig. Vereis eenvoudig de module als volgt:

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

U kunt nu de Browsersync API gebruiken om deze naar uw behoeften te configureren.

API

De Browsersync API is hier te vinden: https://browsersync.io/docs/api