Node.js
変更時のオートリロード

nodemonを使用したソースコードの自動更新

nodemonパッケージを使用すると、ソースコード内のファイルを変更したときに自動的にプログラムをリロードすることができます。

グローバルにnodemonをインストールする

npm install -g nodemon （またはnpm i -g nodemon ）

ローカルにnodemonをインストールする

グローバルにインストールしたくない場合

npm install --save-dev nodemon （またはnpm i -D nodemon ）

ノーデモンの使用

nodemon entry.js （またはnodemon entry ）でプログラムを実行する

これは、通常、 node entry.js （またはnode entry ）の使用を置き換えnode entry 。

nodemonの起動をnpmスクリプトとして追加することもできます。これは、パラメータを指定して毎回入力しない場合に便利です。

package.jsonを追加：

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

この方法で、あなたはコンソールからnpm startを使うことができます。

Browsersync

概要

Browsersyncは、ライブファイルの閲覧とブラウザの再読み込みを可能にするツールです。それはNPMパッケージとして利用可能です。

インストール

Browsersyncをインストールするには、まずNode.jsとNPMをインストールする必要があります。詳細は、 Node.jsのインストールと実行に関するSOのマニュアルを参照してください。

プロジェクトを設定したら、次のコマンドでBrowsersyncをインストールすることができます：

$ npm install browser-sync -D

これにより、ローカルのnode_modulesディレクトリにBrowsersyncがインストールされ、開発者の依存関係に保存されます。

グローバルにインストールする場合は、 -Dフラグの代わりに-gフラグを使用します。

Windowsユーザー

WindowsにBrowsersyncをインストールする際に問題がある場合は、Visual Studioをインストールして、ビルドツールにアクセスしてBrowsersyncをインストールする必要があります。次に、使用しているVisual Studioのバージョンを次のように指定する必要があります。

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

このコマンドは、Visual Studioの2013バージョンを指定します。

基本的な使用法

プロジェクト内のJavaScriptファイルを変更するたびに自動的にサイトをリロードするには、次のコマンドを使用します。

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

myproject.devを、プロジェクトにアクセスするために使用しているWebアドレスに置き換えmyproject.dev 。 Browsersyncは、プロキシ経由でサイトにアクセスするために使用できる代替アドレスを出力します。

高度な使用法

上記のコマンドラインインターフェイスの他に、BrowsersyncはGrunt.jsおよびGulp.jsでも使用できます。

Grunt.js

Grunt.jsでの使用には、次のようにインストールできるプラグインが必要です：

$ npm install grunt-browser-sync -D

次に、この行をgruntfile.js追加します：

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

Gulp.js

BrowsersyncはCommonJSモジュールとして機能するので、Gulp.jsプラグインは必要ありません。次のようなモジュールが必要です。

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

これで、 Browsersync APIを使用してニーズに合わせて設定できます。

API

Browsersync APIは、 https : //browsersync.io/docs/apiにあります。