gulpでprettierとbabel

Question

gulpで次のようなタスクを自動化したいと考えています。
・ブラウザのリロード
・ES6->ES5
・自動整形
・ベンダープレフィックスの自動化

そこで次のgulpfile.jsを書きました。

{
  "name": "gulp-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.0",
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0-beta.2",
    "gulp-postcss": "^8.0.0",
    "gulp-prettier-eslint": "^1.1.0",
    "gulp-sass": "^4.0.2",
    "postcss-cssnext": "^3.1.0"
  }
}

const gulp = require('gulp')
const browserSync = require('browser-sync').create();

gulp.task('sass', () => {
  const cssnext = require('postcss-cssnext')
  const postcss = require('gulp-postcss')
  const sass = require('gulp-sass')
  const processors = [
      cssnext({ browsers: ['last 2 version'] })
  ];

  return gulp.src('./src/**/*.scss')
      .pipe(sass())
      .pipe(postcss(processors))
      .pipe(gulp.dest('./dist/css'))
})

gulp.task('babel', ()=> {
  const babel = require('gulp-babel')
  return gulp.src('./src/**/*.js')
      .pipe(babel())
      .pipe(gulp.dest('./dist/js'))
})

gulp.task('serve',(done)=>{
  browserSync.init({
      server: {
          baseDir: "./dist",
          index: "index.html"
      }
  })
  done()
})

gulp.task('prettier', (done)=>{
  const prettierEslint = require('gulp-prettier-eslint');
  return gulp.src('./src/**/*.js')
    .pipe(prettierEslint())
    .pipe(gulp.dest('./src'));
})

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('prettier'))
  gulp.watch('./src/js/*.js', gulp.series('babel'))
})

gulp.task('default', gulp.series('serve', 'watch'))

src/js配下のファイルをdist/jsにトランスパイルして書き出しています。

問題点
src/js/index.jsをgulp-prettier-eslintで自動整形し、src/js/index.jsに書き出すという風にするのかと思っているのですが、整形後に書き出すとbabelの監視が働いて、次に自動整形が働いて、・・・・という無限ループに陥ります。

質問
・書き出し方法に問題点があるのか
・そもそも考えに誤りがあるのか

当方、趣味でやっているもので、見当違いな質問をしているかも知れませんが、何かアドバイスを頂きたいです。
よろしくお願いします。

[12:15:45] Starting 'browserReload'...
[12:15:45] Finished 'browserReload' after 542 μs
[12:15:45] Starting 'prettier'...
[12:15:45] Starting 'babel'...
[12:15:45] Finished 'prettier' after 30 ms
[12:15:45] Finished 'babel' after 31 ms
[12:15:45] Starting 'browserReload'...
[12:15:45] Starting 'prettier'...
[12:15:45] Starting 'babel'...
[12:15:45] Finished 'browserReload' after 948 μs
[12:15:45] Finished 'prettier' after 24 ms
[12:15:45] Finished 'babel' after 24 ms
[12:15:46] Starting 'browserReload'...
[12:15:46] Starting 'prettier'...
[12:15:46] Starting 'babel'...
[12:15:46] Finished 'browserReload' after 597 μs
[12:15:46] Finished 'babel' after 58 ms
[12:15:46] Finished 'prettier' after 59 ms

Comments

[wwbQzhMkhhgEmhU]

この辺全然理解してないので、間違ったことを言っていたらごめんなさい。
入力ファイルと出力ファイルを同じにするのはいけません。
今回のように、prettierとbabelにタスクが別れていて、順番にやるのであれば、srcとdist以外にディレクトリが必要です。例えばsrc→[prettier]→tmp→[babel]→distのように。もちろん入力側になるファイルにはwatchも必要です。

また、以下のようにpipeで繋げてタスクを1つにする方法も考えられます。
const babel = require('gulp-babel')
const prettierEslint = require('gulp-prettier-eslint');
return gulp.src('./src/*.js')
.pipe(prettierEslint())
.pipe(babel())
.pipe(gulp.dest('./dist'));
ご参考までに。

[tomo77777]

回答ありがとうございます。
prettierのような自動整形は、自分で整形するのが面倒だから代わりにやってくれる、という認識なんですが別ファイルに書き出してしまうと、自分がコードを書くファイルについては自分で整形するということ何でしょうか？

[wwbQzhMkhhgEmhU]

いいえ。上の例(例えばsrc→[prettier]→tmp→[babel]→distのように)で言えば、
srcディレクトリ配下の.jsファイルを元にprettierを使って整形したものがtmpディレクトリに
tmpディレクトリ配下の.jsファイルを元にbabelを使ってES5にしたものがdistディレクトリに
生成されるよう、ターゲットを記述する、ということです。
あと回答ではありません。参考情報です。

[tomo77777]

なんども聞いてしまってすみません。
src->tmp->distという流れは理解しました。しかしそれだと、srcで書いているjsファイルのインデントがバラバラでも、distには整形後のものが生成されるが、srcはバラバラなのではないでしょうか？

[wwbQzhMkhhgEmhU]

バラバラになりますね。
build用の仕組みの中で入力となるもの、つまりsrcは書き換えてはいけません。
srcの中は人間が編集するものなので、本来はエディタなどで適宜整形しておくべきものです。

[tomo77777]

もう一点教えてください。
エディタで整形、例えばVSCODEのプラグインのPrettierで整形してしまえば、gulpのタスク内でprettierを通す必要が無い気がしています。srcも整形されますし、distも整形されると思います。エディタでの整形とbuild時の整形は何か使い分けがあるのでしょうか？

[wwbQzhMkhhgEmhU]

用途は別に使いたい人が考えるものなので、知りません。今回はあなたが使いたいと考えているようだったので合わせました。
例えばコーディング規約などでこれで整形するように、などと言われたら、担当の全ファイルが一律整形されてるかどうかチェックする目的で、ターゲット指定してprettier単品で使うとかになると思います。
仮定の話をする場所でもありませんが。。。

Answer 1

package.json の scripts に gulp を起動する設定をする必要があると思いますー。

...

  "scripts": {
+   "dev": "gulp",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

後は、$ npm run dev で起動できると思いますー。