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

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

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

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

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

gulp

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

Q&A

解決済

3回答

2511閲覧

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

fuhixx

総合スコア22

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

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

gulp

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

0グッド

0クリップ

投稿2020/06/28 01:16

編集2020/06/30 00:32

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

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

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

npm

1fuhixx-2:france-bekery-factory fuhixx$ sudo gulp 2Password: 3[09:59:21] Using gulpfile ~/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/gulpfile.js 4[09:59:21] Starting 'default'... 5[09:59:21] Starting 'browser-sync'... 6[09:59:21] Starting 'watch'... 7[09:59:22] Finished 'browser-sync' after 36 ms 8[Browsersync] Access URLs: 9 ------------------------------------ 10 Local: http://localhost:3000 11 External: http://192.168.3.8:3000 12 ------------------------------------ 13 UI: http://localhost:3001 14 UI External: http://localhost:3001 15 ------------------------------------ 16[Browsersync] Serving files from: ./ 17^C 18fuhixx-2:france-bekery-factory fuhixx$ sudo gulp 19[09:59:39] Using gulpfile ~/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/gulpfile.js 20[09:59:39] Starting 'default'... 21[09:59:39] Starting 'browser-sync'... 22[09:59:39] Starting 'watch'... 23[09:59:39] Finished 'browser-sync' after 34 ms 24[Browsersync] Access URLs: 25 ------------------------------------ 26 Local: http://localhost:3000 27 External: http://192.168.3.8:3000 28 ------------------------------------ 29 UI: http://localhost:3001 30 UI External: http://localhost:3001 31 ------------------------------------ 32[Browsersync] Serving files from: ./ 33[09:59:57] Starting 'sass'... 34[09:59:57] Starting 'bs-reload'... 35[09:59:57] Finished 'bs-reload' after 676 μs 36[09:59:57] 'sass' errored after 16 ms 37[09:59:57] TypeError: Cannot read property 'toString' of null 38 at transform (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/gulp-sass-glob/dist/index.js:67:32) 39 at DestroyableTransform._transform (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/gulp-sass-glob/dist/index.js:49:15) 40 at DestroyableTransform.Transform._read (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/readable-stream/lib/_stream_transform.js:184:10) 41 at DestroyableTransform.Transform._write (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/readable-stream/lib/_stream_transform.js:172:83) 42 at doWrite (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/readable-stream/lib/_stream_writable.js:428:64) 43 at writeOrBuffer (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/readable-stream/lib/_stream_writable.js:417:5) 44 at DestroyableTransform.Writable.write (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/readable-stream/lib/_stream_writable.js:334:11) 45 at DestroyableTransform.ondata (/Users/fuhixx/Desktop/Visual Studio Code/架空サイト/フランスパン専門店1/france-bekery-factory/node_modules/readable-stream/lib/_stream_readable.js:619:20) 46 at DestroyableTransform.emit (events.js:315:20) 47 at DestroyableTransform.EventEmitter.emit (domain.js:505:15) 48[Browsersync] Reloading Browsers... 49^C 50fuhixx-2:france-bekery-factory fuhixx$ 51

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

gulpfile

