Node.js VexFlowでGruntを使う

Node.jsに戻る

概要

　VexFlowがGruntというプロセスフロー管理システムを使っているようで、javascriptのプロジェクトを変更する都度、Gruntでビルドすることによって効率的なjavascriptの体系に変換してくれるそうなのです。スクリプトを変更する都度、手動で毎回やってると日が暮れるらしい。こういうツールは他にもあるらしいので、Gruntが特別抜きんでてるわけでもないのだそうですが、VexFlowが採用しているところをみるとかなり一般的な方法と言えると思います。javascript系のプロジェクトファイルにGruntfile.jsやPackage.jsonというファイルがあれば、Gruntというシステムを使っていると見て、ほぼ間違いないそうです。フェイクで配置していたりするのは例外でしょうけど。

　MathJaxもそうだったけど、とても読みにくい形式にjavascriptが変換されているのはこういう仕組みをつかっているからだそうです。minify(ミニファイ)とかって呼んでるらしい。素人の自分にはそんな技術があることすら、よくわかっていなかったです。自分なりにVexFlowを改造して使いやすくしようかなって思ったことに端を発して、こんなものと付き合うことになりました。

　

導入

　GitやNode.jsをインストールしたことを確認しておきます。Versionが古くなってるかもなとおもったら更新しておきましょう。いらぬ躓きになります。まず、VexFlowの一式を配置しているフォルダに移動します。Gruntfile.jsやPackage.jsonがあるフォルダです。そこで

　Node.jsの更新

>npm install -g n
>n latest

　npmの更新

>npm install -g npm@latest

　VexFlowに必要なGrunt用モジュールのインストールは以下のコマンドです。

>npm install

　ってするだけで必要なノードパッケージモジュールがインストールされます。プロジェクトごとに必要なファイルやツールを分けれるのがGruntの特徴だそうです。なのでPackage.jsonに書かれている内容のモジュールがインストールされて、プロジェクトをダウンロードした人がすぐにプロジェクトに参加できるという、そんな感じの環境を提供できるので、とても便利なものらしいです。

　それもこれも、知っていればのことですが

　次に

>npm start

　ってするだけでいいらしいのですが、自分の場合は初心者だったせいか以下のような設定をしないとダメでした。

>git init
Initialized empty Git repository in (Path)/vexflow/.git/

　さらに

>git config --global core.ignorecase false
>git config --global core.autocrlf false
>git config --global user.email (メールアドレス)
>git config --global user.name (名前)

　もう一度

>git init
Reinitialized existing Git repository in (Path)/vexflow/.git/
>git add .
>git commit -m "Initial commit"
[master (root-commit) 72a8f42] Initial commit
271 files changed, 103207 insertions(+)
create mode 100644 (ファイル名)
…
create mode 100644 (ファイル名)
>git rev-parse HEAD
72a8f4254fd6e62d14e6a086cae49983cd0ea743

　SHA-1ハッシュというものが取得できるようになりました。これでいいらしいです。

　次に

>npm start

　とするとGruntが動き始めます。もちろんビルドエラーになることもあり得ます。ここからは入手したプロジェクトとの闘いです。

　ESMはECMAScriptModuleの略。Lintは繊維工業なんかで使われていた用語で糸から素材から異物を取り除くという作業のことで、それが転じて情報処理では不適切な状態を発見して修正する作業として使われるようになったDebugとはまた違う意味の是正の工程です。eslintはECMAScript向けのLint処理です。

ERROR in tests/accidental_tests.ts:28:5
TS2304: Cannot find name 'QUnit'.

　ってなると

npm install qunit

　ってするといいらしい。

　ってなったってことは、Node.jsやnpmが古いってことなんで、最初からやり直しした方がいいです。ここまで来てそんなこと言うなよ！って思うでしょ。でも、ここまでこないとわからないよ。

　

Grunt動作

　で、うまく行くと、以下のようになるようです。Gruntすげぇ。

>npm start

>> vexflow@4.2.2 start
>> grunt

Running "clean:build" (clean) task
>>> 1 path cleaned.

