VCCW環境にてgulpfile.jsが動かない

Question

前提・実現したいこと

VCCW環境にて、Sassをコンパイルするためにgulpを使おうとしています。

参考にしたサイト：
https://qiita.com/satokibi/items/a56d3d0f1313a9897f7e#gulp%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

初めての環境作りのため何が足りていないかを自分で判断するのが難しく、どなたかご教示お願いいたします。

発生している問題・エラーメッセージ

ERROR: Parsing error: Unexpected token )	

該当のソースコード

var gulp = require('gulp');
var sass = require('gulp-sass');
var pug = require('gulp-pug');
var rename = require('gulp-rename');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');

gulp.task('sass', function() {
  var option = {
    outputStyle: 'expanded',
  };

  return gulp.src('scss/*.scss')
  .pipe(plumber())
  .pipe(sass(option))
  .pipe(gulp.dest('./'))
  .pipe(browserSync.stream());
});

gulp.task('pug', function() {
  var option = {
    pretty: true,
  };

  return gulp.src(['pug/*.pug'])
  .pipe(plumber())
  .pipe(pug(option))
  .pipe(rename({
    extname: '.php'
  }))
  .pipe(gulp.dest('./'));
});

gulp.task('browser-sync', function () {
    browserSync({
        // vccwで設定したipアドレス
        proxy: "192.168.33.12"
    });
});
/* ↓エラーコードが出ている箇所です↓ */
gulp.task('reload', () => {
  browserSync.reload();
});
/* ↑エラーコードが出ている箇所です↑ */
gulp.task('watch', function() {
  gulp.watch('scss/*.scss', ['sass', 'reload']);
  gulp.watch('pug/*.pug', ['pug', 'reload']);
});

gulp.task('default', ['browser-sync', 'sass', 'pug', 'watch']);

試したこと

エラーコードで検索をかけたところ、babelがインストールされてない時に出るらしく。
参考サイトURL：https://github.com/google/web-starter-kit/issues/713

babelのインストール状況↓

PS D:\Vagrant\Yoseshogi\wordpress\wp-content\themes\wordpress_template> npm ls babel
package.json@1.0.0 D:\Vagrant\Yoseshogi\wordpress\wp-content\themes\wordpress_template
`-- (empty)

babelがインストールされていないことを確認したのでnode_modulesを再インストールしたのですが結果は変わりませんでした。

node_modulesの中身を見に行くとbabel~とかが入っているのを確認しました。

package.jsonの中身です。↓

{
  "name": "package.json",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "babel-preset-es2015": "^6.24.1",
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-cssmin": "^0.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-pug": "^4.0.1",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2"
  },
  "dependencies": {},
  "description": ""
}

補足情報（FW/ツールのバージョンなど）

gulp -v
[07:30:55] CLI version 2.0.1
[07:30:55] Local version 4.0.0

Answer 1

挙げておられる参考サイトに
.babelrc を設置するまでシンタックスエラーが出てたとありますが、gulp file.js と同階層に同ファイルはありますでしょうか？
ちなみに私は以下の記述（polyfillを自動補完)をしています

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

Comments

[HiroLaboooo]

お返事がものすごく遅れてしまい申し訳ありません。出張で帰ってこれませんでした・・・。

というわけで.babelrcがなかったので調べたところ、それ以前の問題でbabelのバージョン違いを起していたらしく上手く動いていませんでした。
babelを一度アンインストールしやり直し、.babelrcを作成しやり直したところ正常動作を確認しました。
本当にありがとうございました！

Answer 2

gulp.task('reload', () => {
browserSync.reload();
});

なぜか、ここだけアロー関数になっていますが、アロー関数をやめて、普通の function 形式ではダメなのでしょうか？

gulp.task('reload', function () {
    browserSync.reload();
});

Comments

[HiroLaboooo]

お返事がものすごく遅れてしまい申し訳ありません。出張で帰ってこれませんでした・・・。

アロー関数で書かれてる意図がわからなかったのでとりあえずそのまま放置していたんですが、これのせいで別のエラーでてるっぽいしfunction形式に変更しました。ありがとうございます！