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

node

node -v
v10.15.1

yarnを使ってるのでyarnのバージョン↓
###yarn

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に以下を記述

.babelrc

{
    "presets": ["@babel/preset-env"]
}

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

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タスクが実行され、ファイルの変更監視、検知、コンパイル、ブラウザリロードを実行してくれる

yarn gulp

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