Bootstrap4のGruntタスクランナーにbrowserSyncを追加して自動リロードさせる


## Bootstrap4-alphaの設置

### ソースコードをダウンロード

http://v4-alpha.getbootstrap.com/getting-started/download/


### パッケージインストールする

今回はgrunt-browser-syncを使いたいので、package.jsonにパッケージを追加する。

```
"grunt-browser-sync": "^2.2.0",
```


他、必要なパッケージはpachage.jsonにかかれているので、そのままインストールなのですが

```
npm install
```


lodashのインストールでエラーがでるので、

```
npm WARN deprecated lodash@0.9.2: lodash@<2.0.0 is no longer maintained. Upgrade to lodash@^3.0.0
npm WARN deprecated lodash@1.0.2: lodash@<2.0.0 is no longer maintained. Upgrade to lodash@^3.0.0
npm ERR! Darwin 15.2.0
```
先に最新をインストールしておき、そのあと他のパッケージをインストールしてください。

```
% npm install lodash                                                                                          [8:09:28]
bootstrap@4.0.0-alpha.2 /Users/ashibuya/SourceTree/sasaya_jp/grunt_jp4
└── lodash@3.10.1  extraneous
```


###  動作確認

```
grunt
```

実行で正常に動作することを確認する。

##  browserSyncを導入する
https://www.browsersync.io/docs/grunt/

### インストール

```
npm install grunt-browser-sync --save-dev
```

### Gruntfile.jsに追記する

* browserSyncを追加、watchにタスク追加

```
   watch: {
      src: {
        files: '<%= jscs.core.src %>',
        tasks: ['babel:dev']
      },
      sass: {
        files: 'scss/**/*.scss',
        tasks: ['dist-css', 'docs']
      },
      docs: {
        files: 'docs/assets/scss/**/*.scss',
        tasks: ['dist-css', 'docs']
      },
      tasks: ['browserSync']
    },

   browserSync: {
      bsFiles: {
        src: ['dist/css/*.css', 'dist/js/*.js', 'dist/*.html']
      },
      options: {
        watchTask: true,
        server: {
          baseDir: 'dist/'
        }
      }
    },
```

 
 * Full distributionとDefault taskに追加する
 
```
  // Default task.
  grunt.loadNpmTasks('grunt-browser-sync');
  grunt.registerTask('default', ['dist','browserSync','watch']);

```

*  動作確認

```
grunt
```

ブラウザが起動して、htmlやsassやjsファイルの更新が自動反映されることを確認する

###  clenタスクに注意

clean:distタスクは、dist直下のディレクトリをすべて消してしまうので
ここにindex.htmlなどを置く場合は、clean:distの内容を変える必要がある。

cssとjsのディレクトリだけ削除するように変更

```
    // Task configuration.
    clean: {
      dist: ['dist/css','dist/js'],
      docs: 'docs/dist'
    },

```

こうしておけば、dist配下にファイルを配置しても消されることはない。


###  jscsのチェックにひっかかる

Gruntfile.js編集時には、インデントなど適当にしてしまうとjscsのチェックに引っかかるので
引っかかったら、その都度エラーを見て修正しましょう。

> grunt jscs is grunt plugin for javascript code linting of all the javascript files for coding conventions. The jscs has got over 60 code validation rules coveringn wide range of options like indentation, maximum line length, maximum function block length, maximum file length, line breaks. curly braces, spaces before functions, array declaration etc.


http://jscs.info/rule/validateIndentation

```
Running "jscs:grunt" (jscs) task
validateQuoteMarks: Invalid quote mark found at Gruntfile.js :
   396 |      options: {
   397 |        server: {
   398 |          baseDir: "dist/"
---------------------------^
   399 |        }
   400 |      }
>> 1 code style errors found!
Warning: Task "jscs:grunt" failed. Use --force to continue.

Aborted due to warnings.
```



ほんとは
gulpでやりたいんですけど・・。


## bootstrap4にはTetherが必要なもよう

bootstrapを起動すると以下のようなエラーが出力されてしまう。

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

こちらのサイトからzipを落としてきて、インクルードするようにするとなおります。

http://github.hubspot.com/tether/






### (おまけ)東洋経済オンラインでIT漫画連載してます

エンジニア夫婦のあるある日記 | 東洋経済オンライン | 新世代リーダーのためのビジネスサイト 
http://toyokeizai.net/category/diary