gulpとwebpackでJSのコンパイル環境を構築する

├─ public/
│   └─ assets/
│       └─ js/
│           └─ コンパイルされたjs
│
├─ src/
│   └─ assets/
│       └─ js/
│           ├─ child/
│           │   └─ child-index.js
│           └─ index.js
│
├─ gulpfile.js
├─ webpack.config.js
└─ package.json

yarn add -D gulp gulp-notify gulp-plumber gulp-debug

yarn add -D webpack webpack-stream babel-loader @babel/core @babel/preset-env vinyl-named gulp-filter

import $ from 'jquery';
console.log($);

const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

console.log('child-index');

const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  //entry: '', // gulpで設定
  output: {
    filename: '[name].min.js' // [name]はgulpで設定
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            'presets': [
              ["@babel/preset-env"]
            ],
            'compact': false
          }
        },
      }
    ]
  },
  plugins: [
    // ファイルを分割しない
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1,
    }),
  ],
  optimization: {
    minimize: true, // ファイル圧縮機能を有効にする
    minimizer: [
      new TerserPlugin({
        extractComments: false, // コメントを外部ファイルにしない
        terserOptions: {
          compress: {
            drop_console: false,  // console.logを残す
          }
        },
      }),
    ],
  },
  performance: {
    hints: false // パフォーマンス警告を表示しない
  },
  resolve: {
    extensions: ['.js']
  }
}

const gulp = require('gulp');
const notify = require('gulp-notify');  // エラー通知
const plumber = require('gulp-plumber'); // エラー時のタスク停止防止
const debug = require('gulp-debug'); // ログ表示

const path = require('path');
const named = require('vinyl-named');
const filter = require('gulp-filter'); // ファイルフィルター

const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const webpackConfig = require('./webpack.config.js');

const paths = {
  js: {
    src: 'src/assets/js/**/*.js', // コンパイル対象
    dest: 'public/assets/js' // 出力先
  }
}

/**
 * jsタスクを実行する関数
 */
function js() {
  return gulp.src(paths.js.src)
    .pipe(plumber({
      errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(filter(function (file) { // _から始まるファイルを除外
      return !/\/_/.test(file.path) && !/^_/.test(file.relative);
    }))
    .pipe(named((file) => {
        const p = path.parse(file.relative);
        return ((p.dir) ? p.dir + path.sep : '') + p.name;
      })
    )
    .pipe(webpackStream(webpackConfig, webpack))
    .pipe(gulp.dest(paths.js.dest))
    .pipe(debug({title: 'js dest:'}));
}

/**
 * watchタスクを実行する関数
 */
function watch() {
  return gulp.watch(paths.js.src, gulp.series(js))
}

exports.js = js; // jsタスク
exports.watch = watch; // watchタスク
exports.default = gulp.series(js); // defaultタスク

# defaultタスクの実行
yarn gulp

# jsタスクの実行
yarn gulp js