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

動機

reactをだらだら書いていたら、想像以上にjavascriptのことよくわかってなかったり、
cssが全然分からなかったので、学習用の環境を作ってみたかった。

作りたい環境

適当にjavascriptを書いて、scss書いて、ブラウザでお手軽に確認できる環境。
フレームワークのお勉強というよりは超基礎的なjavascript環境が作れたらいいなあ、みたいな。
なので、大体以下のような要件。

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

環境

node

node -v
v10.15.1

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の依存関係っぽいエラーにぶち当たったので諦めた。。。そのうちまた探そう。