【初めてのSymfony2】bootstrapを導入してみる


(正直)あんまり乗り気ではないが、symfony2を取り扱ってみることにした時のメモ
bowerを使ってインストールしてみる

## 環境

[vagrant](https://www.vagrantup.com/)で構築

* Guest OS
	* CentOS6.4 x86

## 事前準備に必要なもの

* PHP5.3以上
	* 自分は PHP 5.6.0でトライ
	* [phpenv](https://github.com/CHH/phpenv)で入れたい方は[virtualbox(centos)でphpenv+php-buildインストールメモ(5.3,5.4変更確認まで)](http://qiita.com/ryurock/items/7d031440bb174a55a6a1)を参考に入れてください
* [composer](https://getcomposer.org/)
	* 入れていない方は[composerを使ってみた時のメモ](http://qiita.com/ryurock/items/43beef25d26966fff8cc)を参考にでもしてください
* NodeJs
	* [nodebrew](https://github.com/hokaccha/nodebrew)で入れたい方は[virtualbox(centos)でnodebrewインストールメモ](http://qiita.com/ryurock/items/c85fcca393492a12ec38)を参考にでもして入れておいてください
	* npm
		* [bower](http://bower.io/)

## 出来上がるもの

## 参考にしたサイト

* [Spea/SpBowerBundle](https://github.com/Spea/SpBowerBundle)


## まずはbowerをいれる

インストールはnpm経由でサクッと

```bash:/path/to/leaning-symfony2
sudo npm install -g bower
```


## composerでSpBowerBundleをインストール

```bash:/path/to/leaning-symfony2
composer require sp/bower-bundle
```

## composer.jsonのpost-install-cmdとpost-update-cmdに追加する

追加しましょう

```json:/path/to/leaning-symfony2/composer.json
{
   "scripts": {
       "post-install-cmd": [
           "Sp\\BowerBundle\\Composer\\ScriptHandler::bowerInstall"
       ],
       "post-update-cmd": [
           "Sp\\BowerBundle\\Composer\\ScriptHandler::bowerInstall"
       ]
   }
}
```

## SpBowerBundleを有効にする

基本は[Spea/SpBowerBundle](https://github.com/Spea/SpBowerBundle)の[インストール手順](https://github.com/Spea/SpBowerBundle/blob/master/Resources/doc/index.md)の写経です

```php:/path/to/leaning-symfony2/app/Applernel.php
<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new Sp\BowerBundle\SpBowerBundle(),
    );
}
```

## app/config/config.ymlにSpBowerBundleの設定を入れる

いれましょ

```yml:/path/to/leaning-symfony2/app/config/config.yml
sp_bower:
	# bowerのPATH
    bin: /usr/local/ndenv/shims/bower
    install_on_warmup: true
    bundles:
		 # YourBundleは使用したいBundle名を
        YourBundle: ~
```
	
## bower.jsonを入れたいBundleのconfigを追加する

```json:/path/to/leaning-symfony2
# src/AcmeDemoBundle/Resources/config/bower/bower.json
{
    "name": "acme-demo-bundle",
    "dependencies": {
        "bootstrap": "latest"
    }
}
```

## assetのsymlinkを貼り直す

忘れずに

```bash:/path/to/leaning-symfony2
php app/console assets:install --symlink
```



## symfonyのcacheをクリアする

忘れずに

```bash:/path/to/leaning-symfony2
php app/console cache:clear
```




## layoutファイルにbootstrapを追加してみる

```twig:/path/to/leaning-symfony2/app/Resources/views/base.html.twig
# app/Resources/views/base.html.twig
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
          {% stylesheets
              "@bootstrap_css" %}
              <link rel="stylesheet" href="{{ asset_url }}" />
          {% endstylesheets %}
        {% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
          {% javascripts
              "@bootstrap_js" %}
              <script src="{{ asset_url }}"></script>
          {% endjavascripts %}
        {% endblock %}
    </body>
</html>
```

## app/config/config.ymlにasseticのbudleの項目を追加する

```yml:app/config/config.yml
assetic:
     bundles:        [ AcmeBundle ]
```


上記手順でbootstrapが導入出来たー。わーい