[ Laravel ]Bootstrapv4.0.0-alpha.6をLaravelで使う

[Bootstrap 4 Alpha 6 · Bootstrap](http://blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6/)が、2017/1/6に出たそうですね。

Ship listも確認しつつ、せっかくなので、このバージョンをLaravelで使うようにしましょう。
- [v4 Alpha 6 ship list · Issue \#20939 · twbs/bootstrap](https://github.com/twbs/bootstrap/issues/20939)

# ◆ バージョン

```bash
 $ php artisan --version
Laravel Framework version 5.3.28

 $ php --version
PHP 7.1.0 (cli) (built: Dec  2 2016 03:30:24) ( NTS )
Copyright (c) 1997-2016 The PHP Group
Zend Engine v3.1.0-dev, Copyright (c) 1998-2016 Zend Technologies

```

# ◆ 現在の設定の確認

### > package.json

```
{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  }
}
```

これをそのまま実行して、まずは動作確認

```bash
npm install
```

### >  gulp

```bash
gulp
```

```
[11:25:19] Starting 'all'...
[11:25:19] Starting 'sass'...
[11:25:20] Finished 'sass' after 832 ms
[11:25:20] Starting 'webpack'...
[11:25:21]
[11:25:21] Finished 'webpack' after 1.14 s
[11:25:21] Finished 'all' after 1.98 s
[11:25:21] Starting 'default'...
┌───────────────┬───────────────────────────────┬────────────────────────────────┬────────────────────┐
│ Task          │ Summary                       │ Source Files                   │ Destination        │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.sass()    │ 1. Compiling Sass             │ resources/assets/sass/app.scss │ public/css/app.css │
│               │ 2. Autoprefixing CSS          │                                │                    │
│               │ 3. Concatenating Files        │                                │                    │
│               │ 4. Writing Source Maps        │                                │                    │
│               │ 5. Saving to Destination      │                                │                    │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.webpack() │ 1. Transforming ES2015 to ES5 │ resources/assets/js/app.js     │ public/js/app.js   │
│               │ 2. Writing Source Maps        │                                │                    │
│               │ 3. Saving to Destination      │                                │                    │
└───────────────┴───────────────────────────────┴────────────────────────────────┴────────────────────┘
[11:25:21] Finished 'default' after 3.65 ms
```


### >  テンプレートにcssを読み込ませて、bootstrapが動作しているかの確認

```php

<html>
<head>
    <title> @yield('title') </title>

    <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" >
    <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>-->

</head>
<body>
```


# ◆ bootstrap4.0.0の導入


### > bootstrap4.0.0-alpha.6 のインストール

```bash
 $ npm install bootstrap@4.0.0-alpha.6 --save
├─┬ bootstrap@4.0.0-alpha.6
│ └── tether@1.4.0
└── jquery@3.1.1
```

### > app.scssの修正

```
// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

// Bootstrap
//@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "node_modules/bootstrap/scss/bootstrap";

//My Customize
@import "custom";
@import "custom-page";
@import "custom-view";


```

### > gulpの実行

```
 $ gulp
[11:51:50] Starting 'all'...
[11:51:50] Starting 'sass'...
[11:51:50] Finished 'sass' after 881 ms
[11:51:50] Starting 'webpack'...
[11:51:52]
[11:51:52] Finished 'webpack' after 1.17 s
[11:51:52] Finished 'all' after 2.05 s
[11:51:52] Starting 'default'...
┌───────────────┬───────────────────────────────┬────────────────────────────────┬────────────────────┐
│ Task          │ Summary                       │ Source Files                   │ Destination        │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.sass()    │ 1. Compiling Sass             │ resources/assets/sass/app.scss │ public/css/app.css │
│               │ 2. Autoprefixing CSS          │                                │                    │
│               │ 3. Concatenating Files        │                                │                    │
│               │ 4. Writing Source Maps        │                                │                    │
│               │ 5. Saving to Destination      │                                │                    │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.webpack() │ 1. Transforming ES2015 to ES5 │ resources/assets/js/app.js     │ public/js/app.js   │
│               │ 2. Writing Source Maps        │                                │                    │
│               │ 3. Saving to Destination      │                                │                    │
└───────────────┴───────────────────────────────┴────────────────────────────────┴────────────────────┘
```

### > bootstrap４が導入されているか確認しましょう

nav（ナビゲーション）の記述がbootstrap3とは変わっているので、navで確認。



# ◆ Bootstrapでの値のoverrideについて

app.scssで、bootstrapのファイルを読み込む前に変数を定義しています（variables）

- resources/sass/app.scss

```php

// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);


//Override Bootstrap
@import "variables";

// Bootstrap
//@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "node_modules/bootstrap/scss/bootstrap";


@import "custom";
@import "custom-page";
@import "custom-view";
```

- resources/sass/_variables.scss
    - 上書きしたい変数と値を確認します。bootstrap内の変数は、bootstrap/scss/_variables.scssで確認する

```sass

// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.


//----------------------------------------
//color 
//----------------------------------------
$gray-dark:                 #2b2828;
$gray:                      #756e6e;
$gray-light:                #948c8c;
$gray-lighter:              #e0d5d5;
$gray-lightest:             #fbf0f0;
```

bootstrapのscssでは、以下のような設定になっており、変数が定義されていない場合は、デフォルトの設定をするようになっているので、先に定義しておけば、先に定義したものが採用されます。

```sass
// Create grayscale
$gray-dark:                 #292b2c !default;
$gray:                      #464a4c !default;
$gray-light:                #636c72 !default;
$gray-lighter:              #eceeef !default;
$gray-lightest:             #f7f7f9 !default;
```

- その他参考
    -  [How extend some variables or behavior of Bootstrap with SASS using Elixir?](https://laracasts.com/discuss/channels/elixir/how-extend-some-variables-or-behavior-of-bootstrap-with-sass-using-elixir)





# ◆ Browsersyncを入れて作業しやすく

- 参考動画（これ見るとわかります）
    - [Painless Builds With Elixir: Browsersync in Action](https://laracasts.com/series/painless-builds-with-laravel-elixir/episodes/13)

### > Browsersyncのインストールと設定

- インストール

```bash

npm install laravel-elixir-browsersync-official --save-dev

```

- gulpfile.jsの変更
    - [Browsersync options](https://www.browsersync.io/docs/options/)

```js


const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(mix => {
    mix.sass('app.scss')
       .webpack('app.js')
       .browserSync({port: 8000});
});
```

- gulp watchとすると、ファイルの変更を検知してくれます

```
gulp watch

```


### > Laravel Elixirについて

> Laravel Elixir provides a clean, expressive API over compiling SASS or Less, which are extensions of plain CSS > that add variables, mixins, and other powerful features that make working with CSS much more enjoyable.

- [Compiling Assets \(Laravel Elixir\) \- Laravel \- The PHP Framework For Web Artisans](https://laravel.com/docs/5.3/elixir)


### > Tetherについて


Bootstrap 4 は Tetherを必要とするので、,  tether.min.jsをインクルードする必要があります。

```
Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)
```

- [javascript \- How to fix the error; 'Error: Bootstrap tooltips require Tether \(http://github\.hubspot\.com/tether/\)' \- Stack Overflow](http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h)