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

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

ただいまの
回答率

89.12%

なぜかgulpが反応しません。TypeError: Cannot read property 'toString' of null

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 185

fuhixx

score 14

なぜかgulpのbrowser-sync以外が反応しません。
TypeError: Cannot read property 'toString' of null
と言われますが、toStringには何もしていませんし、何もしていなくても今まで正常に動いていました。なので、身に覚えがありません。

関係ないかもしれないですが、やってみたことは以下です。
・gulpを入れ直す
・キャッシュを消す
・googleで記事を探す(当てはまる記事がない)
・npmアップデートする

エラーコードは以下です。

fuhixx-2:france-bekery-factory fuhixx$ sudo gulp
Password:
[09:59:21] Using gulpfile ~/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/gulpfile.js
[09:59:21] Starting 'default'...
[09:59:21] Starting 'browser-sync'...
[09:59:21] Starting 'watch'...
[09:59:22] Finished 'browser-sync' after 36 ms
[Browsersync] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.3.8:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ------------------------------------
[Browsersync] Serving files from: ./
^C
fuhixx-2:france-bekery-factory fuhixx$ sudo gulp
[09:59:39] Using gulpfile ~/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/gulpfile.js
[09:59:39] Starting 'default'...
[09:59:39] Starting 'browser-sync'...
[09:59:39] Starting 'watch'...
[09:59:39] Finished 'browser-sync' after 34 ms
[Browsersync] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.3.8:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ------------------------------------
[Browsersync] Serving files from: ./
[09:59:57] Starting 'sass'...
[09:59:57] Starting 'bs-reload'...
[09:59:57] Finished 'bs-reload' after 676 μs
[09:59:57] 'sass' errored after 16 ms
[09:59:57] TypeError: Cannot read property 'toString' of null
    at transform (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/gulp-sass-glob/dist/index.js:67:32)
    at DestroyableTransform._transform (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/gulp-sass-glob/dist/index.js:49:15)
    at DestroyableTransform.Transform._read (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/readable-stream/lib/_stream_transform.js:172:83)
    at doWrite (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/readable-stream/lib/_stream_writable.js:428:64)
    at writeOrBuffer (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/readable-stream/lib/_stream_writable.js:417:5)
    at DestroyableTransform.Writable.write (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/readable-stream/lib/_stream_writable.js:334:11)
    at DestroyableTransform.ondata (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/readable-stream/lib/_stream_readable.js:619:20)
    at DestroyableTransform.emit (events.js:315:20)
    at DestroyableTransform.EventEmitter.emit (domain.js:505:15)
[Browsersync] Reloading Browsers...
^C
fuhixx-2:france-bekery-factory fuhixx$ 

gulpファイルは以下です(gulpfile.js)

// プラグインの読み込み
const gulp = require("gulp");
const sass = require("gulp-sass"); //Sassのコンパイルを実行
const sassGlob = require("gulp-sass-glob"); //Sassの@importの記述を簡潔に
// !追加!
const plumber = require("gulp-plumber"); //エラー時の強制終了を防止
const notify = require("gulp-notify"); //エラー発生時にデスクトップ通知する
const browserSync = require("browser-sync"); //ブラウザ反映
// !追加終了!
/*---------------------------------

タスクの定義

---------------------------------*/
/*
タスクの定義:「sassをコンパイルする」
---------------------------------*/
gulp.task("sass", function (done) {
  return (
    gulp
    //ソースを指定
    .src("./scss/")
    // !追加!
    .pipe(
      plumber({
        errorHandler: notify.onError("Error: <%= error.message %>")
      })
    )
    //Sassの@importの記述を簡潔に
    .pipe(sassGlob())
    .pipe(
      sass({
        //expanded, nested, campact, compressedから選択
        outputStyle: "expanded",
      })
    )
    //コンパイル後の出力先
    .pipe(gulp.dest("./css/style.css"))
  );
});
/*
タスクの定義:「保存時にリロードする」
---------------------------------*/
gulp.task("browser-sync", function (done) {
  browserSync.init({
    //ローカル開発
    server: {
      baseDir: "./",
      index: "index.html",
    },
  });
  done();
});

