序章

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

インストール

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

  1. npm install -g gatsby-cli

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

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

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

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

  1. gatsby new

利用可能な引数：

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

これはにインストールする例です my-site フォルダ、およびスターターとして gatsby-starter-blog を使用します：

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

ローカル開発サーバー

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

  1. gatsby develop

利用可能なオプション：

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

これはで実行される追加の例です http://0.0.0.0:8888 ブラウザで自動的に開きます。

  1. gatsby develop -H 0.0.0.0 -p 8888 -o

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

The build コマンドは、本番環境に対応したデプロイメント用にサイトをコンパイルします。

  1. gatsby build

利用可能なオプション：

  • -prefix-paths：リンクパスのプレフィックスを付けてサイトを構築します。 （ただし、設定した場合のみ pathPrefix Gatsbyの設定で！）
  • -no-uglify：JavaScriptを醜くせずにサイトを構築します（デバッグに便利です）。
  • -open-tracing-config-file：OpenTracingツールのトレーサー設定ファイルを設定します。 （詳細については、Gatsbyのパフォーマンストレースページを参照してください。）

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

  1. gatsby build -prefix-paths -no-uglify

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

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

  1. gatsby serve

利用可能なオプション：

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

これは、で本番ビルドを提供する例です。 http://10.0.0.1:9999 接頭辞付きのパスがあり、ブラウザで自動的に開きます。

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

環境情報を取得する

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

  1. gatsby info

利用可能なオプション：

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

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

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

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

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

  1. gatsby clean

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

REPLアクセス

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

  1. gatsby repl

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

結論

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

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

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