質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
Sass

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

gulp

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

Q&A

1回答

938閲覧

gulpを動かしたいのですが、ERRが出てしまいます。

mukuta0111

総合スコア18

Sass

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

gulp

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

0グッド

0クリップ

投稿2019/04/24 02:33

編集2022/01/12 10:55

gulpを動かしたいのですが、ERRが出てしまいます。

gulpを実装中に以下のエラーメッセージが発生しました。
gulpをほとんど使ったことがないのでさっぱりわかりません...

申し訳ありませんがよろしくおねがいいたします。

発生している問題・エラーメッセージ

Error: Cannot find module 'gulp-sass' at Function.Module._resolveFilename (module.js:547:15) at Function.Module._load (module.js:474:25) at Module.require (module.js:596:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/name/Desktop/DEVELOPMENT/gulp/tasks/sass.js:8:14) at Module._compile (module.js:652:30) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3)

試したこと

以下のURLを確認して、試してみましたがだめでした。

https://qiita.com/amagurik2/items/e908392c47ada97538c5

https://stackoverflow.com/questions/33314607/error-cannot-find-module-gulp-sass

補足情報(FW/ツールのバージョンなど)

環境は、macを使用しています。
他の人がGitにプッシュしたものをクローンしてGulpを動かそうとしたら、正常に作動しませんでした。

node_modulesは正常にインストールできました。

よろしくお願いいたします。

### gulpfile.js の内容は以下になります。

"use strict"; require("./gulp/tasks/dev"); require("./gulp/tasks/build"); require("./gulp/tasks/release");

dev.js

"use strict"; //-------------------------------------------------------------------------------- // パッケージの読み込み //-------------------------------------------------------------------------------- const gulp = require("gulp"); const utils = require("../../utils"); //-------------------------------------------------------------------------------- // 設定ファイルの読み込み //-------------------------------------------------------------------------------- const taskName = require("../configs/task-name.config"); //-------------------------------------------------------------------------------- // タスクの読み込み //-------------------------------------------------------------------------------- const server = require("./browser-sync"); const watch = require("./watch"); const webpack = require("./webpack"); //-------------------------------------------------------------------------------- // タスクの登録 //-------------------------------------------------------------------------------- gulp.task(taskName.dev, () => { server(); watch(); webpack(utils.mode.DEV); });

build.js

"use strict"; //-------------------------------------------------------------------------------- // パッケージの読み込み //-------------------------------------------------------------------------------- const gulp = require("gulp"); const utils = require("../../utils"); //-------------------------------------------------------------------------------- // 設定ファイルの読み込み //-------------------------------------------------------------------------------- const taskName = require("../configs/task-name.config"); //-------------------------------------------------------------------------------- // タスクの読み込み //-------------------------------------------------------------------------------- const clean = require("./clean"); const pug = require("./pug"); const sass = require("./sass"); const webpack = require("./webpack"); const image = require("./image"); const sprite = require("./sprite"); const concat = require("./concat"); const copy = require("./copy"); const iconfont = require("./iconfont"); //-------------------------------------------------------------------------------- // タスクの登録 //-------------------------------------------------------------------------------- gulp.task(taskName.build, async () => { await clean(utils.mode.BUILD); await sprite(); await Promise.all([ pug(utils.mode.BUILD), sass(utils.mode.BUILD), webpack(utils.mode.BUILD), image(utils.mode.BUILD), iconfont(utils.mode.BUILD), concat(utils.mode.BUILD), copy(utils.mode.BUILD) ]); });

release.js

"use strict"; //-------------------------------------------------------------------------------- // パッケージの読み込み //-------------------------------------------------------------------------------- const gulp = require("gulp"); const utils = require("../../utils"); //-------------------------------------------------------------------------------- // 設定ファイルの読み込み //-------------------------------------------------------------------------------- const taskName = require("../configs/task-name.config"); //-------------------------------------------------------------------------------- // タスクの読み込み //-------------------------------------------------------------------------------- const clean = require("./clean"); const pug = require("./pug"); const sass = require("./sass"); const webpack = require("./webpack"); const image = require("./image"); const sprite = require("./sprite"); const concat = require("./concat"); const copy = require("./copy"); const iconfont = require("./iconfont"); //-------------------------------------------------------------------------------- // タスクの登録 //-------------------------------------------------------------------------------- gulp.task(taskName.release, async () => { await clean(utils.mode.RELEASE); await sprite(); await Promise.all([ pug(utils.mode.RELEASE), sass(utils.mode.RELEASE), webpack(utils.mode.RELEASE), image(utils.mode.RELEASE), iconfont(utils.mode.RELEASE), concat(utils.mode.RELEASE), copy(utils.mode.RELEASE) ]); });

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

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

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

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

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

CHERRY

2019/04/24 03:11 編集

どの様な環境( mac / Win / Linux や node 等のバージョン )に どの様な手順で、 gulp をインストールされたのでしょうか? 具体的な手順か参考にされた情報源( URL等 )を記載していただけないでしょうか?
mukuta0111

2019/04/24 03:19

かしこまりました。 行き届いていなくて申し訳ありません。
guest

回答1

0

実行ファイル(gulpfile.js)の内容と、実行コマンドが記載されていないので、なんとも言えませんが、
エラーを見る限り、
Gulp環境に、gulp-sassモジュールがインストールされていない、となっています。
Gulp環境に、gulp-sassモジュールをインストールしましょう。

cd コマンドで、gulpの実行環境のディレクトリまで行き、下記コマンドを実行します。

cmd

1npm install gulp-sass --save-dev

これで大丈夫かと思いますが、
もし動かなかったらコメントいただければと思います。

投稿2019/04/24 03:07

miyabi_takatsuk

総合スコア9528

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

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

mukuta0111

2019/04/24 04:11

何もわからず申し訳ありません... 実行したところ、やはり同じERR文が表示されてしまいました... gulpfile.jsの内容を記載しておきます...
miyabi_takatsuk

2019/04/24 04:20 編集

修正した質問だけだと、記載不足です。 何を実行しているか、まだわかりません。 requireさせいている、元のファイルの記載も必要になるでしょう。 gulp/tasks/dev.js、gulp/tasks/build.js、gulp/tasks/release.js の内容も記載お願いします。 また、エラーが出た時に実行したコマンドも併せて記載お願いします。
mukuta0111

2019/04/24 04:23

すいません。さらに追加いたしました。 よろしくお願いいたします。
miyabi_takatsuk

2019/04/24 04:43

なんどもすみません、どうやら、まだ潜る必要がありそうです・・・。 gulpfile.jsと同階層に、sass.jsファイルが存在しませんか? そのファイルの中身も記載いただく必要がありそうです。 おそらく、そこで、sassのコンパイルに関する記述がありそうです。 (そこまで見ればおそらく原因絞り込めるでしょう)
ockie

2019/04/25 15:55

先に一度、package.jsonの中身を見せてもらった方がいいと思います。
miyabi_takatsuk

2019/04/26 06:16 編集

ockieさん> そうですね、それでパッケージのインストール状況を一発で網羅できますね。 ありがとうございます。 質問者さん、package.jsonファイルの内容も質問に記載いただけませんか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問