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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

gulp

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

Q&A

解決済

1回答

3900閲覧

Gulpでglobなどの読み込みがうまくいかない

kadot

総合スコア27

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

gulp

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

0グッド

0クリップ

投稿2019/05/19 09:56

gulpに挑戦しているところなのですが、エラーが出てしまい、どこがおかしいのかわからず困っています。
もし、わかる方いらっしゃれば教えていただきたいです。

ターミナルで表示されたエラーは以下です。

ReferenceError: plumber is not defined at /Users/ユーザー名/Desktop/ファイル名/gulpfile.js:17:9 at bound (domain.js:415:14) at runBound (domain.js:428:12) at asyncRunner (/Users/ユーザー名/Desktop/ファイル名/node_modules/async-done/index.js:55:18) at processTicksAndRejections (internal/process/task_queues.js:82:9)

gulpfile.jsは以下のように記述しています。

const gulp = require("gulp"); const sass = require("gulp-sass"); const sassGlob = require("gulp-sass-glob"); const notify = require("gulp-notify"); const postcss = require("gulp-postcss"); const autoprefixer = require("autoprefixer"); const cssdeclsort = require("css-declaration-sorter"); const mqpacker = require("css-mqpacker"); gulp.task("default", function() { return gulp.watch("scss/**/*.scss", function() { return ( gulp .src("scss/**/*.scss") .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")})) .pipe(sassGlob()) .pipe(sass({outputStyle: "expanded"}).on("error", sass.logError)) .pipe(postcss([autoprefixer()])) .pipe(postcss([cssdeclsort({order: 'smaccs'})])) .pipe(postcss([mqpacker()])) .pipe(gulp.dest("www/css")) ); }); });

また、requireの直後に「...」という表示があったりします。(vscode)
イメージ説明

例えば、"gulp-sass-glob"の「...」部分にマウスをホバーすると以下のようなメッセージが表示されます。

module "/Users/ユーザー名/Desktop/ファイル名/node_modules/gulp-sass-glob/dist/index" モジュール 'gulp-sass-glob' の宣言ファイルが見つかりませんでした。'/Users/ユーザー名/Desktop/ファイル名/node_modules/gulp-sass-glob/dist/index.js' は暗黙的に 'any' 型になります。 Try `npm install @types/gulp-sass-glob` if it exists or add a new declaration (.d.ts) file containing `declare module 'gulp-sass-glob';`ts(7016)

宣言ファイルという箇所が怪しいと思いつつも、色々調べてみたのですがよくわからず、teratailへ投稿することにしました。
よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

まず言えることが、
エラーの内容は制御ファイルの記述の中に、”plumber”というものは定義されていない、ということです。
gulp-plumberモジュールをインストールしていないのなら、インストールした上で、
gulpfile.jsに、
const plumber = require('gulp-plumber');
を2行目あたりに追加しましょう。
それで解決しなければ、
また、その時に出たエラー文と共に、コメントください。

ちなみに、一番下のエラーですが、アプリケーションによっては、gulp制御上の全てのファイルを包括的にみれていないパターンがあるので、
該当モジュールをインストールしているなら、無視していいでしょう。
ただ、本当に宣言ファイルが存在していないのならば、インストールする必要があります。
合わせてご確認ください。

投稿2019/05/19 15:07

miyabi_takatsuk

総合スコア9528

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

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

kadot

2019/05/20 00:58

ご指摘通り、gulp-plumberモジュールをインストールして、定義したらエラーがなくなりました!! ありがとうございますm(_ _)m
miyabi_takatsuk

2019/05/20 01:06

よかったです! gulpなどの、直接コマンドを使用したツールなどは特に、エラーを注意深く見ていくと、 問題解決につながります。 慣れないうちは、難しく感じるかもしれませんが、くじけずあきらめず、挑戦していかれるといいかと思います。
kadot

2019/05/20 01:18

自分はエラーの解釈の仕方がまだ上手ではないなと感じました。おそらくこれからもいろんなエラーに出くわすと思いますが、都度注意深く見ていきたいと思います。 アドバイスありがとうございます。頑張ります!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問