Skip to content

sudongyuer/easy-tinypng-cli

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

easy-tinypng-cli

A cli can automatically compress images with tinypng.com.

NPM version

Why

When delevoping a website, we often need to compress images to reduce the network io cast.In normal way, we may need four steps to compress images:

  1. download images from the internet
  2. upload the image to tinypng.com
  3. download the compressed image from tinypng.com
  4. copy the compressd images into our workspace

The above steps are very time-consuming. So !!! this cli can automatically compress images in background process. It will watch the fileSystem changes to auto handle if there are any images that need to be compressed.

๐Ÿš€ Features

  • ๐Ÿ’พ Support configuration file
  • ๐Ÿ Multiple directory watching
  • โœจ Support HMR
  • ๐Ÿฆ‹ Auto detection nested directory images and compress them
  • ๐ŸŒ Background process will not block the main thread
  • ๐Ÿปโ€โ„๏ธ Compressed record logging to avoid repeated compression

vite-plugin-vue-inspector

Usage

Install

pnpm add -D easy-tinypng-cli

Config tiny.config.ts

  • APIKey (required) : the API key of tinypng.com, you can get it from tinypng.com

  • targetDir (required) : the top directory that you want to compress images

import { defineTinyConfig } from 'easy-tinypng-cli/utils'

export default defineTinyConfig({
  configs: [
    {
      targetDir: './src/images',
    },
  ],
  APIKey: 'xxxxxxxxx',
})

Add Script in package.json

{
  "scripts": {
    "optimizeImages": "tiny"
  }
}

or

{
  "scripts": {
    "optimizeImages": "tiny --once" //only compress once no watching files change
  }
}

Author

sudongyuer email:976499226@qq.com

License

MIT License ยฉ 2021 SuDongYu