Color Adminを購入

現状のRC版hgnはWrapBootstrapというサイトで購入したBootstrapテンプレートを使用しています。
次の正式版でも別のテンプレートを購入して使おうかなと思ってまして、Color Adminというテンプレートを買ってみました。お値段は35ドル、購入時点のレートで4039円でした。
せっかくなので、自分でコンパイルしてみようとしたところ、エラーが出たりしたので解決までの流れを紹介しようと思います。
ちなみに私はNode.jsとかnpmでのパッケージ管理回りについての知識はほとんどありません…

なお、このテンプレートは管理画面でのみ利用しますので、一般ユーザーさんでこれを利用した画面を見ることはないでしょう…

npm installでエラー

Color Adminのドキュメントにある通りにadminのsrcフォルダでnpm installを実行してみました。すると次のようなエラーが出ました。

found 6 vulnerabilities (1 low, 2 moderate, 3 high)
  run `npm audit fix` to fix them, or `npm audit` for details

6つ脆弱性があるから、もっと新しいバージョンにしなさいよ！ということでしょうか。詳細は「npm audit」で、とあるので実行してみると、次の3つのパッケージがあかんということでした。

• gulp-sass
• glob-parent
• yargs-parser

自動でやってもらうのが楽なので、「npm audit fix」を実行すると

fixed 0 of 6 vulnerabilities

1個も直せませんでした…
「npm audit fix –force」をやってみるのもいいかもね？みたいな記載があるので、実行してみました。（強制的にバージョンを変えるっぽいので、後で何か影響が出るかもしれませんが…）

fixed 3 of 6 vulnerabilities in 834 scanned packages

3つ直りました。npm auditを見ると”gulp-sass”の表記が無くなったので、このパッケージはもう大丈夫そうです。
残りの2つに関しては、「npm i glob-parent@5.1.2」とかやってみたのですがダメ。package.jsonに記載がないものなので、どれかのパッケージの中で指定されているバージョンがダメなんでしょうね。
色々調べた結果、npm-force-resolutionsというやつで強制的に指定のバージョンにできるということでやってみました。

ますはインストール

npm i -g npm-force-resolutions

で、package.jsonの scripts のところに1つ加えて次のようにしました。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "preinstall": "npx npm-force-resolutions"
  },

もう一つpackage.jsonに新しく resolutions というのを加えました。

  "resolutions": {
    "glob-parent": "^5.1.2",
    "yargs-parser": "^20.2.9"
  }

これでnpm installは通りました！けども、warnが1つ出てます。

bootstrap@5.1.0 requires a peer of @popperjs/core@^2.9.3 but none is installed. You must install peer dependencies yourself.

depencenciesのところに “@popperjs/core”: “^2.9.3” を加えて、もう一度npm installしてエラーもワーニングもなく、すっきりインストールできました！

gulp でエラー

続いてgulpでコンパイルです。transparent テーマを使いたいので、これで実行すると…

gulp transparent

こんなエラーが出ました。

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:

  var sass = require('gulp-sass')(require('sass'));

書いてある通り、gulpfile.jsを以下のように書き換えました。

var sass = require('gulp-sass');

↑これを↓このように

var sass = require('gulp-sass')(require('sass'));

これでコンパイルして、cssやjsを出力できるようになりました。
あとは不要なものを消したり、欲しいものを追加したりしてやってみようと思います。

GitHubには上げない？

hgnのソースはGitHubで公開しているので、購入したテンプレートをアップするのはダメだと思うんですよね。（再配布になる？）
プライベートリポジトリにすれば大丈夫なのだろうと思いますが、公開しておきたいものなので、ローカルで保存しておくしかないかなぁ。
まぁ、他の人に実装を手伝ってもらうということもないでしょうし…