pwagenerator
v2.0.4
files目录inctemplates和template-parts目录fonts目录img目录js目录scss目录PWA Generator 是一个静态网站生成器，它根据projects.json中指定的项目配置构建静态网站。它可以生成网站运行渐进式网络应用程序所需的一切，例如，它可以离线运行并且可以安装。它还可以将其部署到 Netlify。
列出在projects.json中配置用于构建的所有项目
./pwagenerator.php projects
使用projects.json中的项目配置构建、部署和/或生成项目的图标
./pwagenerator.php [project] [option]
options:
-v verbose
-b build
-i generate icons
-d deploy
例如：
./pwagenerator exampleproject.com -b
要创建新项目，请将其添加到projects.json ，然后构建它。
-v )：为所选的其他选项（ -b 、 -i或-d ）提供更详细的输出，-b )：构建项目。在此过程中，PWA 生成器会生成项目运行所需的所有文件。有关详细信息，请参阅构建过程。-i )：为项目生成图标。在此过程中，PWA Generator 设置一个配置数组，并使用 real-favicon 从项目目录中的img/favicon.svg文件生成一组 favicon。-d )：部署项目。在此过程中，PWA Generator 会增加项目版本，并使用在projects.json和netlify-cli 中设置的netlify_id将项目目录部署到Netlify。 files目录files目录包含构建项目时复制到项目中的文件。
fonts目录中的字体只有在projects.json的fonts对象中列出时才会被复制，例如：
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
仅当opt目录中的文件列在projects.json的opt_files对象中时才会被复制，例如：
"opt_files": [
"opt/google_auth.js"
]
inc inc目录包含用于执行项目任务的文件。
class-build.php包含用于构建、部署和生成网站图标的功能。class-cli.php包含命令行操作的功能。class-projects.php包含从projects.json获取项目的功能。class-text.php包含格式化文本的功能。templates和template-parts目录templates和template-parts目录包含用于构建页面的文件。
第一次构建项目时，会在项目目录中创建多个文件和目录。
index.php ：不会被未来的版本覆盖，并且应该包含特定于项目的任何标记和功能。js/main.ts ：不会被未来的版本覆盖，并且应该包含特定于项目的任何功能。scss/style.scss ：不会被未来的版本覆盖，并且应该包含特定于项目的任何样式。_redirects ：Netlify 重定向文件。可以包含重定向和重写规则。.gitignore ：Git 忽略文件。包含 Git 不应跟踪的文件和文件夹的列表。manifest.json ：Web 应用程序清单文件。包含告诉浏览器有关渐进式 Web 应用程序及其安装后应如何表现的数据。package.json ： npm项目数据文件。包含npm包管理器的项目数据。package-lock.json ： npm依赖版本文件。包含npm包管理器安装的包的依赖版本。它是在安装包时由npm自动生成的。robots.txt ：机器人文件。包含一系列规则，可帮助搜索引擎确定应该和不应该抓取哪些页面。sitemap.xml ：站点地图文件。包含页面列表，可帮助搜索引擎发现内容，从而改进搜索引擎优化 (SEO)。sw.js ：服务工作者文件。包含缓存资源并允许离线浏览和可下载的“类似应用程序”体验的功能。tsconfig.json ：Webpack TypeScript 编译配置文件。webpack.config.js ：Webpack 配置文件，用于从js/*.ts和scss/*.scss文件生成bundle.[hash].jsfonts目录fonts目录包含在构建过程中从files/fonts复制的字体文件。在此目录中所做的任何更改都将被未来的版本覆盖。
img目录img目录包含通过-i命令生成的图像和文件。在运行该命令之前，应将favicon.svg放置在此目录中。
该目录还应包含：
projects.json中的cache_files对象中包含的任何图像。如果包含在cache_files和projects.json中的nav.image对象中，则该图像将用于顶部标题导航栏中。如果包含在cache_files和projects.json中的header.image对象中，则图像将在主标头中使用。share.jpg图像。posts.json中包含的任何帖子的特色图像，应命名为帖子的 URL，文件扩展名为.jpg 。projects.json中的screenshots对象中包含的任何图像。js目录js目录包含在构建过程中从files/js复制过来的.ts文件，以及从这些.ts文件和scss目录中的文件生成的bundle.[hash].js文件。
该目录还包含一个main.ts文件，该文件将在初始构建时生成为空白文件。它不会被未来的版本覆盖，并且应该包含特定于项目的任何功能。
如果需要未编译的文件，此目录还可以选择包含main.js 。如果需要，该文件还应该包含在projects.json的cache_files对象中。
scss目录scss目录包含在构建过程中从files/scss复制的.scss文件。
该目录还包含一个style.scss文件，该文件将在初始构建时生成为仅包含:root {}声明的文件，其中包含来自projects.json中的fonts和colors对象的字体和颜色。它不会被未来的构建覆盖，并且应该包含特定于项目的任何样式。
project从projects.json获取项目配置。$this->project_data['files']['compile']数组用于将文件编译到项目目录中。$this->project_data['files']['compile']$this->project_data['files']['copy']数组用于将文件复制到项目目录中。files/scss和files/js中的文件将添加到$this->project_data['files']['copy']中。files/opt中的文件仅添加到$this->project_data['files']['copy']如果它们也在projects.json的opt_files对象中列出，例如： "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['copy'] 。$this->project_data['files']['cache']数组用于将文件添加到sw.js文件中，以便 Service Worker 进行缓存。data.json （用于生成其他页面以创建类似应用程序的搜索体验）和posts.json （用于生成博客文章）被添加到$this->project_data['files']['cache'] 。projects.json中的cache_files对象中列出的文件将添加到$this->project_data['files']['cache'] ，例如： "cache_files": [
"img/logo_header.svg",
"img/logo_nav.svg",
"img/shortcut.png"
]
files/opt中的文件仅添加到$this->project_data['files']['cache']如果它们也在projects.json的opt_files对象中列出，例如： "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['cache']post （例如从posts.json中提取），则还会使用页面 URL 和.jpg文件扩展名将图像添加到$this->project_data['files']['cache']中。$this->project_data['files']['cache']$this->project_data['sitemap']['urls']用于稍后生成sitemap.xml文件。package.json文件index.php文件scss目录和scss/style.scss带有:root {}声明，其中包含projects.json中的字体和colors对象的fonts和颜色，例如 "fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
},
"colors": {
"main": {
"normal": "92D7DA",
"dark": "489094"
},
"accent": {
"normal": "FA96C0",
"dark": "B34F78"
}
}
js目录和js/main.tsopt目录node_modules的.gitignore文件sw.js服务工作者文件$this->project_data['files']['copy']数组中列出的文件复制到项目目录中。js/*.ts和scss/*.scss文件生成一个bundle.[hash].js文件，然后使用php命令，并将project 、 page和project_data作为参数传入将$this->project_data['files']['compile']中的每个文件编译为缩小的.html文件。manifest.json文件。将manifest.json文件复制到项目目录中，然后根据projects.json中的值（ categories 、 screenshots 、 shortcuts 、 android_app_id和apple_app_id ）进行修改。$this->project_data['files']['compile']和$this->project_data['files']['copy']中文件中的以下模式：***FILES*** ：来自$this->project_data['files']['cache']的文件***URLS*** ：来自$this->project_data['redirects']和$this->project_data['sitemap']['urls']的 URL***REDIRECT_URLS*** ：来自$this->project_data['files']['compile']和$this->project_data['redirects']的 URL***URL*** ：来自$this->project_data['url']的项目 URL***TITLE*** ：来自$this->project_data['title']项目标题***DESCRIPTION*** ：来自$this->project_data['description']的项目描述***VERSION*** ：来自$this->project_data['version']的项目版本（从sw.js中提取）***DATE*** : 日期('Ym-d') 这些是可在projects.json中的fonts对象中使用的字体，例如：
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
以下开源项目是使用 PWA Generator 构建的。查看下面的网站、GitHub 存储库和projects.json配置。
{
"url": "nicolefurlan.com",
"title": "Nicole Furlan",
"description": "Software engineer on a pursuit of equality, compassion, and justice for all.",
"keywords": "nicole furlan, nicole pitts",
"categories": [],
"netlify_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"gtm_id": "G-XXXXXXXXXX",
"fbpixel_id": null,
"repixel_id": null,
"google_ads": false,
"amazon_ads": false,
"other_ads": false,
"google_api": {
"google_api_client_id": null,
"google_api_client_key": null,
"google_api_key": null,
"google_api_scope": null,
"google_api_url": null,
"google_api_callback": null
},
"fonts": {
"heading": "Playfair Display",
"body": "Raleway"
},
"fontawesome": true,
"android_app_id": {
"free": null,
"paid": null
},
"apple_app_id": {
"free": null,
"paid": null
},
"screenshots": [
"img/screenshot.png"
],
"shortcuts": null,
"links": [],
"nav": {
"image": "img/logo_nav.svg"
},
"header": {
"title": "Hi! I'm Nicole",
"description": "I'm a Software Engineer working on building a better world for us all",
"image": "img/background.webp",
"image_credit": "Photo by <a href="https://pbase.com/tclout/root" alt="Thomas Cloutier Photography">Thomas Cloutier Photography</a>"
},
"social": {
"mailto": "[email protected]",
"facebook": null,
"twitter": null,
"github": "nikkifurls",
"patreon": null,
"paypal": "donate?hosted_button_id=M7MMF3EWQTLKG",
"portfolio": null,
"yelp": null,
"tripadvisor": null,
"custom": [
{
"url": null,
"label": null,
"text": null,
"link": null
}
]
},
"author": {
"name": "Nicole Furlan",
"twitter": "nicolemfurlan"
},
"redirects": [
{
"from": "/donate",
"to": "https://www.paypal.com/donate?hosted_button_id=M7MMF3EWQTLKG"
}
],
"pages": [],
"cache_files": [
"img/background.webp",
"img/logo_nav.svg"
],
"opt_files": []
}
{
"url": "dogsafefoods.com",
"title": "Dog Safe Foods",
"description": "Sharing food with your dog? Make sure it's safe first",
"keywords": "dog safe foods, dog safe human food, dog safe human foods, safe for dogs to eat, can dogs eat, can my dog eat, can dogs have, can my dog have, good human food for dogs, food dog can eat",
"categories": [
"pets",
"food"
],
"netlify_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"gtm_id": "G-XXXXXXXXXX",
"fbpixel_id": "xxxxxxxxxxxxxxx",
"repixel_id": "xxxxxxxxxxxxxxxxxxxxxxxx",
"google_ads": true,
"amazon_ads": false,
"other_ads": false,
"google_api": {
"google_api_client_id": null,
"google_api_client_key": null,
"google_api_key": null,
"google_api_scope": null,
"google_api_url": null,
"google_api_callback": null
},
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
},
"fontawesome": true,
"android_app_id": {
"free": "com.dog_safe_foods.twa",
"paid": "com.dogsafefoods.twa"
},
"apple_app_id": {
"free": null,
"paid": null
},
"screenshots": [
"img/screenshot1.png",
"img/screenshot2.png",
"img/screenshot3.png"
],
"shortcuts": [
{
"name": "View Safe Foods",
"description": "View all foods that are safe for dogs to eat",
"url": "./safe",
"icons": [
{
"src": "img/icon-thumbs-up.png",
"sizes": "512x512"
}
]
},
{
"name": "View Unsafe Foods",
"description": "View all foods that are not safe for dogs to eat",
"url": "./unsafe",
"icons": [
{
"src": "img/icon-thumbs-down.png",
"sizes": "512x512"
}
]
}
],
"links": [],
"nav": {
"image": "img/logo_nav.svg"
},
"header": {
"title": null,
"description": null,
"image": "img/logo_header.svg",
"image_credit": null
},
"social": {
"mailto": "[email protected]",
"facebook": null,
"twitter": "dogsafefoods",
"github": "nikkifurls/dogsafefoods",
"patreon": null,
"paypal": "donate?hosted_button_id=M7MMF3EWQTLKG",
"portfolio": "nicolefurlan.com",
"yelp": null,
"tripadvisor": null,
"custom": [
{
"url": "https://catsafefoods.com",
"label": "Cat Safe Foods",
"text": null,
"link": "<i class='fas fa-cat'></i>"
}
]
},
"author": {
"name": "Nicole Furlan",
"twitter": "nicolemfurlan"
},
"redirects": [
{
"from": "/healthy",
"to": "/safe 301!"
},
{
"from": "/unhealthy",
"to": "/unsafe 301!"
},
{
"from": "/healthy.html",
"to": "/safe 301!"
},
{
"from": "/unhealthy.html",
"to": "/unsafe 301!"
},
{
"from": "/* food=:food",
"to": "/:food 301!"
}
],
"pages": {
"*": {
"url": "",
"title": "",
"description": "Sharing ***TITLE*** with your dog? Make sure it's safe first",
"keywords": "can dogs eat ***TITLE***, can dogs have ***TITLE***, dogs ***TITLE***, dogs and ***TITLE***, ***TITLE*** safe for dogs, ***TITLE*** bad for dogs, ***TITLE*** ok for dogs, is it safe for dogs to eat ***TITLE***, is it safe for dogs to have ***TITLE***"
},
"safe": {
"url": "safe",
"title": "Safe Foods for Dogs",
"description": "Sharing food with your dog? Make sure it's on this list of safe foods for dogs first",
"keywords": "healthy human food for dogs, safe human food for dogs, human food that dogs can eat, good human food for dogs"
},
"unsafe": {
"url": "unsafe",
"title": "Unsafe Foods for Dogs",
"description": "Sharing food with your dog? Make sure it's not on this list of unsafe foods for dogs first",
"keywords": "unhealthy human food for dogs, food not to feed dogs, bad food for dogs, bad human food for dogs"
}
},
"cache_files": [
"img/logo_header.svg",
"img/logo_nav.svg",
"img/icon-thumbs-up.png",
"img/icon-thumbs-down.png",
"ads.txt",
"sellers.json"
],
"opt_files": []
}
欢迎贡献！如果您发现问题或有改进的想法，请随时创建问题。