Running "webpack:prodAndDebug" (webpack) task
asset vexflow.js 969 KiB [emitted] [minimized] [big] (name: vexflow) 1 related asset
asset vexflow-bravura.js 557 KiB [emitted] [minimized] [big] (name: vexflow-bravura) 1 related asset
asset vexflow-petaluma.js 547 KiB [emitted] [minimized] [big] (name: vexflow-petaluma) 1 related asset
asset vexflow-gonville.js 492 KiB [emitted] [minimized] [big] (name: vexflow-gonville) 1 related asset
asset vexflow-leland.js 447 KiB [emitted] [minimized] [big] (name: vexflow-leland) 1 related asset
asset vexflow-core.js 347 KiB [emitted] [minimized] [big] (name: vexflow-core) 1 related asset
orphan modules 1.61 MiB [orphan] 110 modules
runtime modules 5.22 KiB 24 modules
cacheable modules 6.87 MiB
  ./entry/vexflow.ts + 110 modules 1.61 MiB [built] [code generated]
  ./entry/vexflow-bravura.ts + 103 modules 1.16 MiB [built] [code generated]
  ./entry/vexflow-gonville.ts + 103 modules 1.06 MiB [built] [code generated]
  ./entry/vexflow-leland.ts + 103 modules 1.02 MiB [built] [code generated]
  ./entry/vexflow-petaluma.ts + 103 modules 1.12 MiB [built] [code generated]
  ./entry/vexflow-core.ts + 98 modules 923 KiB [built] [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  vexflow.js (969 KiB)
  vexflow-bravura.js (557 KiB)
  vexflow-gonville.js (492 KiB)
  vexflow-leland.js (447 KiB)
  vexflow-petaluma.js (547 KiB)
  vexflow-core.js (347 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  vexflow (969 KiB)
      vexflow.js
  vexflow-bravura (557 KiB)
      vexflow-bravura.js
  vexflow-gonville (492 KiB)
      vexflow-gonville.js
  vexflow-leland (447 KiB)
      vexflow-leland.js
  vexflow-petaluma (547 KiB)
      vexflow-petaluma.js
  vexflow-core (347 KiB)
      vexflow-core.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.81.0 compiled with 3 warnings in 133284 ms

asset vexflow-font-bravura.js 204 KiB [emitted] [minimized] (name: main) 1 related asset
orphan modules 254 KiB [orphan] 2 modules
runtime modules 396 bytes 2 modules
./entry/vexflow-font-bravura.ts + 2 modules 254 KiB [built] [code generated]
webpack 5.81.0 compiled successfully in 64070 ms

asset vexflow-font-leland.js 93.4 KiB [emitted] [minimized] (name: main) 1 related asset
orphan modules 114 KiB [orphan] 2 modules
runtime modules 396 bytes 2 modules
./entry/vexflow-font-leland.ts + 2 modules 114 KiB [built] [code generated]
webpack 5.81.0 compiled successfully in 63967 ms

asset vexflow-font-petaluma.js 193 KiB [emitted] [minimized] (name: main) 1 related asset
orphan modules 219 KiB [orphan] 2 modules
runtime modules 396 bytes 2 modules
./entry/vexflow-font-petaluma.ts + 2 modules 219 KiB [built] [code generated]
webpack 5.81.0 compiled successfully in 63912 ms

asset vexflow-font-gonville.js 139 KiB [emitted] [minimized] (name: main) 1 related asset
orphan modules 158 KiB [orphan] 2 modules
runtime modules 396 bytes 2 modules
./entry/vexflow-font-gonville.ts + 2 modules 159 KiB [built] [code generated]
webpack 5.81.0 compiled successfully in 65953 ms

asset vexflow-font-custom.js 12 KiB [emitted] [minimized] (name: main) 1 related asset
orphan modules 17.8 KiB [orphan] 2 modules
runtime modules 396 bytes 2 modules
./entry/vexflow-font-custom.ts + 2 modules 18 KiB [built] [code generated]
webpack 5.81.0 compiled successfully in 63731 ms

asset vexflow-debug-with-tests.js 2.68 MiB [emitted] (name: vexflow-debug-with-tests) 1 related asset
asset vexflow-debug.js 1.79 MiB [emitted] (name: vexflow-debug) 1 related asset
runtime modules 1.74 KiB 8 modules
modules by path ./src/ 1.61 MiB
  modules by path ./src/*.ts 818 KiB 92 modules
  modules by path ./src/fonts/*.ts 829 KiB
    ./src/fonts/load_all.ts 689 bytes [built] [code generated]
    + 17 modules
modules by path ./tests/*.ts 699 KiB
  ./tests/index.ts 3.01 KiB [built] [code generated]
  ./tests/accidental_tests.ts 44.2 KiB [built] [code generated]
  ./tests/annotation_tests.ts 19.2 KiB [built] [code generated]
  ./tests/articulation_tests.ts 24.4 KiB [built] [code generated]
  + 68 modules
modules by path ./entry/*.ts 1.84 KiB
  ./entry/vexflow-debug.ts 917 bytes [built] [code generated]
  ./entry/vexflow-debug-with-tests.ts 971 bytes [built] [code generated]
webpack 5.81.0 compiled successfully in 104788 ms

Running "build:esm" task
ESM: Building to ./build/esm/
TypeScript: Compiling 199 files...
Writing ESM version data to C:\wwwserver\public_html\wiki.yo-net.jp\vexflow\build\esm\src\version.js

Running "build:types" task
Types: Building *.d.ts files in build/types/
TypeScript: Compiling 122 files...

Running "build:docs" task

Done.

　

不具合・トラブル

• 5816 verbose stack Error: EPERM: operation not permitted, rename path -> dist

Windowの古いNode.jsだと発生することがあるみたいな感じです。いろいろ調べたけど結局、Node.jsのアンインストール・インストールでカタがつきましたよ。

　

Node.jsに戻る