🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

2回答

1542閲覧

node.jsのgulp環境構築でエラーが発生する(Windows)

engnao

総合スコア29

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2020/12/08 05:25

編集2020/12/08 05:45

#エラー内容
gulpでタスク(sass)を実行した際、エラーが表示されて、ビルドが完了しません。

 どなたか教えていただけると助かります。
よろしくお願いいたします。

 ※以下実行結果のエラーコード参照

#実施したエラー対処

【node.jsの再インストール】
1.インストーラーからnode.jsを再インストール
2...\AppData\Roaming配下のnpm,npm-cacheフォルダを削除
3.node.jsのインストーラーから再インストール

 【バージョン管理システムを使用したnode.jsの再インストール】
1.コマンドプロンプトからnode.jsをアンインストール
2...\AppData\Roaming配下のnpm,npm-cacheフォルダを削除
3.WSLの有効化
4.Ubuntuをインストール
5.Ubuntu上でhomebrewのインストール
6.nodebrewのインストール
7.nodebrewからnode.jsのインストール

 【必要なファイルが生成されているか確認】
・package.jsonが生成されていることを確認
・node_modulesフォルダが生成されていることを確認

#エラー内容
【gulp sassエラー】

gulp

1C:\sass>gulp sass 2Error: ENOENT: no such file or directory, scandir 'C:\sass\node_modules\node-sass\vendor' 3 at Object.readdirSync (fs.js:1021:3) 4 at Object.getInstalledBinaries (C:\sass\node_modules\node-sass\lib\extensions.js:133:13) 5 at foundBinariesList (C:\sass\node_modules\node-sass\lib\errors.js:20:15) 6 at foundBinaries (C:\sass\node_modules\node-sass\lib\errors.js:15:5) 7 at Object.module.exports.missingBinary (C:\sass\node_modules\node-sass\lib\errors.js:45:5) 8 at module.exports (C:\sass\node_modules\node-sass\lib\binding.js:15:30) 9 at Object.<anonymous> (C:\sass\node_modules\node-sass\lib\index.js:14:35) 10 at Module._compile (internal/modules/cjs/loader.js:1063:30) 11 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) 12 at Module.load (internal/modules/cjs/loader.js:928:32) { 13 errno: -4058, 14 syscall: 'scandir', 15 code: 'ENOENT', 16 path: 'C:\sass\node_modules\node-sass\vendor' 17}

【require-or-importのエラー】

gulp

1C:\sass>npm i -D require-or-import 2npm ERR! code E404 3npm ERR! 404 Not Found - GET https://registry.npmjs.org/require-or-import - Not found 4npm ERR! 404 5npm ERR! 404 'require-or-import@latest' is not in the npm registry. 6npm ERR! 404 You should bug the author to publish it (or use the name yourself!) 7npm ERR! 404 8npm ERR! 404 Note that you can also install from a 9npm ERR! 404 tarball, folder, http url, or git url. 10 11npm ERR! A complete log of this run can be found in: 12npm ERR! ..\AppData\Roaming\npm-cache\_logs\2020-12-08T05_20_47_367Z-debug.log 13 14C:\sass>

#補足
調査した結果、実行エラーに記載されているモジュールが正しくインストールされてなかった為、
npm i -D (パッケージ名)で実行エラーに記載されているパッケージをすべてインストールいたしました。
しかし、require-or-importをインポートした際にエラーが表示されました。
上記を踏まえ、bulp実行環境における改善方法のご教示を頂きたいです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ファイル構成の見直し

投稿2021/02/25 01:49

engnao

総合スコア29

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

no such file or directory, scandir 'C:\sass\node_modules\node-sass\vendor'

ファイルまたはディレクトリがありません。

エラーメッセージの通りでしょう。
ファイル構成など誰も知らないので、あなたが調べるしか無いです。

投稿2020/12/08 12:30

technocore

総合スコア7337

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問