gulp環境構築でエラーが出て進みません。どなたかご教授お願い致します。
解決したいこと
現在、MacBook Air M2でgulp環境を構築しているのですが、ずっとエラーが出て進みません。どなたかご教授頂けますと幸いです。
発生している問題・エラー
> mozjpeg@7.1.1 postinstall /Users/omits/Downloads/gulp-test-main/_gulp/node_modules/imagemin-mozjpeg/node_modules/mozjpeg
> node lib/install.js
spawn Unknown system error -86
mozjpeg pre-build test failed
compiling from source
Error: Command failed: /bin/sh -c autoreconf -fiv
autoreconf: export WARNINGS=
autoreconf: Entering directory '.'
autoreconf: configure.ac: not using Gettext
autoreconf: running: aclocal --force
Can't exec "aclocal": No such file or directory at /opt/homebrew/Cellar/autoconf/2.71/share/autoconf/Autom4te/FileUtils.pm line 274.
autoreconf: error: aclocal failed with exit status: 2
at /Users/omits/Downloads/gulp-test-main/_gulp/node_modules/bin-build/node_modules/execa/index.js:231:11
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Promise.all (index 0)
npm WARN gulp-postcss@9.0.1 requires a peer of postcss@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN gulp-test@1.0.0 No description
npm WARN gulp-test@1.0.0 No repository field.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mozjpeg@7.1.1 postinstall: `node lib/install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mozjpeg@7.1.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/omits/.npm/_logs/2023-02-13T09_33_53_268Z-debug.log
該当するソースコード（gulpfile.js)
const gulp = require('gulp');
const del = require('del');
//scss
const sass = require('gulp-dart-sass'); //Dart Sass はSass公式が推奨 @use構文などが使える
const plumber = require("gulp-plumber"); // エラーが発生しても強制終了させない
const notify = require("gulp-notify"); // エラー発生時のアラート出力
const browserSync = require("browser-sync"); //ブラウザリロード
const autoprefixer = require('gulp-autoprefixer'); //ベンダープレフィックス自動付与
const postcss = require("gulp-postcss"); //css-mqpackerを使うために必要
const mqpacker = require('css-mqpacker'); //メディアクエリをまとめる
//画像圧縮
const imagemin = require("gulp-imagemin");
const imageminMozjpeg = require("imagemin-mozjpeg");
const imageminPngquant = require("imagemin-pngquant");
const imageminSvgo = require("imagemin-svgo");
// 入出力するフォルダを指定
const srcBase = '../_static/src';
const assetsBase = '../_assets';
const distBase = '../_static/dist';
const srcPath = {
'scss': assetsBase + '/scss/**/*.scss',
'js': assetsBase + '/js/**/*.js',
'img': [assetsBase + '/img/**/*', '!' + assetsBase + '/img/svg/*.svg'],
'font': assetsBase + '/font/**/*',
'html': srcBase + '/**/*.html',
'php': srcBase + '/**/*.php',
};
const distPath = {
'css': distBase + '/css/',
'js': distBase + '/js/',
'img': distBase + '/img/',
'font': distBase + '/font/',
'html': distBase + '/',
'php': distBase + '/',
};
/**
* clean
*/
const clean = () => {
return del([distBase + '/**'], {
force: true
});
}
//ベンダープレフィックスを付与する条件
const TARGET_BROWSERS = [
'last 2 versions',
'ie >= 11',
'iOS >= 7',
'Android >= 4.4'
];
/**
* sass
*
*/
const cssSass = () => {
return gulp.src(srcPath.scss, {
sourcemaps: true
})
.pipe(
//エラーが出ても処理を止めない
plumber({
errorHandler: notify.onError('Error:<%= error.message %>')
}))
.pipe(sass({
outputStyle: 'expanded'
})) //指定できるキー expanded compressed
.pipe(autoprefixer(TARGET_BROWSERS))
.pipe(postcss([mqpacker()])) // メディアクエリをまとめる
.pipe(gulp.dest(distPath.css, {
sourcemaps: './'
})) //コンパイル先
.pipe(browserSync.stream())
.pipe(notify({
message: 'Sassをコンパイルしました！',
onLast: true
}))
}
/**
* 画像圧縮
*/
const imgImagemin = () => {
return gulp.src(srcPath.img)
.pipe(
imagemin(
[
imageminMozjpeg({
quality: 80
}),
imageminPngquant(),
imageminSvgo({
plugins: [{
removeViewbox: false
}]
})
], {
verbose: true
}
)
)
.pipe(gulp.dest(distPath.img))
}
/**
* html
*/
const html = () => {
return gulp.src(srcPath.html)
.pipe(gulp.dest(distPath.html))
}
/**
* js
*/
const js = () => {
return gulp.src(srcPath.js)
.pipe(gulp.dest(distPath.js))
}
/**
* php
*/
const php = () => {
return gulp.src(srcPath.php)
.pipe(gulp.dest(distPath.php))
}
/**
* 独自fontをsrc配下に読み込む際の対応
*/
const font = () => {
return gulp.src(srcPath.font)
.pipe(gulp.dest(distPath.font))
}
/**
* ローカルサーバー立ち上げ
*/
const browserSyncFunc = () => {
browserSync.init(browserSyncOption);
}
const browserSyncOption = {
server: distBase
}
/**
* リロード
*/
const browserSyncReload = (done) => {
browserSync.reload();
done();
}
/**
*
* ファイル監視 ファイルの変更を検知したら、browserSyncReloadでreloadメソッドを呼び出す
* series 順番に実行
* watch('監視するファイル',処理)
*/
const watchFiles = () => {
gulp.watch(srcPath.scss, gulp.series(cssSass))
gulp.watch(srcPath.html, gulp.series(html, browserSyncReload))
gulp.watch(srcPath.js, gulp.series(js, browserSyncReload))
gulp.watch(srcPath.img, gulp.series(imgImagemin, browserSyncReload))
gulp.watch(srcPath.php, gulp.series(php, browserSyncReload))
gulp.watch(srcPath.font, gulp.series(font, browserSyncReload))
}
/**
* seriesは「順番」に実行
* parallelは並列で実行
*
* 一度cleanでdistフォルダ内を削除し、最新のものをdistする
*/
exports.default = gulp.series(
clean,
gulp.parallel(html, cssSass, js, imgImagemin, php, font),
gulp.parallel(watchFiles, browserSyncFunc)
);
該当するソースコード（package.json)
{
"name": "gulp-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"browser-sync": "^2.26.14",
"css-mqpacker": "^7.0.0",
"del": "^6.0.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-dart-sass": "^1.0.2",
"gulp-imagemin": "^7.1.0",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.2.1",
"gulp-postcss": "^9.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-pngquant": "^9.0.1",
"imagemin-svgo": "^8.0.0"
},
"resolutions": {
"mozjpeg": "7.1.0"
}
}
自分で試したこと
npmやnodeのバージョンを変えたりしましたが原因がわかりませんでした。
0 likes
