2015年5月6日水曜日

meanスタックの実行環境を整える

meanスタック + d3.js + bootstrap.jsを使ったアプリを作成してみたいので、そのサイトのための環境を作ってみる。

angular.jsと、d3.jsやbootstrap.jsを組み合わせるためには、

  1. bower。javascriptなどのライブラリの管理を環境をつくる。
  2. gulp/grunt。コンパイル環境を作る
  3. yo。プロジェクトのひな形を作成するツール
  4. yoeman。上記3つを使って一連のワークフローを提供するツール。今回これを使って、angular.jsを使ったプロジェクトのひな形を作る。
  5. d3.jsを組み込む

0 環境準備

インストールするには、node.jsとnpmが入っている環境が必要。ここでは割愛。
試す環境は以下の通り
 ・CentOS 6.5
 ・nodejs v0.12.0
 ・npm 2.5.1

1.bowerの環境構築

まず、javascriptのライブラリ管理ツールであるbowerを入れてみる。ライブラリの依存関係をまとめて管理してくれる。
とはいっても、指定したライブラリをgitからダウンロードしてくれるだけ見たいで、自動で依存するライブラリをダウンロードしてくれるだけではないし、格納ディレクトリもばらばらなので、実際に使うときのパス指定は、それぞれのライブラリによって異なる(のでまとまっている感は少ない)。

npmとの違いは、ここに記載されている内容からすると、npmはクライアントとサーバーをまとめて管理はできるものの、分けて管理ができない。bowerはクライアントサイドに特化した管理ツールであり、npmをサーバーサイドのライブラリ管理ツールとして使う。という使い分けをするみたいです。この後いれる、yoemanでも使うみたいです。このあたりのClient-Sideのlibrary管理はいろいろと議論があるみたいですね。

1.1 bowerのインストール

$ npm install bower -g
 ・
 ・
 ・
$ bower -v
1.4.1

1.2 使ってみる

テストアプリとして、"apptest"をプロジェクトとして想定し進める。 初期化の時にいくつか質問がくるので、適当に入力する。質問の内容はqiita.comを参照
$ mkdir apptest && cd $_
$ bower init

? May bower anonymously report usage statistics to improve the tool over time? Yes
? name: apptest
? version: 0.0.1
? description: test site
? main file: index.js
? what types of modules does this package expose?
    ◯ amd
    ◯ es6
    ◯ globals
?? node
    ◯ yui
? keywords:
? authors:
? license: MIT
? homepage:
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? (y? would you like to mark this package as private which prevents it from being accidentally published to the registry? No
{
     name: 'apptest',
     version: '0.0.1',
     description: 'test site',
     main: 'index.js',
     moduleType: [
          'node'
     ],
     license: 'MIT',
     ignore: [
          '**/.*',
          'node_modules',
          'bower_components',
          'test',
          'tests'
     ]
}

? Looks good? Yes

$ ls
bower.json
試しにangular.jsをインストールしてみる。
$ bower install angular --save-dev
bower angular#*                                         cached git://github.com/angular/bower-angular.git#1.3.15
bower angular#*                                    validate 1.3.15 against git://github.com/angular/bower-angular.git#*
bower angular#~1.3.15                         install angular#1.3.15

angular#1.3.15 bower_components/angular
$
bower_componentsディレクトリの配下にインストールされている。
$ ls -lR bower_components
bower_components:
total 4
drwxrwxr-x 2 nodejs nodejs 4096 Apr 12 08:29 angular

bower_components/angular:
total 1480
-rw-rw-r-- 1 nodejs nodejs 263 Mar 17 13:15 angular-csp.css
-rw-rw-r-- 1 nodejs nodejs 960560 Mar 17 13:15 angular.js
-rw-rw-r-- 1 nodejs nodejs 125909 Mar 17 13:15 angular.min.js
-rw-rw-r-- 1 nodejs nodejs 50407 Mar 17 13:15 angular.min.js.gzip
-rw-rw-r-- 1 nodejs nodejs 348935 Mar 17 13:15 angular.min.js.map
-rw-rw-r-- 1 nodejs nodejs 114 Mar 17 13:15 bower.json
-rw-rw-r-- 1 nodejs nodejs 48 Mar 17 13:15 index.js
-rw-rw-r-- 1 nodejs nodejs 573 Mar 17 13:15 package.json
-rw-rw-r-- 1 nodejs nodejs 1885 Mar 17 13:15 README.md
$

ちなみに「--save-dev」オプションは、開発環境のみで使用し、かつ環境移行ができるようbower.jsonに記録するためのオプション。本番でも使う場合は「--save」を使う。

その他のオプションは以下の通り

指定バージョンのライブラリをインストールする
$ bower install <library>#<バージョン>
ライブラリをアップデートする
$ bower update
bower自身をアップデートする
$ npm update -g bower
ライブラリをアンインストールする
$ bower uninstall <library>
ライブラリを検索する
$ bower search <library>
ライブラリの詳細を確認する
$ bower info <library>#<バージョン>
インストール済みのライブラリの一覧を出力する
$ bower list
別場所の環境で、--saveで保存したライブラリのみインストールする
(--save-devで保存されたライブラリはインストールされない)
$ bower install --produnction
指定したライブラリの情報(バージョンなど)を入手する
$ bower info <library>

2.grunt/gulp

javascriptのビルドツール群。gruntが先に出てきて、そのあとgulpが出てきたみたいです。
テンプレート作成ツール(yoemanなど)によってもどちらが適用しているか?があるみたいです。
なんとなくgulpのほうが新しくていい感じ。基本gulpを使うが、両方入れておけるので、とりあえず入れてみる。

2.1 grunt インストール
$ npm install -g grunt-cli
$ gulp -v
[16:17:38] CLI version 3.8.11
[16:17:38] Local version 3.8.11

$ grunt -v
grunt-cli: The grunt command line interface. (v0.1.13)

Fatal error: Unable to find local grunt.

If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started

2.2 gruntを使ってみる(ちょっとインストールのつづきも)
gruntで
  1. 1.メッセージを出力する
  2. 2.ファイルをコピーするタスクを実装してみる
を実施してみる。
$ mkdir sample_grunt && cd $_
$ npm init
$ npm install grunt --save-dev
$ vi Gruntfile.js
module.exports = function(grunt) {
    //Gruntの設定
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });
    //defaultタスクの定義
    grunt.registerTask('default', 'LogProcess..', function() {
        //ログメッセージの出力
        grunt.log.write('message...').ok();
    });
};
$ grunt
Running "default" task
message...OK


