介绍
gof 是一个快速构建前端项目的 npm 包，具有以下优点：
- 简单易用，不需要复杂的配置
- 支持多种模板引擎
- 支持热更新，开发过程更加高效
- 支持 ES6、ES7 和 TypeScript
如果你是前端开发者，那么 gof 绝对值得尝试。
安装
使用 npm 命令安装 gof：
npm install -g gof
快速开始
创建项目
在命令行中输入以下命令：
gof init myapp
其中 myapp 是你的项目名称。
gof 会自动下载必要的依赖包，并创建一个包含默认配置和目录结构的项目。
运行项目
进入项目目录，执行以下命令：
cd myapp gof dev
稍等片刻，浏览器会自动打开一个地址（默认为 http://localhost:8080/），你就可以在浏览器中预览你的网站了。
构建项目
在生产环境中发布项目时，可以使用以下命令生成最终的构建文件：
gof build
构建完成后，生成的文件位于 dist 目录下。
配置
gof 支持多种自定义配置，如自定义端口、打包路径、自定义 HTML 模板等。
自定义端口
默认情况下，gof 运行在 8080 端口。如果你希望使用其他端口，可以在命令行中添加 -p 参数，例如：
gof dev -p 8888
自定义打包路径
默认情况下，gof 打包后的文件被放置在 dist 目录下。如果你希望打包后的文件放置在其他目录，可以在 package.json 文件中配置：
{
"name": "myapp",
"version": "1.0.0",
"gof": {
"outputDir": "myoutput"
}
}自定义 HTML 模板
如果你需要使用自定义的 HTML 模板，可以在 src 目录下创建一个 index.ejs（或其他支持的模板文件），然后在 package.json 文件中配置：
{
"name": "myapp",
"version": "1.0.0",
"gof": {
"template": "src/index.ejs"
}
}在自定义模板中，可以使用以下变量：
| 变量名 | 描述 |
|---|---|
<%- title %> |
页面标题 |
<%- logo %> |
页面 Logo（svg 格式） |
<%- body %> |
页面内容，由 webpack 生成 |
使用模板引擎
gof 支持多种模板引擎，包括 EJS、Handlebars 和 Pug 等。
EJS
在 src 目录下创建一个以 .ejs 后缀名的模板文件，例如：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ----- ---------- ------- ------ ------- ----- ------- --------- --- ---- ------- ------- -------
在 JavaScript 中，你可以按照以下方式渲染这个模板：
-- -------------------- ---- ------- ------ --- ---- ------ ----- -------- - -------------------------------------------- ---------- ----- ---- - - ------ ------- ----- ----- -- ----- ---- - --------------- ----------------------- - -----
Handlebars
在 src 目录下创建一个以 .hbs 后缀名的模板文件，例如：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------------ ------- ------ ------------------ --------- ------------- ------- -------
在 JavaScript 中，你可以按照以下方式渲染这个模板：
-- -------------------- ---- ------- ------ ---------- ---- ------------- ----- -------- - --------------------------------------------------- ---------- ----- ---- - - ------ ------- ----- ----- -- ----- ---- - --------------- ----------------------- - -----
Pug
在 src 目录下创建一个以 .pug 后缀名的模板文件，例如：
html
head
meta(charset="UTF-8")
title= title
body
h1= title
p Hello, #{name}!在 JavaScript 中，你可以按照以下方式渲染这个模板：
-- -------------------- ---- ------- ------ --- ---- ------ ----- -------- - -------------------------------------------- ---------- ----- ---- - - ------ ------- ----- ----- -- ----- ---- - --------------- ----------------------- - -----
结语
gof 是一个非常优秀的前端开发工具，可以帮助开发者快速构建前端项目。本文介绍了 gof 的安装、快速开始、配置和使用模板引擎等方面，希望可以帮助你更好地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562df81e8991b448e05f3