gulp.task("bs-reload", function (done) {
  browserSync.reload();
  done();
});
/*
タスクの定義:「監視する」
---------------------------------*/
gulp.task("watch", function (done) {
  //scssファイルが更新されたらgulp sassを実行
  gulp.watch("./scss/", gulp.task("sass")); 
  //scssファイルが更新されたらbs-reloadを実行
  gulp.watch("./scss/", gulp.task("bs-reload")); 
  //.htmlが更新されたらbs-reloadを実行
  gulp.watch("./*.html", gulp.task("bs-reload")); 
});
/*
タスクの定義:「defaultでまとめて実行する」
---------------------------------*/
gulp.task("default", gulp.series(gulp.parallel("browser-sync", "watch")));

package.jsonは以下です。

{
  "name": "france-bekery-factory",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.8.4",
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-sass-glob": "^1.1.0"
  }
}

どうかよろしくお願いいたします。

ーーーーーーーー
追記
ーーーーーーーー
問題になっているtoStringを調べてみました。
中身は以下です。
(ーーーー字数制限のため別投稿しますーーーー)

問題の部分の拡大画像です↓
utf-8の何が問題なのでしょうか。。

ーーーーーーーー
解決しました
ーーーーーーーー
解決した時に作成したブログ記事

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

私の環境でgulp-sass-globを実行してみましたが、全く問題なかったです。
ちなみに、gulp.task()はもう非推奨です。
私はGulp4の書き方でタスクを書いています。

const task_compile = function () {
    return src('./stylesheets/**/*.scss', {省略})
        .pipe(sassGlob())
        .pipe(plumber({省略}))
        .pipe(sass(省略))
        .pipe(dest('./stylesheets', {省略}));
};

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/06/28 19:42

    試行してくださりありがとうございます。

    本当ですか…。
    なぜ私の環境下ではtoStringエラーが出るのか、もう全くわかりません…。

    キャンセル

check解決した方法

0

申し訳ないです。
以下記事の環境を完全再現し実行したところ、なんと正常に動作しました。

https://qiita.com/KazuyoshiGoto/items/3059c99330cdc19e97ad

こちらはgulp-sass-globの部分のみ拝借しました↓

https://yumegori.com/gulp4-setting20191025

原因は、ディレクトリ構造とgulpfile.jsが互いに何かしらの衝突を引き起こし、意味不明な部分からエラーを取ってきた結果、「toStringがありません」になったと思われます。

このエラーが出るはっきりした原因がよくわかりませんが、一つ言えるのは、あまり下手にいじらない方が良いという事ですね、。
しばらくはそっとしておきたいと思います。。

今回特に改めるべき事
・gulpfile.jsをいじるときは、成功するたびにバックアップを別名保存する。
・ディレクトリ構造のパスは変えなくていいように、gulpのパスの指定を固定する。(一度決めたら変えない)

マイブログ
https://fuhixx.com/gulp-tostring-error

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

fuhixx-2:france-bekery-factory fuhixx$ sudo gulp
Password:

なぜsudoで実行しているのでしょう?
ファイル所有者が変わってしまってサイトの環境がおかしくなった可能性があります。

それと、gulpはnpmのパッケージですから
$ npm run gulp
とか
$ npm run gulp タスク名

のように実行します。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/06/28 17:03 編集

    gulp-sass-globプラグインを無くすと、違う環境でも正常に動きました。
    gulp-sass-globプラグインを実行した途端に、どの環境下でも上記同様のエラーが出ました。
    ですが、できればこのプラグインは使いたいです。

    キャンセル

  • 2020/06/28 18:08

    gulp-sass-globなしでも上記のエラーが出ました。。

    キャンセル

  • 2020/06/28 18:09

    Node.jsを最新版から推奨版に変更しても同様のエラーでした。。

    キャンセル

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

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる