angular-ganttを導入する方法

前提として、git, npm(node.js), bower, gruntのインストールが必要。

angular-ganttのダウンロード

angular-ganttは現状も開発中のコンテンツなので、gitでクローンするのがベストです。

$ git clone https://github.com/angular-gantt/angular-gantt
Cloning into 'angular-gantt'...
remote: Counting objects: 13984, done.
remote: Compressing objects: 100% (142/142), done.
remote: Total 13984 (delta 73), reused 0 (delta 0), pack-reused 13839
Receiving objects: 100% (13984/13984), 19.67 MiB | 70.00 KiB/s, done.
Resolving deltas: 100% (9699/9699), done.
Checking connectivity... done.

ダウンロードしてきたファイルのルートにはpackage.json, bower.json, Gruntfile.jsが含まれています。ダウンロードしてきたディレクトリの中に入ります。

$ cd angular-gantt/

次に、node.jsの依存関係をダウンロードしてきます。node.jsの依存関係は「package.json」に記述されています。↓のコマンドでそれらを自動的にダウンロードしてきます。

$ npm install
npm WARN deprecated phantomjs@2.1.3: Package renamed to phantomjs-prebuilt. Please update 'phantomjs' package references to 'phantomjs-prebuilt'
npm WARN deprecated lodash@0.9.2: Grunt needs your help! See https://github.com/gruntjs/grunt/issues/1403.
npm WARN deprecated graceful-fs@1.2.3: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN deprecated graceful-fs@3.0.8: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
npm WARN prefer global marked@0.3.5 should be installed with -g
npm WARN prefer global jshint@2.9.1 should be installed with -g
...........
...........
...........

ディレクトリに「node_modules」が追加されたことが確認できるでしょう。

「npm WARN deprecated」というワーニングが出る場合がありますが、これは
「廃止されています。依存関係に注意しましょう。」っという意味です。
「npm WARN prefer global」というワーニングは「npm install -g」ってしてくれたほうがいいよっということです。
ただ、まぁ捨ておいておいても大きな問題にはならないでしょう。

先に進みます。

前出のnpmはNode.jsのパッケージマネージャです。次に使うbowerもパッケージマネージャですが、これはフロントエンド用（HTML/CSS/JS）のパッケージマネージャになります。
動きはnpmとだいぶ似ています。

では、bowerの依存関係をダウンロードしてきます。bowerの依存関係は「bower.json」に記述されています。↓のコマンドでそれらを自動的にダウンロードしてきます。

$ bower install
bower angular#~1.5              cached git://github.com/angular/bower-angular.git#1.5.0
bower angular#~1.5            validate 1.5.0 against git://github.com/angular/bower-angular.git#~1.5
bower jquery#~2                 cached git://github.com/jquery/jquery-dist.git#2.2.1
bower jquery#~2               validate 2.2.1 against git://github.com/jquery/jquery-dist.git#~2
...........
...........
...........

ディレクトリに「bower_components」が追加されたことが確認できるでしょう。

次にgruntコマンドを使います。
gruntとはnode.jsによるフロントエンド用（HTML/CSS/JS）タスク自動化ツールのことです。

最初に実行したnpmのコマンドの時にこれがインストールされています。

Gruntfile.jsというファイルの中に、その自動化の手順が記述されています。
この自動化のメリットはめんどくさい圧縮・最適化の処理を一括で実行したり、他の人と共有するためです。

angular-ganttの開発者が簡単に共有できるようにGruntfile.jsをすでに用意してくれているのでそれを
活用します。

$ grunt
...........
(最初の辺は順調)
...........

Running "karma:unit" (karma) task
27 02 2016 12:49:30.583:WARN [plugin]: Error during loading "/Users/user/Documents/workspace/angular-gantt/node_modules/karma-phantomjs-launcher" plugin:
  Cannot find module 'phantomjs-prebuilt'
27 02 2016 12:49:30.686:WARN [watcher]: Pattern "/Users/user/Documents/workspace/angular-gantt/test/mock/**/*.js" does not match any file.

START:
27 02 2016 12:49:30.729:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/
27 02 2016 12:49:30.731:WARN [launcher]: Can not load "PhantomJS", it is not registered!
  Perhaps you are missing some plugin?

っとエラーで止まってしまった、「phatomjs-prebuiltが見つかりません。」っと言われてしまいました。
おそらくさっきのnpmのinstallの時の

npm WARN deprecated phantomjs@2.1.3: Package renamed to phantomjs-prebuilt. Please update 'phantomjs' package references to 'phantomjs-prebuilt'

が影響してる様子なので、

$ npm install phantomjs-prebuilt --save-dev

を実行。

それで再度

$ grunt

なんだかうまく言った感じです。
ディレクトリのassetsの中身が増えていることが確認できます。
「*.js.map」といったようなファイルが増えていることとおもいます。

この「.js.map」拡張子のファイルは「.js」ファイルの圧縮したファイルのことです。
gruntはこのようにjsファイルを一括で圧縮してくれたりします。

今度はディレクトリ配下のdemoフォルダに移動して、

$ cd demo/

そこで

$ grunt
Loading "Gruntfile.js" tasks...ERROR
>> Error: Cannot find module 'load-grunt-tasks'
Warning: Task "default" not found. Use --force to continue.

Aborted due to warnings.

はい。エラー。。
どうやらこれについては、npmのバージョンが違いのために起こっているようです。

なので、npmをアップデート

$ npm update npm -g

demoディレクトリで

$ npm install
$ bower install

やっとここでgrunt

$ grunt
Running "newer:jshint" (newer) task

Running "newer:jshint:all" (newer) task
No newer files to process.

Running "newer:jshint:test" (newer) task
No newer files to process.
...........
...........
...........

そしてまたひとつ上のディレクトリに戻って
下を実行。

$ bower link 
$ cd demo 
$ bower link angular-gantt folder.

このコマンドでは/demo/bower_component/angular-ganttにこのソース自身にシンボリックリンクをつけています。

これでよしということで、demoをルートディレクトリとしてMAMPを起動。
期待を託して

http://localhost/demo/app/index.html

ここにきて、まだ動かない。

chromeのjavascriptのデバッカーによると、「angularjsが定義されていません」っと。

index.htmlを覗いてみると

 

 

 

bowerの自動生成したフォルダと自動生成された参照先が違っとる。
相対参照なので、demo/app/bower_componentsを見てしまってるわけですな。
なので、ここをエディッタの機能で一括に「bower_components」を「../bower_components」置き換えて出来上がり。

最後、ちょっとやっつけになってしまいましたが、これで一応DEMO画面を観るところまでたどり着くことができました。

便利な機能として、

$ grunt watch --force

っというのもあります。これを効かせておくとjsソースを編集するたびにビルド（.jsから.js.mapに圧縮）をしてくれるみたいです。