npmのbrowser-syncでローカルサーバー環境を作る #Node.js

browser-syncでSSIも見れるようにしたくて、他の方のサイトを参考にして作ってみました。
browser-syncはファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。
その他にもローカルサーバーも起動できたり、複数のブラウザで操作の同期が可能といった便利機能もあります。

設定のゴール

・browser-syncでSSIも見れるようにする

使用したツール

・コマンドプロンプト
・node.js

手順

作業ディレクトリの作成
node.jsをインストールする
npmプロジェクトを初期化する
必要なパッケージをダウンロードする
browser-syncでSSIを使えるようにする

1. 作業ディレクトリの作成

今回、ホームディレクトリとしてnpmフォルダを作リます。
さらにnpmフォルダ直下にhtmlフォルダを作リ、それをローカルサーバーとして設定してみたいと思います。

npm/
　┗ html/
　　┗ index.html

2. node.jsをインストールする

Node.jsの公式サイトからインストールできます。
このダウンロードで、Node.jsもnpmも入手できた状態になっています。
念の為、コマンドプロンプトでバージョンを確認してみましょう。

2-1. Node.jsのバージョン確認

node -v

2-2. npmのバージョン確認

npm -v

今回、私がインストールしたバージョンを調べた結果は、下記の通りです。

インストールしたバージョン

・Node.js：v8.12.0
・npm：6.4.1

3. npmプロジェクトを初期化

一番簡単な初期化方法は、空のpackage.jsonを作ってしまうことです。
テキストエディタを使って自分で作ることもできますが、コマンドを使ってpackage.jsonを作成する方がお手軽なので、今回はコマンドで作成していきます。
npmフォルダに移動した後、下記コマンドを実行します。

npm init

コマンドを実行すると対話式でプロジェクト名やユーザー名、バージョン番号など聞かれますが、デフォルトの設定で問題ないので、全部Enterキーを押してしまいましょう。
入力し終えると、npmフォルダ直下にpackage.jsonが作成されます。
作成されたpackage.jsonは大体下記のようになります。

/npm/package.json

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

4. 必要なパッケージをダウンロードする

必要なパッケージ3つ（browser-sync、fs、path）をダウンロードするため、下記コマンドを実行します。

npm install --save-dev browser-sync fs path

ダウンロードが完了すると、package.jsonに下記のように項目（devDependencies）が追加されます。

/npm/package.json

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "fs": "0.0.1-security",
    "path": "^0.12.7"
  }
}

5. browser-syncでSSIを使えるようにする

ここからは、package.jsonの他に、jsも作成していきます。

5-1. jsの作成

server.jsという名前で、下記のような設定をします。

/npm/server.js

const browserSync = require('browser-sync');
const fs = require('fs');
const path = require('path');

browserSync.init({
  server: './html/',
  files: './html/',
  rewriteRules: [
    {
      match: /<!--#include virtual="(.+?)" -->/g,
      fn: function(req, res, match, filename) {
        const filePath = path.join('html', filename);
        if (!fs.existsSync(filePath)) {
          return `<span style="color: red">${filePath} could not be found</span>`;
        }
        return fs.readFileSync(filePath);
      }
    }
  ]
});

5-2. package.jsonの編集

node server.jsとコマンドを実行してserver.jsを呼び出すことも可能ですが、他のパッケージと同じように呼び出せていた方が何かと便利なので、package.jsonを編集します。
server.jsを呼び出すために、"scripts": {〜}部分を書き換えます。

/npm/package.json

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node ./server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "fs": "0.0.1-security",
    "path": "^0.12.7"
  }
}

これにより、下記コマンドを実行したら、ローカルサーバーが立ち上がるようになります。

npm run start

これで作業は完了です。
.gitignoreでnode_modulesをトラッキング対象外とした状態でGitに登録すると、他の人も同じ環境下でコーディングができるようになります。
（他の人も同じ環境下にするには、リモートリポジトリをcloneした後、npm installコマンドを実行します）

最後までお読みいただき、ありがとうございました。

今回、作業するにあたってお世話になったサイト

・Node.js (npm) をWindowsにインストールする
・Browsersync で SSI を使う (rewriteRules編)