npm scriptsのbrowser-syncでSSI（サーバーサイドインクルード）を使う方法

こんにちはmacoです。

最近、gulpなどのタスクランナーからnpm scriptsに乗り換える人がいますが、npm scriptsのbrowser-syncでSSI（サーバーサイドインクルード）を使いたい場合もありますよね？

この記事では、npm scriptsのbrowser-syncでもSSIを行う方法を解説します。

ちなみにこの記事を書いている僕はWebエンジニアとして4年の実務経験があり、タスクランナーやnpm scriptsの使用経験もあるので、記事の信頼性にもつながると思います。

用意するもの

用意するものは次の3つです。

• browser-sync
• fs
• path

自分のpackage.jsonを見て、ないものはインストールしましょう。
インストールコマンドはそれぞれ次の3つです。

$ npm install browser-sync

$ npm install fs

$ npm install path

server.js作成する

server.jsというファイルをpackage.jsonと同じ階層に作成します。
ファイルの内容は次の通りです。

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

browserSync.init({
    server: 'サーバーのルートパス',
    files: 'サーバーのルートパス/**/*',
    rewriteRules: [
        {
            match: /<!--#include virtual="(.+?)" -->/g,
            fn: function(req, res, match, filename){
                const filePath = path.join('サーバーのルートパス', filename);
                if(fs.existsSync(filePath)){
                    return fs.readFileSync(filePath);
                }else{
                    return `${filePath} could not be found`;
                }
            }
        }
    ]
});

「サーバーのルートパス」は自分の環境に応じて変更します。

package.jsonの編集

最後に、package.jsonを変更します。※前後は省略しています。

/* 省略 */
"scripts" : {
    "watch-server": "node server.js"
}
/* 省略 */

起動の確認

プロジェクトディレクトリに移動し、以下のコマンドを打ってみましょう。

$ npm run watch-server

「watch-server」の部分はpackage.jsonに書いたものと同じにします。

SSIの埋め込みが確認できれば成功です！