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に戻る