pwagenerator
v2.0.4
filesディレクトリincディレクトリtemplatesとtemplate-partsディレクトリfontsディレクトリimgディレクトリjsディレクトリscssディレクトリPWA Generator はprojects.jsonで指定されたプロジェクト構成に基づいて静的 Web サイトを構築する静的サイト ジェネレーターです。 Web サイトがプログレッシブ Web アプリとして機能するために必要なものすべてを生成できます。たとえば、オフラインで機能し、インストール可能です。 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 : 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 : 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ファイルも含まれています。このファイルは、最初のビルド時に、 projects.json内の fonts およびcolorsオブジェクトのfontsと色を含む: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']配列は、Service Worker によるキャッシュ用のファイルをsw.jsファイルに追加するために使用されます。data.json (アプリのような検索エクスペリエンスを作成するための追加ページの生成に使用) とposts.json (ブログ投稿の生成に使用) は、 $this->project_data['files']['cache']に追加されます。 $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 を使用して構築されています。以下の Web サイト、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": []
}
貢献は大歓迎です！問題を発見した場合、または改善のアイデアがある場合は、お気軽に問題を作成してください。
