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をインストールした上でですが、まず、VexFlowの一式を配置しているフォルダに移動します。Gruntfile.jsやPackage.jsonがあるフォルダです。そこで
>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処理です。
Node.jsに戻る