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は、万が一のサブ機として温存することにした。