gulp.jsでAngularJSをちょっと動かしてみようと思う。（少し古い）


# `Grunt`の次は`Gulp`が来ているらしい
最近、業務が忙しくていろいろ止まってましたが、世の中はいろいろ進歩していました。  
`Grunt`の次に`gulp.js`なるものが出てきているらしく、それなら`AngularJS`動かしたくなるなぁってことで触ってみましたよ。

http://gulpjs.com/

# `Yeoman`のgeneratorを探す
※事前に`Yeoman`をインストールしておきましょう。こちらはグローバルインストールが良いかと思います。

`Grunt`の経験があるので、まずは`Yeoman`のGenerator探しから。2つくらい見つかりましたが、Githubの更新が新しかった方をチョイスします。

https://github.com/Swiip/generator-gulp-angular

早速入れてみましょう。

	$ npm install -g generator-gulp-angular

## generatorでひな形を作成する

コマンド打つのがだるくなったので、メニューから選ぶことにします。

	$ mkdir sample && yo

デフォルトの選択なんてのもありますが、ここは知ったぶってAdvanced modeで行ってみましょう。

	[?] Which version of Angular do you want? (Use arrow keys)
	  1.2.x (legacy) 
  	❯ 1.3.x (latest but still in beta) 

1.3は正式リリースですね。

	[?] Which Angular's modules would you want to have? (ngRoute and ngResource will be addressed after) (Press <space> to select)
	❯⬢ angular-animate.js (enable animation features)
	 ⬢ angular-cookies.js (handle cookie management)
	 ⬢ angular-touch.js (for mobile development)
	 ⬢ angular-sanitize.js (to securely parse and manipulate HTML)

以前に比べて、ラインナップが変わってます。とりあえず全部入れちゃいましょう。

	[?] Would you need jQuery or perhaps Zepto? 
	  jQuery 1.x (branch still supporting IE6, 7 and 8) 
	  jQuery 2.x (new version, lighter, IE9+) 
	  ZeptoJS (jQuery compatible but very much lighter) 
	❯ None (Angular will work on it's own jqLite) 

どうせどっかのライブラリ入れたらjQuery入っちゃうんだろうなぁと思いつつ、ここは漢のjqLiteですね。


	[?] Would you like to use a REST resource library?
	❯ ngResource, the official support for RESTful services 
	  Restangular, an alternative service to handles RESTful requests 
	  None, $http is enough! 

ん〜、ここはデフォルトの`ngResource`で良いかなぁ・・・何となく。

	[?] Would you like to use a router ? 
	  ngRoute, the official router 
	❯ UI Router, flexible routing with nested views 
	  None 

ここは`UI Router`ですよね。

	[?] Which UI framework do you want ?
	❯ Bootstrap, the most popular HTML, CSS, and JS framework 
	  Foundation, "The most advanced responsive front-end framework in the world" 
	  None 


まぁBootstrapが安定かと思います。（やはり何となく）

	[?] Which CSS preprocessor do you want?
	❯ Sass (Ruby), Original Syntactically Awesome StyleSheets (requires Ruby) 
	  Sass (Node), Node.js binding to libsass, the C version of the popular stylesheet preprocessor, Sass. 
	  Less, extends the CSS language, adding features that allow variables, mixins, functions and many other techniques. 
	  None, only the good old CSS 

Sassは初めてですが、良い機会なのでチャレンジしてみましょうかね。  
MacならRubyがデフォルトで入っているので怖くない！

後は自動的にファイルたちが出来上がります。

## さっそく動かしてみましょう

インストールが完了したら早速動かしてみましょう。`gulpfile.js`のあるディレクトリで実行すると自動的に動きます。（`Ant`の`build.xml`みたいなものですね）

	$ ./node_modules/.bin/gulp 
	Error: Bower components directory does not exist at xxx

OOPS！  
ディレクトリがないと言われました。

	$ mkdir src/bower_components

とりあえずディレクトリ作って再実行。

	Error in plugin 'gulp-ruby-sass'
	Message:
	    spawn ENOENT: Missing the Sass executable. Please install and make available on your PATH.

OOPS!
sassがないと言われました。
とりあえず`bundler`でぶっ込んでみます。

	$ cat Gemfile
	source "http://rubygems.org"
	
	gem "sass"

したら、ぶんどれインストール！

	$ bundle install --path vendor/bundle

ちなみに、`sass`をグローバルインストールしていない場合は、`gulp-ruby-sass`が`bundle exec`で`sass`を叩くようオプションの指定が必要です。

	$ vi gulp/build.js
	~~
	.pipe($.rubySass({style: 'expanded', bundleExec:true}))
	（16行目付近で「bundleExec」をtrueに設定、デフォルトはfalseです。）

ちなみにグローバルインストールする場合は以下のコマンドを実行。

	$ gem install sass
	$ rbenv rehash
	$ which sass


しかし、それでもエラーが。

	Message:
	    error app/main/vendor.scss (Line 3: File to import not found or unreadable: ../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap.

先ほど作ったbower_components配下にファイルがないでござるの巻ですね。  
こちらは`bower`で予めインストールしておかなきゃいけないみたいです。（いやいや、そこは`wiredep`でやってよ・・・あとで探しておきましょう・・・）

	$ npm install bower --save-dev
	$ ./node_modules/.bin/bower install
	$ ./node_modules/.bin/gulp wiredep

無事に完了、ではいよいよ動かしますよ。

	$ ./node_modules/.bin/gulp serve

ブラウザが立ち上がれば成功です！