web業界で働く方を少しだけ手助けするメディアweb業界で働く方を少しだけ手助けするメディアホームWEB制作WEBサービスApp'sMac2018.1.17Gulpインストール時にエラーが出た時の解決策まとめWEB制作GulpGulpはとても便利なツールですが、制作現場の環境やPCによってインストールや使用時にエラーが出てしまうことが多々あります。そのような時のために、Gulpをインストールや使用する際にエラーが出た時の解決策をまとめました。最初に試したいこと権限周りのエラーsassのsrcの指定が原因でのエラープラグイン未定義でのエラーpackage.jsonのnameが原因でのエラーまとめ最初に確認したいことnpm、gulp、プラグイン各種がインストールされているかを確認する。下記のコマンドを実行して、npmなどのバージョンが表示されたら、ちゃんとインストールされています。--depth=0上記コマンドで、インストールされているプラグインの一覧が表示されます。最初に試したいことsudoを付けて再びコマンドを実行をする。installのようにsudoを頭に付けて再び実行をしてみてください。sudoを付けることで現在とは違う管理権限でコマンドを実行することが出来ます。これで権限周りのエラーが解決する場合があります。次のセクションでより詳しく権限周りのエラーが出た場合の解決策を紹介していきます。権限周りのエラーエラーメッセージの中に、permissionの文字列があった場合、権限関係のエラーを疑って下さい。'/usr/local/lib/node_modules/npm/node_modules/aproba'上記のようなメッセージは、インストール時にnpm側でディレクトリを作成しようとした際に、現在の状態だと権限がなくディレクトリが作成出来ないという内容になります。解決策:ディレクトリの権限を変更してアクセス可能状態にするエラーが出ているディレクトリの権限をコマンドで変更してあげます。上記で挙げたエラーメッセージの場合、/usr/local/lib/と/usr/local/lib/node_modules/npm/node_modules/のディレクトリにコマンドで権限を変更してあげます。下記コマンドで権限を変更することが出来ます。/usr/local/lib/node_modules/npm/node_modules/権限を変更して、再度npmコマンドを実行してもエラーが出る場合は、自分でエラーが出たディレクトリを作成(上記で挙げたエラーメッセージの場合node_modules/を作成)して、上記コマンドで権限を与えてあげます。"$import-counter".上記のメッセージは、1行目がエラーが出たファイルのパスで、2行目で「$import-counterの変数が定義されていないのに値として呼び出されています」という内容です。自分で作成したsassファイルで$import-counterという変数は呼び出していません。メッセージのパスをよく見てみるとnode_modules/と書かれています。node_modules/は設定ファイルなどをまとめたディレクトリで、この中のsassファイルもコンパイルの対象になっているみたいです。この時のsassタスクのsrcは以下の通りです。gulp.src('./**/*.scss')全てのsassファイルを対象にしていたため、node_modules/ディレクトリのsassファイルもコンパイル対象にされてしまい、そのせいでエラーが出てしまいます。以下のようにディレクトリをしっかりと指定してあげればエラーは解決します。Gulp.上記メッセージは、プラグインを定義していないことが原因でのエラーになります。この場合、gulp-sassのプラグインを定義していない場合のエラーメッセージです。gulpfile.jsの上部で以下のようにプラグインの定義をしてあげれば解決します。installでプラグインもろともインストールする際に、jsonファイルのnameの値が「gulp」のみだとエラーが出てしまいます。値が「gulp」のみだとエラーが出てしまうので、「gulp_pjt」のように「gulp」に他の文字列を足してあげればエラーは出なくなります。まとめ基本的にgulpでエラー出る原因は、以下2つのどちらかだと思います。単純な打ち間違い権限関係のエラーの場合は、どうやったら権限を与えられるか、どこのディレクトリでエラーが出ているかをしっかりと確認すれば解決することが出来ます。単純な打ち間違いの場合は、エラーメッセージの内容をよく見て、作業用のファイルでエラーが出ているのか、それともgulpfile.jsでエラーが出ているのかを確認すれば簡単に解決出来ます。gulpを触り始めたばかりの時は、エラーの原因自体が何なのかすら分からないことも多々あると思います。エラーが出た場合は何が原因なのかということをエラーメッセージからしっかり読み取ることが重要です。web業界で働く方を少しだけ手助けするメディア関連記事JavaScriptのファイル内でjQueryのCDNを読み込むJavaScriptのファイル内でjQueryを読み込んで、jQueryの記述を使えるようにする方法です。この方法は、ブックマークレットを作る際にjQueryを使いたいという場面で役に立つと思います。Awesomeのバージョンが「4」から「5」になってから、擬似要素でアイコンが表示されないことがしばしば起きました。その時の解決策を本記事で紹介したいと思います。〜Sass(以下ではscss記法で紹介しています)の便利な機能や書き方をまとめました。「入れ子」や「mixin」などの基本的な機能を紹介するだけではなく、少し応用した内容や意外と知らないことも紹介します。紹介する量が多い...BEMのmodifireとSassの綺麗な書き方BEMを使う場合、modifireを使って色違いの見出しを作ったりすると思いますが、あまり綺麗ではない書き方をたまに見かけるので、綺麗な書き方をこの記事で紹介したいと思います。そもそもBEMとは何かをご存知では無い方は、こちらのサイ...【無料】写真、アイコン素材サイトのまとめブログの記事を書いたりサイトを作る際に必要となる写真や素材。それらを無料で手に入れたい時に便利なサイトをまとめました。これから紹介するサイトはどれも高画質・高品質な写真ばかりで、すべてダウンロード無料となっています。使用する...実践的な事例で紹介!Gitのよく使うコマンドまとめGitでよく使うコマンドをまとめました。業務で使う機会が多いコマンドや事例を中心に紹介しており、コマンド全てを紹介する記事ではありませんので予めご了承下さい。Codeをインストール後に最初に設定したいこと2018.05.022019.01.06Bracketsをインストールしたら最初に設定したいこと2018.02.082019.01.05【実用的なサンプル多数】Sassのmixinのおすすめ10選2018.02.112019.01.21JavaScriptのファイル内でjQueryのCDNを読み込む2018.02.072019.01.05ホーム当サイトをご利用の方へカテゴリーWEB制作WEBサービスApp'sMac当サイトの情報によって貴台に不利益等が生じても当サイトは一切責任を負いかねます。Web-GuidedメニューホームWEB制作WEBサービスApp'sMacホーム。