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

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



##設定のゴール
・browser-syncでSSIも見れるようにする



##使用したツール
・コマンドプロンプト
・node.js



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



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

>npm/
>　┗ html/
>　　┗ index.html



##2. node.jsをインストールする
[Node.jsの公式サイト](https://nodejs.org/ja/)からインストールできます。
このダウンロードで、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`は大体下記のようになります。

```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`）が追加されます。

```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",
  "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`という名前で、下記のような設定をします。

```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": {〜}`部分を書き換えます。

```json:/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`コマンドを実行します）
<br>



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

----
##今回、作業するにあたってお世話になったサイト
・[Node.js (npm) をWindowsにインストールする](https://blog.y-yuki.net/entry/2018/11/11/113000)
・[Browsersync で SSI を使う (rewriteRules編)](https://qiita.com/matsuoshi/items/f4d99ccf939b37f5d989)