⛔️ gulp 설치가 안 되는 에러
문제 발생
gulp를 처음 사용하기 위해서 npm install을 했는데, 무슨 deprecated 폭탄을 맞고...
🗣 교육용 gulp 파일을 깃헙에서 다운받기 위해 git clone을 진행했습니다.
git clone https://github.com/nomadcoders/scss-masterclass.git🗣 npm install을 통해 package.json에 기록된 모듈들을 다운받았습니다.
⛔️ 끝없는 deprecated 오류 폭탄을 맞아버렸습니다...;
jiwoo@Jiwooui-MacBookPro ~/desktop/nomad-coders/css-masterclass/scss-masterclass master npm i
npm WARN deprecated fsevents@1.2.11: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated ini@1.3.5: Please update to ini >=1.3.6 to avoid a prototype pollution issue
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.3: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm ERR! code 1
npm ERR! path /Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /usr/local/bin/node /Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! c++ '-DNODE_GYP_MODULE_NAME=libsass' '-DUSING_UV_SHARED=1' '-DUSING_V8_SHARED=1' '-DV8_DEPRECATION_WARNINGS=1' '-DV8_DEPRECATION_WARNINGS' '-DV8_IMMINENT_DEPRECATION_WARNINGS' '-D_GLIBCXX_USE_CXX11_ABI=1' '-D_DARWIN_USE_64_BIT_INODE=1' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-DOPENSSL_NO_PINSHARED' '-DOPENSSL_THREADS' '-DLIBSASS_VERSION="3.5.4"' -I/Users/jiwoo/.node-gyp/16.13.0/include/node -I/Users/jiwoo/.node-gyp/16.13.0/src -I/Users/jiwoo/.node-gyp/16.13.0/deps/openssl/config -I/Users/jiwoo/.node-gyp/16.13.0/deps/openssl/openssl/include -I/Users/jiwoo/.node-gyp/16.13.0/deps/uv/include -I/Users/jiwoo/.node-gyp/16.13.0/deps/zlib -I/Users/jiwoo/.node-gyp/16.13.0/deps/v8/include -I../src/libsass/include -O3 -gdwarf-2 -mmacosx-version-min=10.7 -arch x86_64 -Wall -Wendif-labels -W -Wno-unused-parameter -std=c++11 -stdlib=libc++ -fno-strict-aliasing -MMD -MF ./Release/.deps/Release/obj.target/libsass/src/libsass/src/ast.o.d.raw -c -o Release/obj.target/libsass/src/libsass/src/ast.o ../src/libsass/src/ast.cpp
npm ERR! c++ '-DNODE_GYP_MODULE_NAME=libsass' '-DUSING_UV_SHARED=1' '-DUSING_V8_SHARED=1' '-DV8_DEPRECATION_WARNINGS=1' '-DV8_DEPRECATION_WARNINGS' '-DV8_IMMINENT_DEPRECATION_WARNINGS' '-D_GLIBCXX_USE_CXX11_ABI=1' '-D_DARWIN_USE_64_BIT_INODE=1' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-DOPENSSL_NO_PINSHARED' '-DOPENSSL_THREADS' '-DLIBSASS_VERSION="3.5.4"' -I/Users/jiwoo/.node-gyp/16.13.0/include/node -I/Users/jiwoo/.node-gyp/16.13.0/src -I/Users/jiwoo/.node-gyp/16.13.0/deps/openssl/config -I/Users/jiwoo/.node-gyp/16.13.0/deps/openssl/openssl/include -I/Users/jiwoo/.node-gyp/16.13.0/deps/uv/include -I/Users/jiwoo/.node-gyp/16.13.0/deps/zlib -I/Users/jiwoo/.node-gyp/16.13.0/deps/v8/include -I../src/libsass/include -O3 -gdwarf-2 -mmacosx-version-min=10.7 -arch x86_64 -Wall -Wendif-labels -W -Wno-unused-parameter -std=c++11 -stdlib=libc++ -fno-strict-aliasing -MMD -MF ./Release/.deps/Release/obj.target/libsass/src/libsass/src/ast_fwd_decl.o.d.raw -c -o Release/obj.target/libsass/src/libsass/src/ast_fwd_decl.o ../src/libsass/src/ast_fwd_decl.cpp
npm ERR! c++ '-DNODE_GYP_MODULE_NAME=libsass' '-DUSING_UV_SHARED=1' '-DUSING_V8_SHARED=1' '-DV8_DEPRECATION_WARNINGS=1' '-DV8_DEPRECATION_WARNINGS' '-DV8_IMMINENT_DEPRECATION_WARNINGS' '-D_GLIBCXX_USE_CXX11_ABI=1' '-D_DARWIN_USE_64_BIT_INODE=1' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-DOPENSSL_NO_PINSHARED' '-DOPENSSL_THREADS' '-DLIBSASS_VERSION="3.5.4"' -I/Users/jiwoo/.node-gyp/16.13.0/include/node -I/Users/jiwoo/.node-gyp/16.13.0/src -I/Users/jiwoo/.node-gyp/16.13.0/deps/openssl/config -I/Users/jiwoo/.node-gyp/16.13.0/deps/openssl/openssl/include -I/Users/jiwoo/.node-gyp/16.13.0/deps/uv/include -I/Users/jiwoo/.node-gyp/16.13.0/deps/zlib -I/Users/jiwoo/.node-gyp/16.13.0/deps/v8/include -I../src/libsass/include -O3 -gdwarf-2 -mmacosx-version-min=10.7 -arch x86_64 -Wall -Wendif-labels -W -Wno-unused-parameter -std=c++11 -stdlib=libc++ -fno-strict-aliasing -MMD -MF ./Release/.deps/Release/obj.target/libsass/src/libsass/src/backtrace.o.d.raw -c -o Release/obj.target/libsass/src/libsass/src/backtrace.o ../src/libsass/src/backtrace.cpp
npm ERR! c++ '-DNODE_GYP_MODULE_NAME=libsass' '-DUSING_UV_SHARED=1' '-DUSING_V8_SHARED=1' '-DV8_DEPRECATION_WARNINGS=1' '-DV8_DEPRECATION_WARNINGS' '-DV8_IMMINENT_DEPRECATION_WARNINGS' '-D_GLIBCXX_USE_CXX11_ABI=1' '-D_DARWIN_USE_64_BIT_INODE=1' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-DOPENSSL_NO_PINSHARED' '-DOPENSSL_THREADS' '-DLIBSASS_VERSION="3.5.4"' -I/Users/jiwoo/.node-gyp/16.13.0/include/node -I/Users/jiwoo/.node-gyp/16.13.0/src -I/Users/jiwoo/.node-gyp/16.13.0/deps/openssl/config -I/Users/jiwoo/.node-gyp/16.13.0/deps/openssl/openssl/include -I/Users/jiwoo/.node-gyp/16.13.0/deps/uv/include -I/Users/jiwoo/.node-gyp/16.13.0/deps/zlib -I/Users/jiwoo/.node-gyp/16.13.0/deps/v8/include -I../src/libsass/include -O3 -gdwarf-2 -mmacosx-version-min=10.7 -arch x86_64 -Wall -Wendif-labels -W -Wno-unused-parameter -std=c++11 -stdlib=libc++ -fno-strict-aliasing -MMD -MF ./Release/.deps/Release/obj.target/libsass/src/libsass/src/base64vlq.o.d.raw -c -o Release/obj.target/libsass/src/libsass/src/base64vlq.o ../src/libsass/src/base64vlq.cpp
npm ERR! c++ '-DNODE_GYP_MODULE_NAME=libsass' '-DUSING_UV_SHARED=1' '-DUSING_V8_SHARED=1' '-DV8_DEPRECATION_WARNINGS=1' '-DV8_DEPRECATION_WARNINGS' '-DV8_IMMINENT_DEPRECATION_WARNINGS' '-D_GLIBCXX_USE_CXX11_ABI=1' '-D_DARWIN_USE_64_BIT_INODE=1' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-DOPENSSL_NO_PINSHARED' '-DOPENSSL_THREADS' '-DLIBSASS_VERSION="3.5.4"' -I/Users/jiwoo/.node-gyp/16.13.0/include/node -I/Users/jiwoo/.node-gyp/16.13.0/src -I/Users/jiwoo/.node-gyp/16.13.0/deps/openssl/config -I/Users/jiwoo/.node-gyp/16.13.0/deps/openssl/openssl/include -I/Users/jiwoo/.node-gyp/16.13.0/deps/uv/include -I/Users/jiwoo/.node-gyp/16.13.0/deps/zlib -I/Users/jiwoo/.node-gyp/16.13.0/deps/v8/include -I../src/libsass/include -O3 -gdwarf-2 -mmacosx-version-min=10.7 -arch x86_64 -Wall -Wendif-labels -W -Wno-unused-parameter -std=c++11 -stdlib=libc++ -fno-strict-aliasing -MMD -MF ./Release/.deps/Release/obj.target/libsass/src/libsass/src/bind.o.d.raw -c -o Release/obj.target/libsass/src/libsass/src/bind.o ../src/libsass/src/bind.cpp
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli '/usr/local/bin/node',
npm ERR! gyp verb cli '/Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.13.0 | darwin | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` succeeded python2 /usr/bin/python2
npm ERR! gyp verb check python version `/usr/bin/python2 -c "import sys; print "2.7.16
npm ERR! gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 16.13.0
npm ERR! gyp verb command install [ '16.13.0' ]
npm ERR! gyp verb install input version string "16.13.0"
npm ERR! gyp verb install installing version: 16.13.0
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version is already installed, need to check "installVersion"
npm ERR! gyp verb got "installVersion" 9
npm ERR! gyp verb needs "installVersion" 9
npm ERR! gyp verb install version is good
npm ERR! gyp verb get node dir target node version installed: 16.13.0
npm ERR! gyp verb build dir attempting to create "build" dir: /Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-sass/build
npm ERR! gyp verb build dir "build" dir needed to be created? /Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-sass/build
npm ERR! gyp verb build/config.gypi creating config file
npm ERR! gyp verb build/config.gypi writing out config file: /Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-sass/build/config.gypi
npm ERR! (node:1581) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! gyp verb config.gypi checking for gypi file: /Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-sass/config.gypi
npm ERR! gyp verb common.gypi checking for gypi file: /Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-sass/common.gypi
npm ERR! gyp verb gyp gyp format was not specified; forcing "make"
npm ERR! gyp info spawn /usr/bin/python2
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args 'binding.gyp',
npm ERR! gyp info spawn args '-f',
npm ERR! gyp info spawn args 'make',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-sass/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/jiwoo/.node-gyp/16.13.0/include/node/common.gypi',
npm ERR! gyp info spawn args '-Dlibrary=shared_library',
npm ERR! gyp info spawn args '-Dvisibility=default',
npm ERR! gyp info spawn args '-Dnode_root_dir=/Users/jiwoo/.node-gyp/16.13.0',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/jiwoo/.node-gyp/16.13.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-sass',
npm ERR! gyp info spawn args '-Dnode_engine=v8',
npm ERR! gyp info spawn args '--depth=.',
npm ERR! gyp info spawn args '--no-parallel',
npm ERR! gyp info spawn args '--generator-output',
npm ERR! gyp info spawn args 'build',
npm ERR! gyp info spawn args '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp verb command build []
npm ERR! gyp verb build type Release
npm ERR! gyp verb architecture x64
npm ERR! gyp verb node dev dir /Users/jiwoo/.node-gyp/16.13.0
npm ERR! gyp verb `which` succeeded for `make` /usr/bin/make
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'V=1', 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! In file included from ../src/libsass/src/ast.cpp:2:
npm ERR! ../src/libsass/src/ast.hpp:1614:25: warning: loop variable 'numerator' creates a copy from type 'const std::__1::basic_string<char>' [-Wrange-loop-construct]
npm ERR! for (const auto numerator : numerators)
npm ERR! ^
npm ERR! ../src/libsass/src/ast.hpp:1614:14: note: use reference type 'const std::__1::basic_string<char> &' to prevent copying
npm ERR! for (const auto numerator : numerators)
npm ERR! ^~~~~~~~~~~~~~~~~~~~~~
npm ERR! &
npm ERR! ../src/libsass/src/ast.hpp:1616:25: warning: loop variable 'denominator' creates a copy from type 'const std::__1::basic_string<char>' [-Wrange-loop-construct]
npm ERR! for (const auto denominator : denominators)
npm ERR! ^
npm ERR! ../src/libsass/src/ast.hpp:1616:14: note: use reference type 'const std::__1::basic_string<char> &' to prevent copying
npm ERR! for (const auto denominator : denominators)
npm ERR! ^~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! &
npm ERR! 2 warnings generated.
npm ERR! In file included from ../src/libsass/src/ast_fwd_decl.cpp:1:
npm ERR! ../src/libsass/src/ast.hpp:1614:25: warning: loop variable 'numerator' creates a copy from type 'const std::__1::basic_string<char>' [-Wrange-loop-construct]
npm ERR! for (const auto numerator : numerators)
npm ERR! ^
npm ERR! ../src/libsass/src/ast.hpp:1614:14: note: use reference type 'const std::__1::basic_string<char> &' to prevent copying
npm ERR! for (const auto numerator : numerators)
npm ERR! ^~~~~~~~~~~~~~~~~~~~~~
npm ERR! &
npm ERR! ../src/libsass/src/ast.hpp:1616:25: warning: loop variable 'denominator' creates a copy from type 'const std::__1::basic_string<char>' [-Wrange-loop-construct]
npm ERR! for (const auto denominator : denominators)
npm ERR! ^
npm ERR! ../src/libsass/src/ast.hpp:1616:14: note: use reference type 'const std::__1::basic_string<char> &' to prevent copying
npm ERR! for (const auto denominator : denominators)
npm ERR! ^~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! &
npm ERR! 2 warnings generated.
npm ERR! In file included from ../src/libsass/src/bind.cpp:3:
npm ERR! ../src/libsass/src/ast.hpp:1614:25: warning: loop variable 'numerator' creates a copy from type 'const std::__1::basic_string<char>' [-Wrange-loop-construct]
npm ERR! for (const auto numerator : numerators)
npm ERR! ^
npm ERR! ../src/libsass/src/ast.hpp:1614:14: note: use reference type 'const std::__1::basic_string<char> &' to prevent copying
npm ERR! for (const auto numerator : numerators)
npm ERR! ^~~~~~~~~~~~~~~~~~~~~~
npm ERR! &
npm ERR! ../src/libsass/src/ast.hpp:1616:25: warning: loop variable 'denominator' creates a copy from type 'const std::__1::basic_string<char>' [-Wrange-loop-construct]
npm ERR! for (const auto denominator : denominators)
npm ERR! ^
npm ERR! ../src/libsass/src/ast.hpp:1616:14: note: use reference type 'const std::__1::basic_string<char> &' to prevent copying
npm ERR! for (const auto denominator : denominators)
npm ERR! ^~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! &
npm ERR! error: error opening './Release/.deps/Release/obj.target/libsass/src/libsass/src/bind.o.d.raw': No such file or directory
npm ERR! 2 warnings and 1 error generated.
npm ERR! make: *** [Release/obj.target/libsass/src/libsass/src/bind.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack at ChildProcess.onExit (/Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Darwin 20.6.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.13.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jiwoo/.npm/_logs/2021-12-30T05_37_43_678Z-debug-0.log🗣 터미널에서 npm run dev 입력 시 실행이 되다가 끊겨버립니다.
npm run dev jiwoo@Jiwooui-MacBookPro ~/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass master ± npm run dev
> scss-masterclass@1.0.0 dev
> gulp dev
[14:38:34] Requiring external module @babel/register
Browserslist: caniuse-lite is outdated. Please run the following command: `yarn upgrade`
[14:38:35] Using gulpfile ~/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/gulpfile.babel.js
[14:38:35] Starting 'dev'...
[14:38:35] Starting 'clean'...
[14:38:35] Finished 'clean' after 3.91 ms
[14:38:35] Starting 'styles'...
Error in plugin "gulp-sass"
Message:
gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:
var sass = require('gulp-sass')(require('sass'));
[14:38:35] The following tasks did not complete: dev, <series>, styles
[14:38:35] Did you forget to signal async completion?🗣 감사하게도 어떤 분이, 같은 문제에 대한 해결 방법을 포스팅해주셨습니다. 📎
해결 방법
- 터미널 또는 cmd에 "npm i gulp gulp-sass node-sass --save-dev" 입력
npm i gulp gulp-sass node-sass --save-dev: gulp, gulp-sass, node-sass 세 가지 패키지를 node_modules 디렉터리에 설치합니다.
--save-dev? 📎- 패키지(plugin)를 ./node_moduels 디렉터리에 설치하고 ./package.json 파일의 devDependencies 항목에 플러그인 정보가 저장 됩니다.
- --production 빌드시 해당 플러그인이 포함되지 않습니다.
jiwoo@Jiwooui-MacBookPro ~/desktop/best-horror-scenes npm i gulp gulp-sass node-sass --save-dev
npm WARN idealTree Removing dependencies.gulp in favor of devDependencies.gulp
npm WARN idealTree Removing dependencies.gulp-sass in favor of devDependencies.gulp-sass
npm WARN idealTree Removing dependencies.node-sass in favor of devDependencies.node-sass
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
added 750 packages, and audited 751 packages in 34s
27 packages are looking for funding
run `npm fund` for details
6 high severity vulnerabilities
To address all issues, run:
npm audit fix
Run `npm audit` for details.npm WARN idealTree Removing dependencies.gulp in favor of devDependencies.gulp
🗣 dependencies의 gulp를 제거하고, devDependencies의 gulp로 대체하고 있다는 것을 의미합니다.📎
- "npm install || npm i" 입력
🗣 이후 바로 npm run dev를 터미널에서 실행하면 다음과 같은 에러 메시지를 만납니다.
Error in plugin "gulp-sass"
jiwoo@Jiwooui-MacBookPro ~/Desktop/Nomad-Coders/CSS-Masterclass/clone/paint-box npm run dev
> scss-masterclass@1.0.0 dev
> gulp dev
[17:32:35] Requiring external module @babel/register
[17:32:36] Using gulpfile ~/Desktop/Nomad-Coders/CSS-Masterclass/clone/paint-box/gulpfile.babel.js
[17:32:36] Starting 'dev'...
[17:32:36] Starting 'clean'...
[17:32:36] Finished 'clean' after 3.68 ms
[17:32:36] Starting 'styles'...
Error in plugin "gulp-sass"
Message:
gulp-sass no longer has a default Sass compiler; please set one yourself.
Both the "sass" and "node-sass" packages are permitted.
For example, in your gulpfile:
const sass = require('gulp-sass')(require('sass'));
[17:32:36] The following tasks did not complete: dev, <series>, styles
[17:32:36] Did you forget to signal async completion?
- gulpfile.babel.js 파일 수정 : 아래 사진에서 3, 7번째 줄 삭제
변경 전: import sass from "gulp-sass";
변경 전: sass.compiler = require("node-sass");
변경 후: const sass = require("gulp-sass")(require('sass'));
🗣 변경을 위 같이 해준 이유는, 터미널에 그렇게 하라고 써있었기 때문입니다 😏
Error: Cannot find module 'sass'발생 시, npm i sass로 모듈 다운로드
🗣 이후 바로 npm run dev를 터미널에서 실행하면 다음과 같은 에러 메시지를 만납니다.
Error: Cannot find module 'sass'
✘ jiwoo@Jiwooui-MacBookPro ~/desktop/best-horror-scenes npm run dev
> scss-masterclass@1.0.0 dev
> gulp dev
[23:52:14] Requiring external module @babel/register
Error: Cannot find module 'sass'
Require stack:
- /Users/jiwoo/Desktop/best-horror-scenes/gulpfile.babel.js
- /Users/jiwoo/Desktop/best-horror-scenes/node_modules/gulp-cli/lib/shared/require-or-import.js
- /Users/jiwoo/Desktop/best-horror-scenes/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js
- /Users/jiwoo/Desktop/best-horror-scenes/node_modules/gulp-cli/index.js
- /Users/jiwoo/Desktop/best-horror-scenes/node_modules/gulp/bin/gulp.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/Users/jiwoo/Desktop/best-horror-scenes/gulpfile.babel.js:8:35)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Module._compile (/Users/jiwoo/Desktop/best-horror-scenes/node_modules/pirates/lib/index.js:136:24)
at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Object.newLoader [as .js] (/Users/jiwoo/Desktop/best-horror-scenes/node_modules/pirates/lib/index.js:141:7)
at Module.load (node:internal/modules/cjs/loader:981:32) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/jiwoo/Desktop/best-horror-scenes/gulpfile.babel.js',
'/Users/jiwoo/Desktop/best-horror-scenes/node_modules/gulp-cli/lib/shared/require-or-import.js',
'/Users/jiwoo/Desktop/best-horror-scenes/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js',
'/Users/jiwoo/Desktop/best-horror-scenes/node_modules/gulp-cli/index.js',
'/Users/jiwoo/Desktop/best-horror-scenes/node_modules/gulp/bin/gulp.js'
]
}
- "src/scss/styles.scss" 파일 생성
🗣 styles.scss 파일 없이 npm run dev를 터미널에서 실행하면 다음과 같은 에러 메시지를 만납니다.
Error: File not found with singular glob: /Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/src/scss/styles.scss
touch src/scss/styles.scss🗣 styles.scss 파일이 존재하지 않으면 npm run dev를 실행해도 에러가 나면서 작동하지 않습니다.
✘ jiwoo@Jiwooui-MacBookPro ~/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass master npm run dev
> scss-masterclass@1.0.0 dev
> gulp dev
[15:51:43] Requiring external module @babel/register
[15:51:44] Using gulpfile ~/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/gulpfile.babel.js
[15:51:44] Starting 'dev'...
[15:51:44] Starting 'clean'...
[15:51:44] Finished 'clean' after 4.58 ms
[15:51:44] Starting 'styles'...
[15:51:44] 'styles' errored after 18 ms
[15:51:44] Error: File not found with singular glob: /Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/src/scss/styles.scss (if this was purposeful, use `allowEmpty` option)
at Glob.<anonymous> (/Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/glob-stream/readable.js:84:17)
at Object.onceWrapper (node:events:510:26)
at Glob.emit (node:events:390:28)
at Glob.emit (node:domain:475:12)
at Glob._finish (/Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/glob/glob.js:194:8)
at done (/Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/glob/glob.js:179:14)
at Glob._processSimple2 (/Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/glob/glob.js:685:12)
at /Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/glob/glob.js:673:10
at Glob._stat2 (/Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/glob/glob.js:769:12)
at lstatcb_ (/Users/jiwoo/Desktop/Nomad-Coders/CSS-Masterclass/scss-masterclass/node_modules/glob/glob.js:761:12)
[15:51:44] 'dev' errored after 27 ms
- "npm run dev" 입력
jiwoo@Jiwooui-MacBookPro ~/desktop/best-horror-scenes npm run dev
> scss-masterclass@1.0.0 dev
> gulp dev
[23:53:49] Requiring external module @babel/register
[23:53:50] Using gulpfile ~/Desktop/best-horror-scenes/gulpfile.babel.js
[23:53:50] Starting 'dev'...
[23:53:50] Starting 'clean'...
[23:53:50] Finished 'clean' after 5.1 ms
[23:53:50] Starting 'styles'...
[23:53:50] Finished 'styles' after 114 ms
[23:53:50] Starting 'watch'...🗣 gulp가 정상 작동한다면, style.scss 파일의 background:black을 background:blue로 바꿔줄 경우, dist/style.css 파일이 자동으로 바뀌는 것을 확인할 수 있습니다.
회고
🗣 구글링을 통해 같은 문제를 해결한 사례를 찾아 운 좋게 해결할 수 있었지만, 문제 원인과 해결 방법을 정확히 알지 못 하는 상태입니다.
🗣 해결 방법 레퍼런스는 노마드코더 댓글에서 찾을 수 있었습니다. 📎
재미를 쫓는 개발자