Done, without errors.

$
"message"を出力できました。次にファイルコピーをする処理を実装してみる。
$ npm install grunt-contrib-copy --save-dev
$ vi Gruntfile.js
'use strict'
module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //コピーを実行するタスク
        copy: {
            main:{
                files: [ {
                        //src/jsディレクトリ以下のファイルをコピー
                        expand: true,
                        flatten: true,
                        src: ['src/js/*'],
                        dest: 'dest/js'
                    }, {
                        //src/htmlディレクトリ以下のファイルをコピー
                        expand: true,
                        flatten: true,
                        src: ['src/html/*'],
                        dest: 'dest/html'
                }]
            }
        }
    });
    // Load tasks(grunt実行時に読み込むプラグイン)
    grunt.loadNpmTasks('grunt-contrib-copy');
    // Default tasks(grunt実行時に実行するタスク)
    grunt.registerTask('default', ['copy']); //(*)
};
上記の処理は、
 ・「src/js/*」を、「dest/js/」にコピーをした後に
 ・「src/html/*」の中身を、「dest/html」にコピーを実施する
という内容になる。
また上記の(*)の行は、実行時にtaskの指定がない場合に実行されるタスクを記載しています(この例では、上記のコピー処理(copyというtask名)を実施することと同じ。
次にテストファイルを用意する
$ mkdir -p src/js src/html
$ touch src/js/test.js src/html/test.html
$ ls -lR src
src:
total 8
drwxrwxr-x 2 nodejs nodejs 4096 May     5 14:05 html
drwxrwxr-x 2 nodejs nodejs 4096 May     5 14:05 js

src/html:
total 0
-rw-rw-r-- 1 nodejs nodejs 0 May     5 14:05 test.html

src/js:
total 0

-rw-rw-r-- 1 nodejs nodejs 0 May     5 14:05 test.js

$ grunt
Running "copy:main" (copy) task
Copied 2 files

Done, without errors.

$ ls -lR dest
dest:
total 8
drwxrwxr-x 2 nodejs nodejs 4096 May     5 14:06 html
drwxrwxr-x 2 nodejs nodejs 4096 May     5 14:06 js

dest/html:
total 0
-rw-rw-r-- 1 nodejs nodejs 0 May     5 14:05 test.html

dest/js:
total 0
-rw-rw-r-- 1 nodejs nodejs 0 May     5 14:05 test.js

コピー先はディレクトリも作成してくれてるみたいですね。
2.3 gulp インストール
gulpでファイルをコピーするタスクを実装してみる。
npm install -g gulp
$ gulp -v
[16:17:38] CLI version 3.8.11
[16:17:38] Local version 3.8.11
2.4 gulp を使ってみる
gruntと同じファイルをコピーするタスクを実装してみる。
$ mkdir sample_gulp && cd $_
$ vi gulpfile.js
'use strict'
var gulp = require('gulp');
//コピーを実行するタスク
gulp.task('copy', function() {
    //src/jsディレクトリ以下のファイルをコピー
    gulp.src('src/js/**')
        .pipe(gulp.dest('dest/js'));

    //src/htmlディレクトリ以下のファイルをコピー
    gulp.src('src/html/**')
        .pipe(gulp.dest('dest/html'));
});
//デフォルトタスク定義
gulp.task('default', function() {
        gulp.run('copy');
});
$ mkdir -p src/js src/html
$ touch src/js/test.js src/html/test.html
$ gulp
[13:20:47] Using gulpfile ~/sample_gulp/gulpfile.js
[13:20:47] Starting 'default'...
gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead.
[13:20:47] Starting 'copy'...
[13:20:47] Finished 'copy' after 23 ms
[13:20:47] Finished 'default' after 25 ms

$ ls -lR     dest/

dest/:
total 8
drwxrwxr-x 2 nodejs nodejs 4096 May     5 13:20 html
drwxrwxr-x 2 nodejs nodejs 4096 May     5 13:20 js

dest/html:
total 0
-rw-rw-r-- 1 nodejs nodejs 0 May     5 13:20 touch.html

dest/js:
total 0
-rw-rw-r-- 1 nodejs nodejs 0 May     5 13:20 touch.js

gruntと同じくコピーされましたね。

3.yo

プロジェクトのひな型生成ツールで、テンプレートを指定することで、さまざまなプロジェクトのひな型を生成することができる。yoはNode.js上で動作するツールだが、phpやjavaなどのバックエンド側のひな型を生成できるジェネレーターも公開されているとのこと。
http://yeoman.io/generators/

3.1インストール


$ npm install yo -g
で実行してみたが、待てど暮らせど終わらない。。3時間たっても終わらないので、いったん終了させて、debugモードで状況を確認してみたら、、、

$ npm install yo -g --loglevel verbose
今度はエラーなしでうまくいった。。まぁうまくいったから、とりあえずいいか。

4.angularプロジェクトを作成してみる

以下の3つのgeneratorを試してみる。
 ・generator-angular

  オフィシャルなGenerator。yoemanのサンプルのインストール手順でも使われていた。

 ・generator-angular-fullstack)

  コミュニティですが、Starが多く評価されているGenerator。上との比較で入れてみる。

 ・gulp-angular

  上記2つはgruntを使ってるけど、これはgulpを使ったもの。試しに入れてみる。

4.1 generator-angular

$ npm install -g generator-angular
ここでも止まる。。やはりおかしい。nvmで管理しているので、node.jsのversionを0.10.38にdowngradeして、再度試してみる。
$ nvm install 0.10.38
$ nvm use 0.10.38
$ nvm alise default 0.10.38
$ npm install --global npm@latest
$ npm --version
2.9.0
今一度環境の整備を記載。
 ・nodejs v0.10.38
 ・npm 2.9.0
再チャレンジ!
$ npm install -g bower grunt-cli grunt gulp yo --loglevel verbose
$ npm install -g generator-angular --loglevel verbose
うまくいった。downgradeが功を奏したかどうか、、わからないが、とりあえずこれで進める。。
$ mkdir -p yoeman/angular && cd $_
$ yo angular test
? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== Yes

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |    Welcome to Yeoman,    |
   `---------´   |   ladies and gentlemen!  |
    ( _´U`_ )    '--------------------------'
    /___A___\
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include Bootstrap and some AngularJS recommended modules.

? Would you like to use Sass (with Compass)? No
? Would you like to include Bootstrap? Yes
? Which modules would you like to include? angular-animate.js, angular-cookies.js, angular-resource.js, angular-route.js, angular-sanitize.js, angular-touch.js
   create app/styles/main.css
   create app/index.html
   create bower.json
   create .bowerrc
   create package.json
   create Gruntfile.js
   create README.md
   invoke   angular:common:/home/nodejs/.nvm/v0.10.38/lib/node_modules/generator-angular/app/index.js
   create     .editorconfig
   create     .gitattributes
   create     .jshintrc
   create     .yo-rc.json
   create     .gitignore
   create     test/.jshintrc
   create     app/.buildignore
   create     app/.htaccess
   create     app/404.html
   create     app/favicon.ico
   create     app/robots.txt
   create     app/views/main.html
   create     app/images/yeoman.png
   invoke   angular:main:/home/nodejs/.nvm/v0.10.38/lib/node_modules/generator-angular/app/index.js
   create     app/scripts/app.js
   invoke   angular:controller:/home/nodejs/.nvm/v0.10.38/lib/node_modules/generator-angular/app/index.js
   create     app/scripts/controllers/main.js
   create     test/spec/controllers/main.js
   invoke   karma:app


I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself.


   invoke       angular:route
   invoke           angular:controller:/home/nodejs/.nvm/v0.10.38/lib/node_modules/generator-angular/route/index.js
   create             app/scripts/controllers/about.js
   create             test/spec/controllers/about.js
   invoke           angular:view:/home/nodejs/.nvm/v0.10.38/lib/node_modules/generator-angular/route/index.js
   create             app/views/about.html
   create     test/karma.conf.js
 conflict     package.json
? Overwrite package.json? (Ynaxdh) ? May bower anonymously report usage statistics to improve the tool over time? (Y/n) ? May bower anonymously report usage statistics to improve the tool over time? Yes
? Overwrite package.json? overwrite
    force     package.json
   create     .travis.yml
bower angular#^1.3.0        not-cached git://github.com/angular/bower-angular.git#^1.3.0
bower angular#^1.3.0           resolve git://github.com/angular/bower-angular.git#^1.3.0
bower angular-cookies#^1.3.0       not-cached git://github.com/angular/bower-angular-cookies.git#^1.3.0
bower angular-cookies#^1.3.0          resolve git://github.com/angular/bower-angular-cookies.git#^1.3.0
bower bootstrap#^3.2.0             not-cached git://github.com/twbs/bootstrap.git#^3.2.0
bower bootstrap#^3.2.0                resolve git://github.com/twbs/bootstrap.git#^3.2.0
bower angular-animate#^1.3.0       not-cached git://github.com/angular/bower-angular-animate.git#^1.3.0
bower angular-animate#^1.3.0          resolve git://github.com/angular/bower-angular-animate.git#^1.3.0
/
bower angular-route#^1.3.0         not-cached git://github.com/angular/bower-angular-route.git#^1.3.0
bower angular-route#^1.3.0            resolve git://github.com/angular/bower-angular-route.git#^1.3.0
bower angular-sanitize#^1.3.0      not-cached git://github.com/angular/bower-angular-sanitize.git#^1.3.0
bower angular-sanitize#^1.3.0         resolve git://github.com/angular/bower-angular-sanitize.git#^1.3.0
bower angular-touch#^1.3.0         not-cached git://github.com/angular/bower-angular-touch.git#^1.3.0
bower angular-touch#^1.3.0            resolve git://github.com/angular/bower-angular-touch.git#^1.3.0
bower angular-mocks#^1.3.0         not-cached git://github.com/angular/bower-angular-mocks.git#^1.3.0
bower angular-mocks#^1.3.0            resolve git://github.com/angular/bower-angular-mocks.git#^1.3.0
bower angular-resource#^1.3.0      not-cached git://github.com/angular/bower-angular-resource.git#^1.3.0
bower angular-resource#^1.3.0         resolve git://github.com/angular/bower-angular-resource.git#^1.3.0
bower angular-animate#^1.3.0         download https://github.com/angular/bower-angular-animate/archive/v1.3.15.tar.gz
bower bootstrap#^3.2.0               download https://github.com/twbs/bootstrap/archive/v3.3.4.tar.gz
npm WARN peerDependencies The peer dependency karma@>=0.9 included from karma-phantomjs-launcher will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency karma@>=0.9 included from karma-jasmine will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency jasmine-core@* included from karma-jasmine will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency karma@~0.12.0 included from grunt-karma will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
bower angular-route#^1.3.0           download https://github.com/angular/bower-angular-route/archive/v1.3.15.tar.gz
bower angular#^1.3.0                 download https://github.com/angular/bower-angular/archive/v1.3.15.tar.gz
bower angular-cookies#^1.3.0         download https://github.com/angular/bower-angular-cookies/archive/v1.3.15.tar.gz
bower angular-mocks#^1.3.0           download https://github.com/angular/bower-angular-mocks/archive/v1.3.15.tar.gz
bower angular-touch#^1.3.0           download https://github.com/angular/bower-angular-touch/archive/v1.3.15.tar.gz
bower angular-sanitize#^1.3.0        download https://github.com/angular/bower-angular-sanitize/archive/v1.3.15.tar.gz
bower angular-route#^1.3.0            extract archive.tar.gz
bower angular-animate#^1.3.0          extract archive.tar.gz
bower angular-resource#^1.3.0        download https://github.com/angular/bower-angular-resource/archive/v1.3.15.tar.gz
bower angular-route#^1.3.0           resolved git://github.com/angular/bower-angular-route.git#1.3.15
bower angular-animate#^1.3.0         resolved git://github.com/angular/bower-angular-animate.git#1.3.15
bower angular#^1.3.0                  extract archive.tar.gz
bower angular#^1.3.0                 resolved git://github.com/angular/bower-angular.git#1.3.15
bower angular-sanitize#^1.3.0         extract archive.tar.gz
bower angular-sanitize#^1.3.0        resolved git://github.com/angular/bower-angular-sanitize.git#1.3.15
bower angular-cookies#^1.3.0          extract archive.tar.gz
bower angular-cookies#^1.3.0         resolved git://github.com/angular/bower-angular-cookies.git#1.3.15
bower bootstrap#^3.2.0               progress received 1.5MB of 3.0MB downloaded, 51%
bower angular-touch#^1.3.0            extract archive.tar.gz
bower angular-touch#^1.3.0           resolved git://github.com/angular/bower-angular-touch.git#1.3.15
bower bootstrap#^3.2.0               progress received 1.8MB of 3.0MB downloaded, 60%
bower angular-mocks#^1.3.0            extract archive.tar.gz
bower angular-mocks#^1.3.0           resolved git://github.com/angular/bower-angular-mocks.git#1.3.15
bower bootstrap#^3.2.0               progress received 2.2MB of 3.0MB downloaded, 72%
bower bootstrap#^3.2.0               progress received 2.5MB of 3.0MB downloaded, 82%
bower bootstrap#^3.2.0               progress received 2.8MB of 3.0MB downloaded, 92%
bower bootstrap#^3.2.0                extract archive.tar.gz
bower bootstrap#^3.2.0               resolved git://github.com/twbs/bootstrap.git#3.3.4
bower angular-resource#^1.3.0         extract archive.tar.gz
bower angular-resource#^1.3.0        resolved git://github.com/angular/bower-angular-resource.git#1.3.15
bower jquery#>= 1.9.1              not-cached git://github.com/jquery/jquery.git#>= 1.9.1
bower jquery#>= 1.9.1                 resolve git://github.com/jquery/jquery.git#>= 1.9.1
bower jquery#>= 1.9.1                download https://github.com/jquery/jquery/archive/2.1.4.tar.gz
npm WARN optional dep failed, continuing fsevents@0.3.6

> phantomjs@1.9.16 install /home/nodejs/yoeman/angular/node_modules/karma-phantomjs-launcher/node_modules/phantomjs
> node install.js

bower jquery#>= 1.9.1                 extract archive.tar.gz
bower jquery#>= 1.9.1                resolved git://github.com/jquery/jquery.git#2.1.4
bower angular-route#^1.3.0            install angular-route#1.3.15
bower angular-animate#^1.3.0          install angular-animate#1.3.15
bower angular#^1.3.0                  install angular#1.3.15
bower angular-sanitize#^1.3.0         install angular-sanitize#1.3.15
bower angular-cookies#^1.3.0          install angular-cookies#1.3.15
bower angular-touch#^1.3.0            install angular-touch#1.3.15
bower angular-mocks#^1.3.0            install angular-mocks#1.3.15
bower bootstrap#^3.2.0                install bootstrap#3.3.4
bower angular-resource#^1.3.0         install angular-resource#1.3.15
bower jquery#>= 1.9.1                 install jquery#2.1.4
Downloading https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.8-linux-x86_64.tar.bz2
Saving to /tmp/phantomjs/phantomjs-1.9.8-linux-x86_64.tar.bz2
Receiving...
\
angular-route#1.3.15 bower_components/angular-route
mqq angular#1.3.15

angular-animate#1.3.15 bower_components/angular-animate
mqq angular#1.3.15

angular#1.3.15 bower_components/angular

angular-sanitize#1.3.15 bower_components/angular-sanitize
mqq angular#1.3.15

angular-cookies#1.3.15 bower_components/angular-cookies
mqq angular#1.3.15

angular-touch#1.3.15 bower_components/angular-touch
mqq angular#1.3.15

angular-mocks#1.3.15 bower_components/angular-mocks
mqq angular#1.3.15

bootstrap#3.3.4 bower_components/bootstrap
mqq jquery#2.1.4

angular-resource#1.3.15 bower_components/angular-resource
mqq angular#1.3.15

jquery#2.1.4 bower_components/jquery
  [==================----------------------] 46% 0.0s/
> gifsicle@2.0.1 postinstall /home/nodejs/yoeman/angular/node_modules/grunt-contrib-imagemin/node_modules/imagemin/node_modules/imagemin-gifsicle/node_modules/gifsicle
> node lib/install.js

  [=====================-------------------] 52% 0.0s  ? gifsicle pre-build test passed successfully


> pngquant-bin@3.0.0 postinstall /home/nodejs/yoeman/angular/node_modules/grunt-contrib-imagemin/node_modules/imagemin/node_modules/imagemin-pngquant/node_modules/pngquant-bin
> node lib/install.js

  [========================----------------] 59% 0.0s  ? The `/home/nodejs/yoeman/angular/node_modules/grunt-contrib-imagemin/node_modules/imagemin/node_modules/imagemin-pngquant/node_modules/pngquant-bin/vendor/pngquant` binary doesn't seem to work correctly
  ? pngquant pre-build test failed
  ? compiling from source
  [=========================---------------] 63% 0.0s  ? Error: pngquant failed to build, make sure that libpng-dev is installed      (*1)
    at ChildProcess.exithandler (child_process.js:658:15)
    at ChildProcess.emit (events.js:98:17)
    at maybeClose (child_process.js:766:16)
    at Socket. (child_process.js:979:11)
    at Socket.emit (events.js:95:17)
    at Pipe.close (net.js:466:12)

> optipng-bin@2.0.4 postinstall /home/nodejs/yoeman/angular/node_modules/grunt-contrib-imagemin/node_modules/imagemin/node_modules/imagemin-optipng/node_modules/optipng-bin
> node lib/install.js

  [===========================-------------] 68% 0.0s  ? optipng pre-build test passed successfully

> jpegtran-bin@2.0.2 postinstall /home/nodejs/yoeman/angular/node_modules/grunt-contrib-imagemin/node_modules/imagemin/node_modules/imagemin-jpegtran/node_modules/jpegtran-bin
> node lib/install.js

  [=============================-----------] 72% 0.0s  ? jpegtran pre-build test passed successfully
  [================================--------] 80% 0.0sgrunt-contrib-clean@0.6.0 node_modules/grunt-contrib-clean
mqq rimraf@2.2.8

grunt-newer@1.1.0 node_modules/grunt-newer
tqq rimraf@2.2.8
mqq async@0.9.0

grunt-contrib-copy@0.7.0 node_modules/grunt-contrib-copy
mqq chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)

grunt-usemin@3.0.0 node_modules/grunt-usemin
tqq lodash@2.4.2
tqq debug@2.1.3 (ms@0.7.0)
mqq chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)

jshint-stylish@1.0.2 node_modules/jshint-stylish
tqq log-symbols@1.0.2
tqq text-table@0.2.0
tqq string-length@1.0.0 (strip-ansi@2.0.1)
mqq chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, strip-ansi@2.0.1, has-ansi@1.0.3)

grunt-filerev@2.3.1 node_modules/grunt-filerev
tqq each-async@0.1.3
tqq convert-source-map@1.1.0
mqq chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, strip-ansi@2.0.1, has-ansi@1.0.3)

grunt-concurrent@1.0.0 node_modules/grunt-concurrent
tqq async@0.9.0
mqq pad-stdio@1.0.0 (lpad@1.0.0)

time-grunt@1.1.1 node_modules/time-grunt
tqq figures@1.3.5
tqq date-time@1.0.0
tqq text-table@0.2.0
tqq hooker@0.2.3
tqq chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, strip-ansi@2.0.1, has-ansi@1.0.3)
mqq pretty-ms@1.1.0 (get-stdin@4.0.1, parse-ms@1.0.0)

grunt-contrib-concat@0.5.1 node_modules/grunt-contrib-concat
tqq chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
mqq source-map@0.3.0 (amdefine@0.1.0)

load-grunt-tasks@3.1.0 node_modules/load-grunt-tasks
tqq multimatch@2.0.0 (array-differ@1.0.0, array-union@1.0.1, minimatch@2.0.7)
mqq findup-sync@0.2.1 (glob@4.3.5)

grunt-wiredep@2.0.0 node_modules/grunt-wiredep
mqq wiredep@2.2.2 (propprop@0.3.0, minimist@1.1.1, chalk@0.5.1, lodash@2.4.2, through2@0.6.5, bower-config@0.5.2, glob@4.5.3)

grunt@0.4.5 node_modules/grunt
tqq dateformat@1.0.2-1.2.3
tqq which@1.0.9
tqq eventemitter2@0.4.14
tqq getobject@0.1.0
tqq rimraf@2.2.8
tqq colors@0.6.2
tqq async@0.1.22
tqq grunt-legacy-util@0.2.0
tqq hooker@0.2.3
tqq exit@0.1.2
tqq nopt@1.0.10 (abbrev@1.0.5)
tqq minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.6.2)
tqq glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
tqq lodash@0.9.2
tqq coffee-script@1.3.3
tqq underscore.string@2.2.1
tqq iconv-lite@0.2.11
tqq grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.2)
tqq findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11)
mqq js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.16)

grunt-contrib-watch@0.6.1 node_modules/grunt-contrib-watch
tqq async@0.2.10
tqq lodash@2.4.2
tqq gaze@0.5.1 (globule@0.1.0)
mqq tiny-lr-fork@0.0.5 (debug@0.7.4, faye-websocket@0.4.4, qs@0.5.6, noptify@0.0.3)

grunt-contrib-htmlmin@0.4.0 node_modules/grunt-contrib-htmlmin
tqq chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
tqq pretty-bytes@1.0.4 (get-stdin@4.0.1, meow@3.1.0)
mqq html-minifier@0.7.2 (relateurl@0.2.6, concat-stream@1.4.8, change-case@2.3.0, cli@0.6.6, clean-css@3.1.9, uglify-js@2.4.21)

grunt-contrib-connect@0.9.0 node_modules/grunt-contrib-connect
tqq opn@1.0.2
tqq connect-livereload@0.5.3
tqq async@0.9.0
tqq portscanner@1.0.0 (async@0.1.15)
mqq connect@2.29.1 (cookie-signature@1.0.6, utils-merge@1.0.0, fresh@0.2.4, cookie@0.1.2, content-type@1.0.1, parseurl@1.3.0, pause@0.0.1, response-time@2.3.0, vhost@3.0.0, on-headers@1.0.0, basic-auth-connect@1.0.0, bytes@1.0.0, cookie-parser@1.3.4, depd@1.0.1, qs@2.4.1, debug@2.1.3, connect-timeout@1.6.1, http-errors@1.3.1, method-override@2.3.2, finalhandler@0.3.4, morgan@1.5.2, serve-favicon@2.2.0, express-session@1.10.4, multiparty@3.3.2, type-is@1.6.1, csurf@1.7.0, serve-static@1.9.2, errorhandler@1.3.5, compression@1.4.3, body-parser@1.12.3, serve-index@1.6.3)

grunt-contrib-uglify@0.7.0 node_modules/grunt-contrib-uglify
tqq uri-path@0.0.2
tqq chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
tqq lodash@2.4.2
tqq uglify-js@2.4.21 (uglify-to-browserify@1.0.2, async@0.2.10, yargs@3.5.4, source-map@0.1.34)
mqq maxmin@1.1.0 (figures@1.3.5, chalk@1.0.0, pretty-bytes@1.0.4, gzip-size@1.0.0)

grunt-contrib-cssmin@0.12.2 node_modules/grunt-contrib-cssmin
tqq chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
tqq clean-css@3.2.8 (commander@2.8.1, source-map@0.4.2)
mqq maxmin@1.1.0 (figures@1.3.5, chalk@1.0.0, pretty-bytes@1.0.4, gzip-size@1.0.0)

grunt-contrib-jshint@0.11.2 node_modules/grunt-contrib-jshint
tqq hooker@0.2.3
mqq jshint@2.7.0 (strip-json-comments@1.0.2, exit@0.1.2, shelljs@0.3.0, console-browserify@1.1.0, minimatch@2.0.7, cli@0.6.6, htmlparser2@3.8.2, lodash@3.6.0)

grunt-ng-annotate@0.9.2 node_modules/grunt-ng-annotate
tqq lodash@2.4.2
mqq ng-annotate@0.15.4 (tryor@0.1.2, simple-is@0.2.0, simple-fmt@0.1.0, stringset@0.2.1, stringmap@0.2.2, alter@0.2.0, stable@0.1.5, convert-source-map@0.4.1, ordered-ast-traverse@1.1.1, optimist@0.6.1, source-map@0.1.43, acorn@0.11.0)

grunt-svgmin@2.0.1 node_modules/grunt-svgmin
tqq log-symbols@1.0.2
tqq chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, strip-ansi@2.0.1, has-ansi@1.0.3)
tqq each-async@1.1.1 (set-immediate-shim@1.0.1, onetime@1.0.0)
tqq pretty-bytes@1.0.4 (get-stdin@4.0.1, meow@3.1.0)
mqq svgo@0.5.1 (whet.extend@0.9.9, colors@1.0.3, mkdirp@0.5.0, coa@1.0.1, sax@0.6.1, js-yaml@3.2.7)

grunt-autoprefixer@2.2.0 node_modules/grunt-autoprefixer
tqq diff@1.2.2
tqq chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
mqq autoprefixer-core@5.1.11 (num2fraction@1.1.0, browserslist@0.2.0, postcss@4.0.6, caniuse-db@1.0.30000156)

grunt-google-cdn@0.4.3 node_modules/grunt-google-cdn
tqq chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
tqq bower@1.4.1 (is-root@1.0.0, junk@1.0.1, stringify-object@1.0.1, abbrev@1.0.5, chmodr@0.1.0, user-home@1.1.1, which@1.0.9, rimraf@2.3.3, archy@1.0.0, opn@1.0.2, bower-logger@0.2.2, bower-endpoint-parser@0.2.2, graceful-fs@3.0.6, lockfile@1.0.0, lru-cache@2.6.2, nopt@3.0.1, retry@0.6.1, tmp@0.0.24, q@1.3.0, semver@2.3.2, p-throttler@0.1.1, fstream@1.0.4, request-progress@0.3.1, bower-json@0.4.0, shell-quote@1.4.3, mkdirp@0.5.0, promptly@0.2.0, chalk@1.0.0, fstream-ignore@1.0.2, glob@4.5.3, tar-fs@1.5.0, insight@0.5.3, decompress-zip@0.1.0, update-notifier@0.3.2, request@2.53.0, bower-registry-client@0.3.0, github@0.2.4, cardinal@0.4.4, mout@0.11.0, bower-config@0.6.1, configstore@0.3.2, inquirer@0.8.0, handlebars@2.0.0)
mqq google-cdn@0.7.0 (regexp-quote@0.0.0, google-cdn-data@0.1.17, async@0.9.0, semver@2.3.2, debug@1.0.4, cdnjs-cdn-data@0.1.1, bower@1.3.12)

grunt-contrib-imagemin@0.9.4 node_modules/grunt-contrib-imagemin
tqq gulp-rename@1.2.2
tqq async@0.9.0
tqq chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, strip-ansi@2.0.1, has-ansi@1.0.3)
tqq pretty-bytes@1.0.4 (get-stdin@4.0.1, meow@3.1.0)
mqq imagemin@3.1.0 (get-stdin@3.0.2, optional@0.1.3, stream-combiner@0.2.1, vinyl@0.4.6, concat-stream@1.4.8, through2@0.6.5, meow@2.1.0, vinyl-fs@0.3.13, imagemin-svgo@4.1.2, imagemin-gifsicle@4.1.0, imagemin-pngquant@4.1.0, imagemin-optipng@4.2.0, imagemin-jpegtran@4.1.0)
  [=================================-------] 83% 0.0sRunning "wiredep:app" (wiredep) task

Running "wiredep:test" (wiredep) task

Done, without errors.


Execution Time (2015-05-06 14:18:19 UTC)
loading tasks   31ms  ???? 4%
wiredep:app    741ms  ?????????????????????????????????????????????????????????????????????????????????? 93%
wiredep:test    20ms  ??? 3%
Total 794ms

  [========================================] 100% 0.0s
Received 12854K total.
Extracting tar contents (via spawned process)
Removing /home/nodejs/yoeman/angular/node_modules/karma-phantomjs-launcher/node_modules/phantomjs/lib/phantom
Copying extracted folder /tmp/phantomjs/phantomjs-1.9.8-linux-x86_64.tar.bz2-extract-1430921977466/phantomjs-1.9.8-linux-x86_64 -> /home/nodejs/yoeman/angular/node_modules/karma-phantomjs-launcher/node_modules/phantomjs/lib/phantom
Writing location.js file
Done. Phantomjs binary available at /home/nodejs/yoeman/angular/node_modules/karma-phantomjs-launcher/node_modules/phantomjs/lib/phantom/bin/phantomjs

> ws@0.4.32 install /home/nodejs/yoeman/angular/node_modules/karma/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

make: Entering directory `/home/nodejs/yoeman/angular/node_modules/karma/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws/build'
  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
  SOLINK_MODULE(target) Release/obj.target/bufferutil.node
  SOLINK_MODULE(target) Release/obj.target/bufferutil.node: Finished
  COPY Release/bufferutil.node
  CXX(target) Release/obj.target/validation/src/validation.o
  SOLINK_MODULE(target) Release/obj.target/validation.node
  SOLINK_MODULE(target) Release/obj.target/validation.node: Finished
  COPY Release/validation.node
make: Leaving directory `/home/nodejs/yoeman/angular/node_modules/karma/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws/build'
karma-phantomjs-launcher@0.1.4 node_modules/karma-phantomjs-launcher
mqq phantomjs@1.9.16 (which@1.0.9, progress@1.1.8, kew@0.4.0, request-progress@0.3.1, adm-zip@0.4.4, npmconf@2.1.1, request@2.42.0, fs-extra@0.16.5)

jasmine-core@2.3.0 node_modules/jasmine-core

karma@0.12.31 node_modules/karma
tqq di@0.0.1
tqq graceful-fs@2.0.3
tqq rimraf@2.2.8
tqq colors@0.6.2
tqq mime@1.2.11
tqq q@0.9.7
tqq minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.6.2)
tqq optimist@0.6.1 (wordwrap@0.0.2, minimist@0.0.10)
tqq source-map@0.1.43 (amdefine@0.1.0)
tqq glob@3.2.11 (inherits@2.0.1, minimatch@0.3.0)
tqq lodash@2.4.2
tqq useragent@2.0.10 (lru-cache@2.2.4)
tqq log4js@0.6.24 (async@0.2.10, underscore@1.8.2, readable-stream@1.0.33, semver@4.3.4)
tqq connect@2.26.6 (fresh@0.2.4, cookie@0.1.2, pause@0.0.1, vhost@3.0.0, on-headers@1.0.0, bytes@1.0.0, basic-auth-connect@1.0.0, cookie-signature@1.0.5, response-time@2.0.1, media-typer@0.3.0, parseurl@1.3.0, depd@0.4.5, cookie-parser@1.3.4, connect-timeout@1.3.0, qs@2.2.4, finalhandler@0.2.0, debug@2.0.0, method-override@2.2.0, serve-favicon@2.1.7, morgan@1.3.2, csurf@1.6.6, type-is@1.5.7, multiparty@3.3.2, compression@1.1.2, errorhandler@1.2.4, serve-static@1.6.5, body-parser@1.8.4, express-session@1.8.2, serve-index@1.2.1)
tqq http-proxy@0.10.4 (pkginfo@0.3.0, utile@0.2.1)
tqq chokidar@1.0.1 (arrify@1.0.0, is-glob@1.1.3, glob-parent@1.2.0, async-each@0.1.6, is-binary-path@1.0.0, readdirp@1.3.0, anymatch@1.3.0)
mqq socket.io@0.9.16 (base64id@0.1.0, policyfile@0.0.4, redis@0.7.3, socket.io-client@0.9.16)

karma-jasmine@0.3.5 node_modules/karma-jasmine

grunt-karma@0.10.1 node_modules/grunt-karma
mqq lodash@2.4.2

Errorが出ている(*1)。gruntで画像の最適化処理するために"libpng-dev"がいるらしいですね。 そのまま処理は継続されているので、いったんこのまま進める。
(2016/3/2追記)
proxy環境下で、bowerを使う場合の設定
{
  "proxy" : "http://proxy.example.co.jp:8080",
  "https-proxy" : "http://proxy.example.co.jp:8080"
}