当前位置: 首页 > 工具软件 > Gatsby > 使用案例 >

gatsby_Gatsby CLI快速参考

王英彦
2023-12-01

gatsby

When working with Gatsby.js, we constantly make use of its built-in command line interface (CLI.) This essential tool allows us to do things like creating new projects from starters, launching a dev server with hot-reloading, and generating production builds. Here’s a quick reference guide to help you use it like a pro!

使用Gatsby.js时 ,我们会不断使用其内置的命令行界面 (CLI)。此基本工具使我们能够执行诸如从启动程序创建新项目,通过热重装启动开发服务器以及生成生产等工作。建立。 这是一个快速参考指南,可帮助您像专业人士一样使用它!

安装 (Installation)

If you haven’t already performed a global installation of gatsby-cli, you will need to do that first:

如果尚未执行gatsby-cli的全局安装,则需要首先执行以下操作:

$ npm install -g gatsby-cli

With gatsby-cli installed globally, you can now run all of Gatsby’s commands from anywhere on your machine. Now let’s cover the available commands!

全局安装gatsby-cli ,您现在可以在计算机上的任何位置运行Gatsby的所有命令。 现在,让我们介绍可用的命令!



创建一个新项目 (Create a New Project)

The new command creates a new Gatsby site, installs all of its dependencies, and initializes a new git repository locally with an initial commit.

new命令创建一个新的Gatsby站点,安装其所有依赖项,并使用初始提交在本地初始化新的git存储库。

Running the command with no arguments will prompt for a folder name and optional starter:

不带参数运行命令将提示输入文件夹名称和可选的启动程序:

$ gatsby new

可用参数: (Available Arguments:)

  • site directory: Optional, specifies the installation directory.

    site directory :可选,指定安装目录。

  • starter: Optional, this can either be a repo URL or a Github username/repo string. If this is not set, gatsby-starter-default is automatically used.

    starter :可选,可以是回购URL或Github用户名/回购字符串。 如果未设置,则自动使用gatsby-starter-default

Here’s an example that installs into a my-site folder, and uses gatsby-starter-blog as the starter:

这是一个示例,该示例安装到my-site文件夹中,并使用gatsby-starter-blog作为启动器:

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


本地开发服务器 (Local Development Server)

The develop command starts up a local development server with hot-reloading.

develop命令使用热重装启动本地开发服务器。

$ gatsby develop

可用选项: (Available Options:)

  • -H, –host: Set host URL/IP. Defaults to localhost.

    -H,-host :设置主机URL / IP。 默认为localhost

  • -p, –port: Set application port. Defaults to 8000.

    -p,-port :设置应用程序端口。 默认为8000

  • -o, –open: Automatically opens the site in your (default) browser.

    -o,-open :在您的(默认)浏览器中自动打开站点。

  • -S, –https: Use HTTPS. (More info on that can be found here.)

    -S,-https :使用HTTPS。 (有关更多信息,请参见此处 。)

Here’s an additional example that runs at http://0.0.0.0:8888 and automatically opens in a browser:

这是在http://0.0.0.0:8888上运行并在浏览器中自动打开的另一个示例:

$ gatsby develop -H 0.0.0.0 -p 8888 -o


生成生产版本 (Generate Production Builds)

The build command compiles your site for production-ready deployments.

build命令编译您的站点以进行生产就绪部署。

$ gatsby build

可用选项: (Available Options:)

  • -prefix-paths: Builds the site with link paths prefixed. (But only if you’ve set pathPrefix in your Gatsby config!)

    -prefix-paths :使用前缀的链接路径构建站点。 (但pathPrefix是您已在Gatsby配置中设置pathPrefix !)

  • -no-uglify: Builds the site without uglifying JavaScript (Useful for debugging.)

    -no- uglify:在不丑化JavaScript的情况下构建站点(用于调试。)

  • -open-tracing-config-file: Sets the tracer configuration file for an OpenTracing tool. (More info at Gatsby’s Performance Tracing page.)

    -open-tracing-config-file :设置OpenTracing工具的跟踪器配置文件。 (有关更多信息,请访问Gatsby的效果跟踪页面。)

