使用pwa-asset-generator自动化生成全平台WebApp的启动图

悠悠 2023-10-09 19:39 43阅读 0赞

有能力的可以看官方文档：[GitHub - elegantapp/pwa-asset-generator: Automates PWA asset generation and image declaration. Automatically generates icon and splash screen images, favicons and mstile images. Updates manifest.json and index.html files with the generated images according to Web App Manifest specs and Apple Human Interface guidelines.][GitHub - elegantapp_pwa-asset-generator_ Automates PWA asset generation and image declaration. Automatically generates icon and splash screen images_ favicons and mstile images. Updates manifest.json and index.html files with the generated images according to Web App Manifest specs and Apple Human Interface guidelines.]

自动生成PWA资产和图像声明。自动生成图标和闪屏图像、图标和mstile图像。根据Web应用程序清单规范和苹果人机界面指南，用生成的图像更新manifest.json和index.html文件。使用这个工具演示：

![b1b0cd274b39917ffc7940295b6340e4.gif][]

结果：

![ee38f3cd937e4c35bdca596177818b37.png][]

## 使用步骤 ##

全局安装：

npm install --global pwa-asset-generator

开始生成图片：如果没有目标目录，则保存到当前目录中

npx pwa-asset-generator 原图片文件 目标目录

我这里做的一个演示：![0280389d6010462183bf53ac7fef669b.png][]

执行完成之后：生成了各种大小的启动图，然后将图片引入到你的项目中即可：

![26db7dc7d446437a92f83cb93fe4649d.png][]

会自动生成apple的link引入文件：

附上参数介绍：

$ pwa-asset-generator --help
    
      Usage
        $ pwa-asset-generator [source-file] [output-folder]
    
        The assets will be saved to the folder where the command is executed if no output-folder provided.
    
      Options
        -b --background             Page background to use when image source is provided: css value  [default: transparent]
        -o --opaque                 Shows white as canvas background and generates images without transparency  [default: true]
        -p --padding                Padding to use when image source provided: css value  [default: "10%"]
        -s --scrape                 Scraping Apple Human Interface guidelines to fetch splash screen specs  [default: true]
        -m --manifest               Web app manifest file path to automatically update manifest file with the generated icons
        -i --index                  Index HTML file path to automatically put splash screen and icon meta tags in
        -a --path                   Path prefix to prepend for href links generated for meta tags
        -v --path-override          Override the path of images used in href/src tags of manifest and HTML files
        -t --type                   Image type: png|jpg  [default: jpg - with the exception of manifest files]
        -q --quality                Image quality: 0...100 (Only for JPG)  [default: 70]
        -h --splash-only            Only generate splash screens  [default: false]
        -c --icon-only              Only generate icons  [default: false]
        -f --favicon                Generate favicon image and HTML meta tag  [default: false]
        -w --mstile                 Generate Windows static tile icons and HTML meta tags  [default: false]
        -e --maskable               Declare icons in manifest file as maskable icons  [default: true]
        -l --landscape-only         Only generate landscape splash screens  [default: false]
        -r --portrait-only          Only generate portrait splash screens  [default: false]
        -d --dark-mode              Generate iOS splash screen meta with (prefers-color-scheme: dark) media attr  [default: false]
        -u --single-quotes          Generate HTML meta tags with single quotes  [default: false]
        -x --xhtml                  Generate HTML meta tags by self-closing the tags  [default: false]
        -g --log                    Logs the steps of the library process  [default: true]
        -n --no-sandbox             Disable sandbox on bundled Chromium on Linux platforms - not recommended  [default: false]
    
      Examples
        $ pwa-asset-generator logo.html
        $ pwa-asset-generator logo.svg -i ./index.html -m ./manifest.json
        $ pwa-asset-generator https://your-cdn-server.com/assets/logo.png ./ -t jpg -q 90 --splash-only --portrait-only
        $ pwa-asset-generator logo.svg ./assets --splash-only --xhtml --single-quotes
        $ pwa-asset-generator logo.svg ./assets --scrape false --icon-only --path "%PUBLIC_URL%"
        $ pwa-asset-generator logo.svg ./assets --icon-only --favicon --opaque false --maskable false --type png
        $ pwa-asset-generator logo.svg ./assets --dark-mode --background dimgrey --splash-only --quality 80
        $ pwa-asset-generator logo.svg ./assets --padding "calc(50vh - 5%) calc(50vw - 10%)" --path-override "./your-custom-image-folder-path"
        $ pwa-asset-generator https://onderceylan.github.io/pwa-asset-generator/static/logo.png ./temp -p "15%" -b "linear-gradient(to right, #fa709a 0%, #fee140 100%)"
        $ pwa-asset-generator https://onderceylan.github.io/pwa-asset-generator/static/blm.png ./blm -p "15%" -b "linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1)"
    
      Flag examples
        --background "rgba(255, 255, 255, .5)"
        --opaque false
        --padding "10px"
        --scrape false
        --manifest ./src/manifest.json
        --index ./src/index.html
        --path "%PUBLIC_URL%"
        --path-override "./your-custom-image-folder-path"
        --type jpg
        --quality 80
        --splash-only
        --icon-only
        --favicon
        --mstile
        --maskable false
        --landscape-only
        --portrait-only
        --dark-mode
        --single-quotes
        --xhtml
        --log false

[GitHub - elegantapp_pwa-asset-generator_ Automates PWA asset generation and image declaration. Automatically generates icon and splash screen images_ favicons and mstile images. Updates manifest.json and index.html files with the generated images according to Web App Manifest specs and Apple Human Interface guidelines.]: https://github.com/elegantapp/pwa-asset-generator
[b1b0cd274b39917ffc7940295b6340e4.gif]: https://img-blog.csdnimg.cn/img_convert/b1b0cd274b39917ffc7940295b6340e4.gif
[ee38f3cd937e4c35bdca596177818b37.png]: https://img-blog.csdnimg.cn/ee38f3cd937e4c35bdca596177818b37.png
[0280389d6010462183bf53ac7fef669b.png]: https://img-blog.csdnimg.cn/0280389d6010462183bf53ac7fef669b.png
[26db7dc7d446437a92f83cb93fe4649d.png]: https://img-blog.csdnimg.cn/26db7dc7d446437a92f83cb93fe4649d.png