MacBookPro2021にしたらGulpが動かなくなった(解決)


M1 Pro の MacBookPro2021を購入した。
せっかくだからクリーンな状態から新たに環境を作っていたのだが、Gulp環境で3時間ほどつまづいた。
インストールは、普通にやった。
こんな感じ。
mac版】gulpのインストールから使い方までを解説【Web制作初心者向け】 | TechnoBlog
https://yusukeurabe.com/gulp_install/

しかし、gulpコマンドを実行すると、

ReferenceError: require is not defined in ES module scope, you can use import instead

とエラーが出てしまう。

原因はgulpfile.jsの書き方。

エラーが出る

var _gulp = require('gulp'),
    _sass = require('gulp-sass')(require(sass)),                 // sass
    _sourcemaps = require('gulp-sourcemaps'),     // source map(css,js)
    _autoprefixer = require('gulp-autoprefixer'), // ベンダープフィックスを自動付与
    _imagemin = require("gulp-imagemin"),         // 画像圧縮
    _pngquant  = require("imagemin-pngquant"),    // png高圧縮
    _plumber = require('gulp-plumber'),           // エラーがあっても止めない
    _changed = require('gulp-changed'),           // 変更したファイルだけ
    _del = require('del'),                        // ファイルを削除する
    _browserSync =require('browser-sync').create(),        // Webサーバー
    _reload =_browserSync.reload,                 // Webサーバーreload
    _connect = require('gulp-connect-php'),       // php
    _connectSsi = require('connect-ssi'),         // ssi
    _iconfont = require('gulp-iconfont'),         // iconfont生成
    _consolidate = require('gulp-consolidate'),   // iconfontのcss生成
    _indent = require("gulp-indent"),             // インデントの整形
    _aigis = require('gulp-aigis');               // スタイルガイド生成

これで解決

import _gulp from 'gulp';
import _sass from 'gulp-sass';                 // sass
import _sourcemaps from 'gulp-sourcemaps';     // source map(css,js)
import _autoprefixer from 'gulp-autoprefixer'; // ベンダープフィックスを自動付与
import _imagemin from "gulp-imagemin";         // 画像圧縮
import _pngquant  from "imagemin-pngquant";    // png高圧縮
import _plumber from 'gulp-plumber';           // エラーがあっても止めない
import _changed from 'gulp-changed';           // 変更したファイルだけ
import _del from 'del';                        // ファイルを削除する
import _browserSync from 'browser-sync';        // Webサーバー
import _connect from 'gulp-connect-php';       // php
import _connectSsi from 'connect-ssi';         // ssi
import _iconfont from 'gulp-iconfont';         // iconfont生成
import _consolidate from 'gulp-consolidate';   // iconfontのcss生成
import _indent from "gulp-indent";             // インデントの整形
import _aigis from 'gulp-aigis';               // スタイルガイド生成
_browserSync.create()        // Webサーバー
var	_reload = _browserSync.reload;                 // Webサーバーreload

これで仕事の環境は整った。
一番近いApple Storeまで車で3時間ほどかかる地域にいるので、先代のMacBook Proは、万が一のサブ機として温存することにした。