GatsbyCLIクイックリファレンス

提供:Dev Guides
移動先:案内検索

序章

Gatsby.js を使用する場合、組み込みのコマンドラインインターフェイス(CLI)を常に使用します。この重要なツールを使用すると、初心者から新しいプロジェクトを作成するなどのことができます。ホットリロードを使用して開発サーバーを起動し、本番ビルドを生成します。 これは、それを使用するのに役立つクイックリファレンスガイドです。

インストール

gatsby-cliのグローバルインストールをまだ実行していない場合は、最初にそれを実行する必要があります。

npm install -g gatsby-cli

gatsby-cliがグローバルにインストールされると、マシンのどこからでもGatsbyのすべてのコマンドを実行できるようになります。 それでは、利用可能なコマンドについて説明しましょう。

新しいプロジェクトを作成する

newコマンドは、新しいGatsbyサイトを作成し、そのすべての依存関係をインストールし、最初のコミットで新しいgitリポジトリをローカルに初期化します。

引数なしでコマンドを実行すると、フォルダー名とオプションのスターターの入力を求められます。

gatsby new

利用可能な引数:

  • site directory:オプションで、インストールディレクトリを指定します。
  • starter:オプションで、これはリポジトリURLまたはGithubユーザー名/リポジトリ文字列のいずれかになります。 これが設定されていない場合、gatsby-starter-defaultが自動的に使用されます。

my-siteフォルダーにインストールし、スターターとしてgatsby-starter-blogを使用する例を次に示します。

gatsby new my-site gatsbyjs/gatsby-starter-blog

ローカル開発サーバー

developコマンドは、ホットリロードを使用してローカル開発サーバーを起動します。

gatsby develop

利用可能なオプション:

  • -H, --host:ホストURL/IPを設定します。 デフォルトはlocalhostです。
  • -p, --port:アプリケーションポートを設定します。 デフォルトは8000です。
  • -o, --open :(デフォルトの)ブラウザでサイトを自動的に開きます。
  • -S, --https:HTTPSを使用します。 (詳細については、こちらをご覧ください。)

http://0.0.0.0:8888で実行され、ブラウザで自動的に開く追加の例を次に示します。

gatsby develop -H 0.0.0.0 -p 8888 -o

プロダクションビルドを生成する

buildコマンドは、本番環境に対応した展開用にサイトをコンパイルします。

gatsby build

利用可能なオプション:

  • -prefix-paths:リンクパスのプレフィックスが付いたサイトを構築します。 (ただし、Gatsby構成でpathPrefixを設定した場合のみ!)
  • -no-uglify:JavaScriptを醜くせずにサイトを構築します(デバッグに役立ちます)。
  • -open-tracing-config-fileOpenTracingツールのトレーサー構成ファイルを設定します。 (詳細については、Gatsbyのパフォーマンストレースページを参照してください。)

次に、接頭辞付きのパスとuglifyを無効にしてビルドを生成する例を示します。

gatsby build -prefix-paths -no-uglify

生産ビルドをローカルで提供する

serveコマンドは、本番ビルドをローカルで実行します。これは、テストとデバッグに役立ちます。 (もちろん、これを実行する前にbuildコマンドを実行する必要があります。)

gatsby serve

利用可能なオプション:

  • -H, --host:ホストアドレスを設定します。 デフォルトはlocalhostです。
  • -p, --port:アプリケーションポートを設定します。 デフォルトは9000です。
  • -o, --open :(デフォルトの)ブラウザでサイトを自動的に開きます。
  • -prefix-paths:Gatsby構成でpathPrefix値を設定した場合、プレフィックス付きのパスでサイトにサービスを提供します。

これは、http://10.0.0.1:9999でプレフィックス付きのパスを使用して本番ビルドを提供し、ブラウザーで自動的に開く例です。

gatsby serve -H 10.0.0.1 -p 9999 -prefix-paths -o

環境情報を取得する

infoコマンドは、Gatsbyプロジェクトに関する環境情報を表示します。

gatsby info

利用可能なオプション:

  • -C, --clipboard:情報をクリップボードに自動的にコピーします。

このコマンドを実行すると、OS、CPUタイプ、Yarn / npmバージョン、インストールされている言語、ブラウザー、インストールされているnpmパッケージなどのオブジェクトが返されます。

注:この情報は、Gatsbyに公式のバグレポートを送信するときに必要です。


古いキャッシュ/ビルドを削除する

cleanコマンドは、プロジェクトルートから.cacheおよびpublicディレクトリを削除します。

gatsby clean

このコマンドはおそらくあまり頻繁に使用するものではありませんが、それでも知っておくと便利なショートカットです。 時々奇妙なキャッシュの問題が発生します、そしてこれはそれをクリアするための速くて安全な方法です。 (2つの単語を入力する方が簡単です。 2つのフォルダ削除コマンドを入力すると、誤って間違ったフォルダを削除するリスクはありません。)



REPLアクセス

replコマンドは、GatsbyのインタラクティブREPL( Read-Eval-Print-Loop )シェルへのアクセスを開きます。

gatsby repl

このコマンドの使用法は、クイックリファレンス記事の範囲をはるかに超えていますが、使用法の詳細については、GatsbyドキュメントのREPLページを参照してください。



結論

この短いガイドが、GatsbyCLIを簡単にナビゲートするのに役立つことを願っています。 Gatsbyプロジェクトで頻繁に使用するため、快適に使用することが重要です。

必要に応じて、詳細情報も利用できます。

  • 公式ドキュメントのGatsbyCLI ページは素晴らしいです!
  • gatsby-cliGithubリポジトリは、更新/変更に対応するのに役立ちます。
  • Gatsbyチームは、最もよく使用されるCLIコマンドを含む印刷可能なチートシートも作成しました。