1// プラグインの読み込み 2const gulp = require("gulp"); 3const sass = require("gulp-sass"); //Sassのコンパイルを実行 4const sassGlob = require("gulp-sass-glob"); //Sassの@importの記述を簡潔に 5// !追加! 6const plumber = require("gulp-plumber"); //エラー時の強制終了を防止 7const notify = require("gulp-notify"); //エラー発生時にデスクトップ通知する 8const browserSync = require("browser-sync"); //ブラウザ反映 9// !追加終了! 10/*--------------------------------- 11 12タスクの定義 13 14---------------------------------*/ 15/* 16タスクの定義:「sassをコンパイルする」 17---------------------------------*/ 18gulp.task("sass", function (done) { 19 return ( 20 gulp 21 //ソースを指定 22 .src("./scss/") 23 // !追加! 24 .pipe( 25 plumber({ 26 errorHandler: notify.onError("Error: <%= error.message %>") 27 }) 28 ) 29 //Sassの@importの記述を簡潔に 30 .pipe(sassGlob()) 31 .pipe( 32 sass({ 33 //expanded, nested, campact, compressedから選択 34 outputStyle: "expanded", 35 }) 36 ) 37 //コンパイル後の出力先 38 .pipe(gulp.dest("./css/style.css")) 39 ); 40}); 41/* 42タスクの定義:「保存時にリロードする」 43---------------------------------*/ 44gulp.task("browser-sync", function (done) { 45 browserSync.init({ 46 //ローカル開発 47 server: { 48 baseDir: "./", 49 index: "index.html", 50 }, 51 }); 52 done(); 53}); 54 55gulp.task("bs-reload", function (done) { 56 browserSync.reload(); 57 done(); 58}); 59/* 60タスクの定義:「監視する」 61---------------------------------*/ 62gulp.task("watch", function (done) { 63 //scssファイルが更新されたらgulp sassを実行 64 gulp.watch("./scss/", gulp.task("sass")); 65 //scssファイルが更新されたらbs-reloadを実行 66 gulp.watch("./scss/", gulp.task("bs-reload")); 67 //.htmlが更新されたらbs-reloadを実行 68 gulp.watch("./*.html", gulp.task("bs-reload")); 69}); 70/* 71タスクの定義:「defaultでまとめて実行する」 72---------------------------------*/ 73gulp.task("default", gulp.series(gulp.parallel("browser-sync", "watch")));

package.jsonは以下です。

package

