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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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ファイルの圧縮・結合などを自動的に行うことができます。

解決済

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

fuhixx
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ファイルの圧縮・結合などを自動的に行うことができます。

3回答

0評価

0クリップ

778閲覧

投稿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

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)

gulpfile

// プラグインの読み込み 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は以下です。

package

{ "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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

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ファイルの圧縮・結合などを自動的に行うことができます。