知識0からGulpインストールをしてわかったことをまとめてみた
Sassでの開発環境に欠かせないGulp。
初めてインストールした際に様々なエラーにぶち当たり、解消するために様々な記事を読み、結局何が正解だったのか、を備忘録としてまとめておきたいと思います。
インストール手順
Gulpのインストールについて調べていると、どの記事でも紹介されているのが下記の手順です。
Gulpのインストール自体はとっても簡単で、本当に5分で終わります。
Node.jsをインストール
プロジェクトフォルダにpackage.jsonを作成
Gulpをインストール
▼参考にした記事はこちら
・https://miya-system-works.com/blog/detail/177
・https://ics.media/entry/3290/
この時は何も知識がないので、とりあえずGulpというものをインストールできればOK！と思って進めていたら気になる文章を発見。
記事によってはnpm install -g gulp-cliとグローバルにGulpを導入する手順を解説しているところもあります。現在ではそれは少数派です。Gulpはグローバルではなく、ローカルだけにインストールするのがフロントエンド界隈では一般的です。
インストールにはグローバルとローカルの2種類ある模様。
それぞれの違いは次の通りです。
グローバルインストール ： PC上のどこからでも利用できる様になる
ローカルインストール ： プロジェクトのフォルダ内でのみ利用できる様になる
グローバルの方がなんか便利そう…なぜグローバルが少数派なのか？と思い調べてみると、どの記事でもグローバルインストールは推奨されていませんでした。
グローバルインストールが推奨されていない理由
なぜ推奨されていないかが分かりやすく説明されている記事があったので、一部引用してみると、
グローバルインストールでのメリットは、インストールしたフォルダにパスが通っている場合は ./node_modules/.bin/gulp などと長いコマンドを叩く必要なく、 gulp と入力するだけで使えるようになることだけです。他のプロジェクトで再度インストールしなくてもよくなるというメリットもありますが、そのメリット以上に、弊害が大きかったりします。
グローバルでインストールをしてしまうデメリットは、利用したいプロジェクトだけでなくPC全体でインストールされるため、プロジェクト毎に違ったバージョンの gulp をつかっている場合に問題が起きる可能性があります。
例えば1年前にリリースしたプロジェクトで修正や変更が発生した場合に、グローバルでインストールをしてしまっているとバージョン差異が発生してしまい、エラーの原因になったり、違ったものが出力されてしまう原因になってしまいます。
グローバルでインストールをせずに各プロジェクト毎にインストールをしておけば、過去に対応していたプロジェクトに戻っても、その当時のバージョンで再度動作させることができるので、グローバルインストールにならない、ローカルインストールで使えるようにしておくほうがよいです。
とのこと。ちなみに現時点（2022/4/4）のローカルのGulpの最新バージョンは4.0.2、グローバルは2.3.0でした。
グローバルインストールの場合、今後Gulpのバージョンが上がったときに、過去のプロジェクトのGulpのバージョンと差異が出て、エラーが出てしまう可能性があるということですね。なるほどです。
というわけで、ローカルインストールをしたら良いということが分かりました！
グローバルインストールしたGulpファイルのアンインストール方法
いろいろあってグローバルインストールをしてしまっていたので、アンインストールしておきたいと思います。
アンインストール方法は簡単で、下記のコマンドを実行するだけです。
npm uninstall gulp -gグローバルインストールしたGulpファイルは、Windowsだと
C:\Users\ユーザー名\AppData\Roaming\npm\
配下に入っていましたが、アンインストール後はきれいさっぱりnpmフォルダごとなくなっていました。
Macの場合は、
/Users/ユーザー名/
配下にファイルができるようです。
Gulpって何ができるの？
ここまで読んだけど、そもそもGulpって何？何ができるの？と思っている方もいると思うので参考になりそうな記事を置いておきます。
▼Gulpとは
https://www.codegrid.net/articles/2014-gulp-1/
https://weblabo.oscasierra.net/gulp-overview/
さて、インストールについていろいろ書きましたが、私の場合はNode.jsはすでにインストール済み、さらにはプロジェクトのひな型（gulpfile.jsやpackage.json、node_modulesも入った状態のフォルダ）も手元にある状態でした。
ひな型が入ったZipを解凍し、意気揚々とコマンドプロンプトでプログラムを実行するコマンド『npm start』を叩いてみると早速エラーが…
gulpがないらしい、ということでGulpインストールについて調べ出したのがこの記事を書くきっかけになったのですが、ここからは私が遭遇したエラーと解決した方法についてまとめていきたいと思います。
ちなみにコマンドプロンプトについても、ほぼ使ったことがないに等しい初心者でした。
※筆者はWindowsユーザーなので、Windows固有の名詞を使っていますが、Macの場合は下記名詞になると思って読み進めていただければと思います！
・（Win）コマンドプロンプト ＝ （Mac）ターミナル
・（Win）エクスプローラー ＝ （Mac）ファインダー
遭遇したエラーまとめ
エラーその1 ： no such file or directory
― そのようなファイルやディレクトリはありません。
と言われてしまいました。
zipを解凍した後、『npm start』を実行したときに出たエラーです。どうやらコマンドを実行するフォルダの階層を間違えていたようです。
エラーその1 ： 解決方法
『npm start』を実行する前に、コマンドプロンプトで該当のプロジェクトフォルダに移動する必要がありました。
cd 移動したいフォルダのパス『cd』はチェンジディレクトリの略で、階層を移動するコマンドです。
半角スペースを空けて、『移動したいフォルダのパス』を入力します。
※エクスプローラーからコマンドプロンプトに該当のフォルダをドラッグすると、簡単にフォルダのパスを入力することができます
※「●●●」はユーザー名です
例でデスクトップのパスを入力してみます。
Enterでコマンドを実行すると、下記のようにコマンドを実行する位置がデスクトップに移動したことが分かります。
このように、『npm start』を実行する位置をあらかじめプロジェクトフォルダにしておく必要があったわけですね！
コマンドプロンプトの基本操作は知っておいて損はないので、ぜひ覚えてみてください！
▼基本コマンドプロンプト25選！逆引きコマンド一覧
https://proengineer.internous.co.jp/content/columnfeature/5007
プロジェクトフォルダに移動して、ここで『npm start』を叩いてみるとまたエラーが…
エラーその2 ： 'gulp'は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。
ローカルにGulpがインストールされていなかったようです。
ひな型にはすでにnode_modulesが入っていたのですが、何かが足りないのかうまくいきませんでした。
エラーその2 ： 解決方法
インストールで参考にした記事を見てみると、以下のような記載がありました。
作成したタスクを実行するには、コマンドラインでnpx gulpと入力してEnterを押します。
『npm start』ではなく、『npx gulp』だったのかも？
というわけで、『npx gulp』コマンドを実行してみました。
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.― これは通常、`npm install`を実行した後に環境が変わったために起こります。 npm rebuild node-sass` を実行して、現在の環境用のバインディングをダウンロードします。
翻訳してみると上記のようなことを言われました。
なるほど、ひな型にすでにnode_modulesが入っていましたが、ほかのPCの環境で作られたものだったので、私のPC環境に変わってうまくいっていないみたいですね。
『npm rebuild node-sass』を実行しろ、とあるので実行してみたところ、
node-sassに「win32-x64-72」というフォルダが出来ていました。
Windows用のファイルがなかったことが原因だったようです。
『npm rebuild node-sass』はnode-sassをリビルド（再構築）して自分のnode環境に合った状態にしてくれるコマンドでした。便利。
ちなみに、「node_modules」をフォルダごと削除して、改めてpackage.json のあるディレクトリで『npm install』を実行してみることで、必要なモジュールをすべてインストールすることができました。
最初からこれやっとけば解決でした。
必要なモジュールをインストールしたところで、再度『npm start』を実行してみると、「dist」というファイルにコンパイルされたcssが！
＼ コンパイルすることに成功しました ／
これは、ひな型が共有された状態で起きたエラーとその解決方法なので、0から環境を構築しようと思っている方にとっては、このエラーだけで済むとは限りません！
Gulpインストールで起きるその他のエラーについては、下記の記事も参考にしてみると良いかも。
▼エラーの解決方法まとめ記事
・https://note.com/11foryou20/n/n39e0ca0ab43c
・https://web-guided.com/260/
『npx』と『npm』
『npx』と『npm』が出てきたけど何が違うの？と思い、調べてみたのでついでに記載しておきます。
npm
Node.jsで外部パッケージをインストールして使うためのマネージャ。package.jsonを読み込んで、npmのレポジトリに取りに行く。ローカルインストールした場合、必ず./node_modules/.bin/配下にコマンドがインストールされる。
CLIツールを落としてきたときに、使うためにはpackage.jsonのscriptsに定義を書かないといけない。
npx
npmのバージョン5.2.0以降はnpxがプリインストールされているそう。
npxでコマンドを実行したいときは、package.jsonに書かないでも、npx コマンド名打つだけで実行してくれる。
このとき、npxは勝手にインストールされてるパスを調べて「コマンド名」が存在するかチェックして実行してくれる。
npxはNode.jsをインストールした時点で使えるようになっているようです。
(npmのバージョン5.2.0がリリースされたのは、今から約4年ほど前だそう）
ちなみにnpmのバージョンは下記のコマンドで確認できます。
私のPCでは6.13.4でした。
npm -vpackage.jsonを自分で用意していなかったので理解が浅いのですが、つまり未インストールのパッケージにあるコマンドを、インストールしないで試すことがnpxコマンドではできるみたいです。
Diskの容量が節約できて、グローバル汚染しないこともメリットのようですね。
node_modulesを再インストールする前はnpmはエラーになったけど、npxは使えたのはそういうことだったのかも。
再インストール後は必要なモジュールが全てインストールできたので、npmが使えるようになってました。
というわけで、Gulpインストールについてちょっと理解が深まりました！
まとめ
Gulpはバージョンが変わっても使えるローカルインストール推奨！
『npm start』はプロジェクトフォルダの階層で実行！
既存の「node_modules」はいらない！package.json のあるディレクトリで『npm install』を実行してモジュールを再インストール！
以上、Gulpインストールしてみてわかったことまとめでした。
Sassでの構築はまだ始まったばかり…覚えることたくさん！頑張ります！
この記事が気に入ったらサポートをしてみませんか？