1{ 2 "name": "france-bekery-factory", 3 "version": "1.0.0", 4 "description": "", 5 "main": "gulpfile.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "keywords": [], 10 "author": "", 11 "license": "ISC", 12 "devDependencies": { 13 "autoprefixer": "^9.8.4", 14 "browser-sync": "^2.26.7", 15 "gulp": "^4.0.2", 16 "gulp-notify": "^3.2.0", 17 "gulp-plumber": "^1.2.1", 18 "gulp-postcss": "^8.0.0", 19 "gulp-sass": "^4.1.0", 20 "gulp-sass-glob": "^1.1.0" 21 } 22} 23

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

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

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

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

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

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

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

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

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

guest

回答3

0

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

Javascript

1const task_compile = function () { 2 return src('./stylesheets/**/*.scss', {省略}) 3 .pipe(sassGlob()) 4 .pipe(plumber({省略})) 5 .pipe(sass(省略)) 6 .pipe(dest('./stylesheets', {省略})); 7};

投稿2020/06/28 10:22

technocore

総合スコア7255

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

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

fuhixx

2020/06/28 10:42

試行してくださりありがとうございます。 本当ですか…。 なぜ私の環境下ではtoStringエラーが出るのか、もう全くわかりません…。
guest

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

投稿2020/06/28 23:37

編集2020/06/30 00:30
fuhixx

総合スコア22

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

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

0

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

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

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

のように実行します。

投稿2020/06/28 01:35

technocore

総合スコア7255

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

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

fuhixx

2020/06/28 02:14 編集

ご回答ありがとうございます。 ・sudoで実行しているのはsudoを使わなくてもこのエラーが出たためです。 ・タスク名で実行するのではなく、gulpとだけ打つと今までは成功していたのですが・・。なぜでしょう。。(defaultで実行をまとめているためです。) ・おっしゃる通り、npm runを使いパッケージのタスク名で打ちましたが、runを使うと別のエラーが出てしまいます。 タスク名で打つと以下です↓ fuhixx-2:france-bekery-factory fuhixx$ npm run gulp sass npm ERR! missing script: gulp npm ERR! A complete log of this run can be found in: npm ERR! /Users/fuhixx/.npm/_logs/2020-06-28T01_54_09_461Z-debug.log fuhixx-2:france-bekery-factory fuhixx$ gulpで実行すると以下です↓ fuhixx-2:france-bekery-factory fuhixx$ npm run gulp npm ERR! missing script: gulp npm ERR! A complete log of this run can be found in: npm ERR! /Users/fuhixx/.npm/_logs/2020-06-28T01_48_00_051Z-debug.log fuhixx-2:france-bekery-factory fuhixx$
fuhixx

2020/06/28 03:36 編集

別環境でもう一度gulpをインストールし直しましたが、同様のエラーが出ています。。 [Browsersync] Reloading Browsers... [12:32:54] Starting 'sass'... [12:32:54] Starting 'bs-reload'... [12:32:54] Finished 'bs-reload' after 284 μs [12:32:54] 'sass' errored after 4.68 ms [12:32:54] TypeError: Cannot read property 'toString' of null at transform (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/node_modules/gulp-sass-glob/dist/index.js:67:32) at DestroyableTransform._transform (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/node_modules/gulp-sass-glob/dist/index.js:49:15) at DestroyableTransform.Transform._read (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/node_modules/readable-stream/lib/_stream_transform.js:184:10) at DestroyableTransform.Transform._write (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/node_modules/readable-stream/lib/_stream_transform.js:172:83) at doWrite (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/node_modules/readable-stream/lib/_stream_writable.js:428:64) at writeOrBuffer (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/node_modules/readable-stream/lib/_stream_writable.js:417:5) at DestroyableTransform.Writable.write (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/node_modules/readable-stream/lib/_stream_writable.js:334:11) at DestroyableTransform.ondata (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/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:btnSvg fuhixx$
fuhixx

2020/06/28 04:11 編集

色々といじっているうちにキャッシュが溜まっていたのでnpm cache verify --forceで消しました。 その後、再度gulpを入れ直しました。 また違うエラーが出てしまいました、。 データ構造が必要です。と言われているみたいですが、身に覚えがなくよくわかりません。。 インストールしたばかりなのになぜ欠陥があるのかわかりません。。 Error: Cannot find module 'gulp-sass' Require stack: - /Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/gulpfile.js - /usr/local/lib/node_modules/gulp/node_modules/gulp-cli/lib/shared/require-or-import.js - /usr/local/lib/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js - /usr/local/lib/node_modules/gulp/node_modules/gulp-cli/index.js - /usr/local/lib/node_modules/gulp/bin/gulp.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15) at Function.Module._load (internal/modules/cjs/loader.js:842:27) at Module.require (internal/modules/cjs/loader.js:1026:19) at require (internal/modules/cjs/helpers.js:72:18) at Object.<anonymous> (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/gulpfile.js:3:14) at Module._compile (internal/modules/cjs/loader.js:1138:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10) at Module.load (internal/modules/cjs/loader.js:986:32) at Function.Module._load (internal/modules/cjs/loader.js:879:14) at Module.require (internal/modules/cjs/loader.js:1026:19) { code: 'MODULE_NOT_FOUND', requireStack: [ '/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/gulpfile.js', '/usr/local/lib/node_modules/gulp/node_modules/gulp-cli/lib/shared/require-or-import.js', '/usr/local/lib/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js', '/usr/local/lib/node_modules/gulp/node_modules/gulp-cli/index.js', '/usr/local/lib/node_modules/gulp/bin/gulp.js' ] } fuhixx-2:btnSvg fuhixx$
fuhixx

2020/06/28 04:40

インストールし直してもダメでした・・・・。 [Browsersync] Serving files from: ./ [13:39:25] Starting 'sass'... [13:39:25] Starting 'bs-reload'... [13:39:25] Finished 'bs-reload' after 884 μs [13:39:25] 'sass' errored after 19 ms [13:39:25] TypeError: Cannot read property 'toString' of null at transform (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/node_modules/gulp-sass-glob/dist/index.js:67:32) at DestroyableTransform._transform (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/node_modules/gulp-sass-glob/dist/index.js:49:15) at DestroyableTransform.Transform._read (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/node_modules/readable-stream/lib/_stream_transform.js:184:10) at DestroyableTransform.Transform._write (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/node_modules/readable-stream/lib/_stream_transform.js:172:83) at doWrite (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/node_modules/readable-stream/lib/_stream_writable.js:428:64) at writeOrBuffer (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/node_modules/readable-stream/lib/_stream_writable.js:417:5) at DestroyableTransform.Writable.write (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/node_modules/readable-stream/lib/_stream_writable.js:334:11) at DestroyableTransform.ondata (/Users/fuhixx/Desktop/Visual Studio Code/css実験/btnSvg/node_modules/readable-stream/lib/_stream_readable.js:619:20) at DestroyableTransform.emit (events.js:315:20) at DestroyableTransform.EventEmitter.emit (domain.js:547:15) [Browsersync] Reloading Browsers... ^C fuhixx-2:btnSvg fuhixx$
fuhixx

2020/06/28 08:05 編集

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

2020/06/28 09:08

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

2020/06/28 09:09

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.45%

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

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

質問する

関連した質問