pwagenerator
v2.0.4
files 디렉토리inc 디렉토리templates 및 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 Generator는 프로젝트가 작동하는 데 필요한 모든 파일을 생성합니다. 자세한 내용은 빌드 프로세스를 참조하세요.-i ): 프로젝트에 대한 아이콘을 생성합니다. 이 프로세스 동안 PWA Generator는 구성 배열을 설정하고 real-favicon을 사용하여 프로젝트 디렉토리의 img/favicon.svg 파일에서 파비콘 세트를 생성합니다.-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 : 웹 앱 매니페스트 파일입니다. 프로그레시브 웹 앱에 대한 정보와 설치 시 앱이 어떻게 작동해야 하는지를 브라우저에 알려주는 데이터가 포함되어 있습니다.package.json : npm 프로젝트 데이터 파일입니다. npm 패키지 관리자에 대한 프로젝트 데이터가 포함되어 있습니다.package-lock.json : npm 종속성 버전 파일입니다. npm 패키지 관리자가 설치한 패키지의 종속성 버전을 포함합니다. 패키지가 설치되면 npm 에 의해 자동으로 생성됩니다.robots.txt : 로봇 파일. 검색 엔진이 크롤링해야 할 페이지와 크롤링하지 말아야 할 페이지를 결정하는 데 도움이 되는 규칙 목록이 포함되어 있습니다.sitemap.xml : 사이트맵 파일. 검색 엔진의 콘텐츠 검색을 돕고 이를 통해 검색 엔진 최적화(SEO)를 향상시키는 페이지 목록이 포함되어 있습니다.sw.js : 서비스 워커 파일. 자산을 캐시하고 오프라인 탐색 및 다운로드 가능한 "앱과 같은" 경험을 허용하는 기능이 포함되어 있습니다.tsconfig.json : Webpack TypeScript 컴파일 구성 파일입니다.webpack.config.js : 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 에 포함된 모든 게시물에 대한 추천 이미지. 파일 확장자는 .jpg 인 게시물의 URL로 이름을 지정해야 합니다.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 파일도 포함되어 있습니다. 이 파일은 초기 빌드에서 projects.json 에 있는 fonts 및 colors 개체의 글꼴과 색상을 포함하는 :root {} 선언만 포함하는 파일로 생성됩니다. 향후 빌드에서 덮어쓰지 않으며 프로젝트와 관련된 스타일을 포함해야 합니다.
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 의 파일은 projects.json 의 opt_files 객체에도 나열되어 있는 경우 $this->project_data['files']['copy'] 에만 추가됩니다. 예: "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'] .projects.json 의 cache_files 개체에 나열된 파일은 $this->project_data['files']['cache'] 에 추가됩니다. 예: "cache_files": [
"img/logo_header.svg",
"img/logo_nav.svg",
"img/shortcut.png"
]
files/opt 의 파일은 projects.json 의 opt_files 객체에도 나열되어 있는 경우 $this->project_data['files']['cache'] 에만 추가됩니다. 예: "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'] 에 추가됩니다.sitemap.xml 파일을 생성하기 위해 $this->project_data['sitemap']['urls'] 페이지를 추가합니다.package.json 파일index.php 파일scss 디렉토리 및 scss/style.scss ( projects.json 에 있는 fonts 및 colors 객체의 글꼴 및 색상을 포함하는 :root {} 선언 포함), 예: "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 파일을 생성한 다음 인수로 전달된 project , page 및 project_data 와 함께 php 명령을 사용합니다. $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": []
}
기여를 환영합니다! 문제를 발견했거나 개선 아이디어가 있으면 자유롭게 문제를 만들어주세요.
