「Node.js VexFlowでGruntを使う」の版間の差分

提供:yonewiki
9行目: 9行目:


=== '''導入''' ===
=== '''導入''' ===
 GitやNode.jsをインストールした上でですが、まず、VexFlowの一式を配置しているフォルダに移動します。Gruntfile.jsやPackage.jsonがあるフォルダです。そこで
 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用モジュールのインストールは以下のコマンドです。





2024年3月22日 (金) 23:10時点における版

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