javascript学習用環境を作った(gulp+browser-sync+babel+eslint)

##動機
reactをだらだら書いていたら、想像以上にjavascriptのことよくわかってなかったり、
cssが全然分からなかったので、学習用の環境を作ってみたかった。
##作りたい環境
適当にjavascriptを書いて、scss書いて、ブラウザでお手軽に確認できる環境。
フレームワークのお勉強というよりは超基礎的なjavascript環境が作れたらいいなあ、みたいな。
なので、大体以下のような要件。

- es6で書ける(babel)
- scssで書ける(gulp-sass)
- コードを直したら自動で↑をトランスパイルしてくれる(gulp)
- 変更を検知してブラウザをリロード(browser-sync)
- lintとコード整形をファイル保存時に実行（最終的にエディタにお任せすることにした。。。)
- webpackを使って作るのもアリかと思ったけど、bundleさせたい訳でもないので、使ったことなかったgulpを使ってみることに

##環境
###node
```javascript:node
node -v
v10.15.1
```
yarnを使ってるのでyarnのバージョン↓
###yarn
```javascript:yarn
yarn -v
1.13.0
```
##各種パッケージインストール
###gulp
gulpを使うと処理をタスクと定義し、タスクの実行をまとめたり、任意のタイミングで実行させるなどの管理をすることができる。

```
yarn add gulp -D
```
###gulp-sass
gulp上でsass/scssのコンパイルを実行できるパッケージ

```
yarn add gulp-sass -D
```

###babel
ES6以降のES5へのトランスパイルを実行できるパッケージ

- babel本体(babel/core)、
- gulpでbabelを利用できるようにしてくれる(gulp-babel)
- 環境に合わせていい感じにトランスパイルを実行してくれる(@babel/preset-env)
- gulpのタスクの定義もes6で書きたいので(@babel/register)

```
yarn add gulp-babel @babel/core @babel/preset-env @babel/register -D
```

###browser-sync
ソースを変更したらブラウザを自動リロードしてくれる

```
yarn add browser-sync -D
```

###eslint/prettier
eslint:コードの文法誤りを指摘してくれる。
prettier:コードを綺麗に整形をしてくれる。
結局gulpに組み込まなかったけど、一応

- gulp-eslint（eslintをgulp上で実行できるようにしてくれる）
- eslint-config-prettier（eslintのフォーマット関連のルールを全て無効にする、要はPrettierが整形した箇所に関してエラーを出さなくなる）
- eslint-plugin-prettier（prettierをeslint上で実行する）

```
yarn add gulp-eslint eslint-config-prettier eslint-plugin-prettier -D
```

##ディレクトリ
実行環境のディレクトリは以下のような感じ。
package.jsonとnode_modules以外は自分でディレクトリを切る。

```
root/
　├ dist/    #コンパイル/トランスパイル後の出力ディレクトリ
　│  └ css/
　│  └ index.html
　├ node_modules/
　├ src/     #作業ディレクトリ
　│　└ js/
　│　└ scss/
　└ .babelrc #babelの設定ファイル
　└ gulpfile.babel.js    #gulpで実行するタスクの定義ファイル
　└ package.json
```

##セッティング
babelに@babel/preset-envを使うことを通知するために.babelrcに以下を記述

```shell:.babelrc
{
    "presets": ["@babel/preset-env"]
}
```

##gulpfile.babel.js
gulpfileをes6で書きたい場合は@babel/registerをインストールの上、gulpfile.babel.jsファイルにタスクを書く必要がある。

```javascript:gulpfile.babel.js
import gulp from 'gulp';
import browserSync from 'browser-sync';
import eslint from 'gulp-eslint';
import sass from 'gulp-sass';
import babel from 'gulp-babel';
//sassのタスク設定
gulp.task('sass', () => {
  return gulp
    .src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css'));
});
gulp.task('babel', () => {
  return gulp
    .src('./src/js/*.js')
    .pipe(babel())
    .pipe(gulp.dest('./dist'));
});
//eslintのタスク設定（作ったはいいが、エディタで管理した方が実用的かと思い、使ってない。。。
gulp.task('lint', () => {
  return gulp
    .src(['./src/js/*.js', '!node_modules/**'])
    .pipe(eslint({ useEslintrc: true })) // .eslintrc を参照
    .pipe(eslint.format())
    .pipe(eslint.failAfterError());
});
//browser-syncのタスク設定
gulp.task('serve', done => {
  browserSync.init({
    server: {
      baseDir: './dist',
      index: 'index.html'
    }
  });
  done();
});

//ファイルの監視タスク設定
gulp.task('watch', () => {
  const browserReload = done => {
    browserSync.reload();
    done();
  };
  gulp.watch('./dist/**/*', browserReload);
  gulp.watch('./src/scss/*.scss', gulp.series('sass'));
  // gulp.watch('./src/js/*.js', gulp.series('lint'));
  gulp.watch('./src/js/*.js', gulp.series('babel'));
});

gulp.task('default', gulp.series('serve', 'watch'));
```
##実行
yarnからgulpを実行することでgulpfile.babel.jsに定義したdefaultタスクが実行され、ファイルの変更監視、検知、コンパイル、ブラウザリロードを実行してくれる

```shell:
yarn gulp
```
###所感
そもそもはvimでvscodeのliveserver的なプラグインがないものか。。。と探していたのが発端だったが、gulpでの解決策？になってしまった。
liveserver的なプラグインが２、３あったがpythonの依存関係っぽいエラーにぶち当たったので諦めた。。。そのうちまた探そう。