Statiqで依存関係にあるパッケージを更新するための準備をした話

ブログを作り直した話 で導入したStatiqで適用しているテーマでは以下のライブラリが依存関係として含まれている。これらを半自動更新するための準備が今回の目的。

• bootstrap
• @fortawesome/fontawesome-free
• jquery

これらは静的ファイルとして含まれているためテーマ側が更新を行わない限り変更されることはないため、必ずしも最新が含まれているわけではない。

今回は以下の順でスクリプトを設定し、出力時に自動更新されるようにする。

• npm：package.jsonの追加
• npm：対象パッケージの追加
• npm：ファイルコピー用パッケージの追加
• npm：scripts一括実行用パッケージの追加
• npm：scripts例
• VSCode：タスクと依存関係の追加

npmのインストール、VSCodeのインストールに関する内容は割愛する。

npm：package.jsonの追加

以下コマンドで追加する。

npm init

npm：対象パッケージの追加

サーバーにインストールするわけではないのでdevDependenciesに追加する。

npm i -D @fortawesome/fontawesome-free bootstrap jquery

npm：ファイルコピー用パッケージの追加

npm scriptsで実行環境に依存せずファイルをコピーするためのパッケージ「cpx」を追加する。

npm i -D cpx

npm：scripts一括実行用パッケージの追加

npm scriptsで特定のコマンドを一括実行するためのパッケージ「npm-run-all」を追加する。

npm i -D npm-run-all

npm：scripts例

最初のスクリプト「copy」が一括実行のためのもの。
残りのスクリプトが各パッケージの対象ファイルをinputフォルダ（Statiqの入力フォルダ）にコピーするもの。

package.json

{
    "scripts": {
        "copy": "npm-run-all copy:*",
        "copy:fontawesome-free-css": "cpx -C \"node_modules/@fortawesome/fontawesome-free/css/**\" \"input/vendor/fontawesome-free/css\"",
        "copy:fontawesome-free-webfonts": "cpx -C \"node_modules/@fortawesome/fontawesome-free/webfonts/**\" \"input/vendor/fontawesome-free/webfonts\"",
        "copy:bootstrap-js": "cpx -C \"node_modules/bootstrap/dist/js/**\" \"input/vendor/bootstrap/js\"",
        "copy:bootstrap-scss": "cpx -C \"node_modules/bootstrap/scss/**\" \"input/vendor/bootstrap/scss\"",
        "copy:jquery": "cpx -C \"node_modules/jquery/dist/**\" \"input/vendor/jquery\""
    }
}

VSCode：タスクと依存関係の追加

VSCodeのタスクでnpmパッケージのインストールとコピー、dotnetコマンドの実行を紐付ける。

.vscode/tasks.json

{
    "tasks": [
        {
            "label": "npm:i",
            "command": "npm",
            "args": [
                "i"
            ]
        },
        {
            "label": "npm:copy",
            "command": "npm",
            "args": [
                "run",
                "copy"
            ],
            "dependsOn": [
                "npm:i"
            ]
        },
        {
            "label": "dotnet:run",
            "command": "dotnet",
            "args": [
                "run"
            ],
            "dependsOn": [
                "npm:copy"
            ]
        },
    ]
}

依存関係のパッケージを更新し忘れることが多いため半自動化することで意識せずとも良いように、潜在的な問題も解消できればなお良い。