Here’s an example that generates a build with prefixed paths and uglify disabled:

这是一个生成带有前缀路径并禁用uglify的构建的示例:

$ gatsby build -prefix-paths -no-uglify


服务本地生产 (Serve Production Builds Locally)

The serve command runs production builds locally, which can be helpful for testing and debugging. (You must run the build command prior to running this, of course.)

serve命令在本地运行生产版本,这有助于测试和调试。 (当然,您必须在运行此命令之前先运行build命令。)

$ gatsby serve

可用选项: (Available Options:)

  • -H, –host: Set host address. Defaults to localhost.

    -H,-host :设置主机地址。 默认为localhost

  • -p, –port: Set application port. Defaults to 9000.

    -p,-port :设置应用程序端口。 默认为9000

  • -o, –open: Automatically opens the site in your (default) browser.

    -o,-open :在您的(默认)浏览器中自动打开站点。

  • -prefix-paths: Serves the site with prefixed paths, if you set a pathPrefix value in your Gatsby config.

    -prefix-paths :如果在Gatsby配置中设置了pathPrefix值,则为站点提供前缀路径。

Here’s an an example that serves a production build at http://10.0.0.1:9999 with prefixed paths, and automatically opens in a browser:

这是一个示例,该示例使用带有前缀路径的http://10.0.0.1:9999提供产品版本,并在浏览器中自动打开:

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


获取环境信息 (Get Environment Info)

The info command displays environment information about your Gatsby project.

info命令显示有关您的Gatsby项目的环境信息。

$ gatsby info

可用选项: (Available Option:)

  • -C, –clipboard: Automatically copies the info to your clipboard.

    -C,-clipboard :自动将信息复制到剪贴板。

Running this command returns an object including your OS, CPU type, Yarn/npm versions, installed languages, browsers, and installed npm packages.

运行此命令将返回一个对象,包括您的操作系统,CPU类型,Yarn / npm版本,已安装的语言,浏览器和已安装的npm软件包。

This info is required when submitting an official bug report to Gatsby.

向Gatsby提交正式的错误报告时,此信息是必需的。



删除过时的缓存/构建 (Remove Stale Caches/Builds)

The clean command deletes the .cache and public directories from your project root.

clean命令从项目根目录删除.cachepublic目录。

$ gatsby clean

While this command is probably not something you will use too often, it’s still a handy shortcut to know about! Sometimes strange caching issues happen, and this is a fast and safe way to clear it. (It’s easier to type two words vs. typing out two folder deletion commands, and there’s no risk of accidentally deleting the wrong folder.)

尽管您可能不会经常使用此命令,但是它仍然是一个方便的快捷方式! 有时会发生奇怪的缓存问题,这是一种快速安全的清除方法。 (键入两个单词比键入两个文件夹删除命令更容易,而且不存在意外删除错误文件夹的风险。)



REPL访问 (REPL Access)

The repl command opens access to Gatsby’s interactive REPL (Read-Eval-Print-Loop) shell.

repl命令打开对Gatsby的交互式REPL( Read-Eval-Print-Loop )Shell的访问。

$ gatsby repl

The use of this command is far beyond the scope of a quick reference article, but you can find full usage details in the Gatsby documentation’s REPL page.

使用此命令远远超出了快速参考文章的范围,但是您可以在Gatsby文档的REPL页中找到完整的用法详细信息。



结论 (Conclusion)

Hopefully this short guide will help you navigate the Gatsby CLI with ease. It’s important to be comfortable with it, since you will use it so frequently in your Gatsby projects!

希望此简短指南可以帮助您轻松浏览Gatsby CLI。 熟悉它很重要,因为您将在Gatsby项目中如此频繁地使用它!

 More information is also available, if needed:

if如果需要,还可提供更多信息:

翻译自: https://www.digitalocean.com/community/tutorials/gatsbyjs-gatsby-cli-quick-reference

gatsby

 类似资料: