pwagenerator
v2.0.4
filesinc Каталогtemplates и template-partsfontsimgjs каталог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 Generator генерирует все файлы, необходимые для работы проекта. Дополнительную информацию см. в разделе Процесс сборки.-i ): генерирует значки для проекта. Во время этого процесса PWA Generator настраивает массив конфигурации и генерирует набор значков из файла img/favicon.svg в каталоге проекта, используя real-favicon.-d ): развертывает проект. Во время этого процесса PWA Generator увеличивает версию проекта и развертывает каталог проекта в Netlify, используя netlify_id установленный в projects.json и netlify-cli. files Каталог files содержит файлы, которые копируются в проект при его сборке.
Шрифты в каталоге fonts будут скопированы только в том случае, если они указаны в объекте fonts в файле projects.json , например:
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
Файлы в каталоге opt будут скопированы только в том случае, если они указаны в объекте opt_files в projects.json , например:
"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 : файл манифеста веб-приложения. Содержит данные, которые сообщают браузеру о прогрессивном веб-приложении и о том, как оно должно вести себя при установке.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 для создания bundle.[hash].js из файлов js/*.ts и scss/*.scss .fonts Каталог fonts содержит файлы шрифтов, которые копируются из files/fonts в процессе сборки. Любые изменения, внесенные в этот каталог, будут перезаписаны будущими сборками.
img Каталог img содержит изображения и файлы, созданные с помощью команды -i . Перед запуском этой команды в этот каталог следует поместить файл favicon.svg .
Этот каталог также должен содержать:
cache_files в projects.json . Если оно включено в cache_files и в объект nav.image в projects.json , изображение будет использоваться в верхней панели навигации заголовка. Если оно включено в cache_files и в объект header.image в projects.json , изображение будет использоваться в основном заголовке.share.jpg используемое для обмена в социальных сетях.posts.json , которое должно называться URL-адресом сообщения с расширением файла .jpg .screenshots в projects.json .js каталог Каталог js содержит файлы .ts , которые копируются из files/js во время процесса сборки, а также файл bundle.[hash].js , который создается из этих файлов .ts и файлов в каталоге scss .
Этот каталог также содержит файл main.ts , который при первоначальной сборке будет создан как пустой файл. Он не будет перезаписан будущими сборками и должен содержать любую функциональность, специфичную для проекта.
Этот каталог также может содержать main.js , если требуется нескомпилированный файл. Если это необходимо, этот файл также следует включить в объект cache_files в projects.json .
scss Каталог scss содержит файлы .scss , которые копируются из files/scss во время процесса сборки.
Этот каталог также содержит файл style.scss , который будет создан при первоначальной сборке как файл, содержащий только объявление :root {} , содержащее шрифты и цвета из объектов fonts и colors в projects.json . Он не будет перезаписан будущими сборками и должен содержать любые стили, специфичные для проекта.
projects.json в зависимости от project переданного через командную строку.$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'] только в том случае, если они также указаны в объекте opt_files в projects.json , например: "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['copy'] .$this->project_data['files']['cache'] используется для добавления файлов в файл sw.js для кэширования сервис-воркером.data.json (используется для создания дополнительных страниц для создания возможностей поиска, подобных приложениям) и posts.json (используется для создания сообщений в блоге), добавляются в $this->project_data['files']['cache'] .cache_files в projects.json добавляются в $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'] только в том случае, если они также указаны в объекте opt_files в projects.json , например: "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['cache']post (например, извлеченную из posts.json ), изображение также добавляется в $this->project_data['files']['cache'] с использованием URL-адреса страницы и расширения файла .jpg .$this->project_data['files']['cache']$this->project_data['sitemap']['urls'] для последующего создания файла sitemap.xml .package.jsonindex.phpscss и scss/style.scss с объявлением :root {} , содержащим шрифты и цвета из объектов fonts и colors в projects.json , например "fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
},
"colors": {
"main": {
"normal": "92D7DA",
"dark": "489094"
},
"accent": {
"normal": "FA96C0",
"dark": "B34F78"
}
}
js и js/main.tsopt каталог.gitignore с node_modulessw.js$this->project_data['files']['copy'] в каталог проекта.bundle.[hash].js из файлов js/*.ts и scss/*.scss предоставленных с помощью Webpack через webpack-cli, затем использует команду 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*** : URL-адреса из $this->project_data['redirects'] и $this->project_data['sitemap']['urls']***REDIRECT_URLS*** : URL-адреса из $this->project_data['files']['compile'] и $this->project_data['redirects']***URL*** : URL-адрес проекта из $this->project_data['url']***TITLE*** : название проекта из $this->project_data['title']***DESCRIPTION*** : описание проекта из $this->project_data['description']***VERSION*** : версия проекта из $this->project_data['version'] (извлечена из sw.js ).***DATE*** : дата('ГМ-Д') Это шрифты, доступные для использования в объекте fonts в projects.json , например:
"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": []
}
Вклады приветствуются! Если вы обнаружили проблему или у вас есть идея по улучшению, смело создавайте проблему.
