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 (used to generate additional pages to create an app-like search experience) and posts.json (used to generate blog posts), are added to $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": []
}
歡迎貢獻！如果您發現問題或有改進的想法，請隨時建立問題。
