Independent tinypng node script

Time:2020-9-24

Independent tinypng node script

characteristic

  • [no dependency, pure Script]

    • Download the script code and run it directly with the node command.
    • Minimize the use threshold.
  • [filter repeat compression]

    • Automatically record compressed images, skip compression and speed up progress.
    • Record the MD5 value after image compression, and skip compression when running compression script again.
    • Comparing file changes with MD5 values, even file migration can be automatically filtered.
    • Through the MD5 value comparison file changes, even if “replace with the same name file” can be automatically identified, and compressed, there is no missing fish.
  • [replace source file]

    • If the compression is successful, the source file can be replaced directly without generating redundant files. There is no need to copy and paste or move pictures.
    • Silent compression, no perception of the project, no impact.
  • [auto switch API key]

    • Tinypng applied forapi keyThere are only 500 times a month for free.
    • Multiple API keys can be set. When a key exceeds the usage times, the next key will be automatically switched for compression.
  • [compression report]

    • Record the compressed data of each picture and generate the summary information.
  • [compression safety boundary]

    • Compression security line, when the compression ratio is lower than the percentage value, keep the source file, avoid over compression and damage the image quality.
  • [source code with detailed remarks and test pictures]

    • Reduce the threshold of source code reading, testing and use.
    • It is recommended to read the source code to break the fear and facilitate customization of personalized requirements.

Customized for small projects

  • Pure script, does not rely on gulp, does not rely on webpack, no scaffolding environment
  • Small projects, or just a few static pages, the cost of scaffolding is too high. This foot solves the problem of scaffold dependence.
  • Of course, large and medium-sized projects can be used, but their “no dependence” characteristics are not so prominent in it. Recommended for medium and large projectsGulp version, to achieve more flexible configuration.

How to use single file

  • The first step is to clickDownload the source code
  • Step 2: add tinyng to the script file headerapi key

    global.tinypngConf = { 
       apiKeyList: [ 
           // 'XgNgkoyWbdIZd8OizINMjX2TpxAd_ GP3 ', // invalid key 
           //'ial6s3ekmon uvmeqwzdiip1nv2itjl1pc' // invalid key
           // it3vkey ' 
       ] 
    }

    Independent tinypng node script

  • Step 3: give the script file “executable” permission,chmod +x ./mtp.js
  • Step 4: place the script file in the directory where the project is located
    Independent tinypng node script
  • Step 5: run the script in the directory where the project is locatednode ./mtp.js
    Independent tinypng node script
  • For subsequent use, only the last two steps “step 4” and “step 5”

Global configuration usage

  • The first step is global installationnpm install -g tinypng-script-with-cache
  • Step 2: configure API key globally
    mtp setKey XgNgkoyWbdIZd8OizINMjX2TpxAd_Gp3,IAl6s3ekmONUVMEqWZdIp1nV2ItJLyPC
  • Step 3, run scripts in the directory where the project is locatedmtp
  • For subsequent use, no configuration is required, and it runs directly in the target directorymtp
    Independent tinypng node script

Parameter transfer mode

Default configuration

  • Compress pictures under folder where the command is run by default
  • “Command transfer parameter” has higher priority than “modify source file settings”

Modify source file settings

  • In the head of the source file, the global parameters are written and automatically obtained when the program is running
  • All reference configurations are as follows

    global.tinypngConf = { 
       Basepath: '/ users / mjw / desktop / git / tinyng script with cache / test img' // compress path 
       Createmd5formorigin: false, // no compression is performed. Only MD5 information of existing images is generated and used as a cache. "Picture MD5 information" for "initial project access" and manual clearing of redundancy 
       Apikeylist: [// API key array of tiny PNG. When one of them is unavailable or exceeds the number of times it has been used, the next key call will be automatically switched 
         // it3vkey ' 
       ]
    }

    Independent tinypng node script

Command transmission

  • Parameters are distinguished by spaces
  • Parameter 1: compression path
  • Parameter 2: whether to generate MD5 information of existing images without compression operation. Divide empty string''The rest values are true
  • Parameter 3: apikeylist, distinguished by commas,
  • Reference

    node ./mtp.js /Users/mjw/Desktop/git/tinypng-script-with-cache/test-img '' IAl6s3ekmONUVMEqWZdIp1nV2ItJLyPC 

    Independent tinypng node script

Configure merge priority source code

const vfs = require('vinyl-fs');  
let tinypng = require('./tinypng-with-cache')  
  
Let apikeylist = [] // the interface key is empty by default  
let basePath =  process.cwd () // the directory where the script runs by default  
Let createmd5formorigin = false // do not compress, only generate MD5 information of existing images and use them as cache. "Picture MD5 information" for "initial project access" and manual clearing of redundancy  
  
//If there is a global pass through value  
if (global.tinypngConf) {  
    basePath = tinypngConf.basePath || basePath     
    apiKeyList = tinypngConf.apiKeyList || apiKeyList 
    createMd5FormOrigin = tinypngConf.createMd5FormOrigin || createMd5FormOrigin
}  
  
//Dynamic parameter transfer  
basePath = process.argv[2] || basePath  
createMd5FormOrigin = process.argv[3] || createMd5FormOrigin  
apiKeyList = process.argv[4] ? process.argv[4].split(',') : apiKeyList  
  
let fileFilter = [ 
 basePath + '/**/*.png',
 basePath + '/**/*.jpg', 
 basePath + '/**/*.jpeg', 
 '!/**/node_ Modules / * ', // ignore files that do not need to be traversed. Path matching syntax reference: https://www.gulpjs.com.cn/docs/getting-started/explaining-globs/
]  
  
console.log({  
 basePath,
 apiKeyList,
 fileFilter, 
 createMd5FormOrigin
})  
  
if (!apiKeyList.length) {  
   return  console.error ('tinypng script with cache ','tinypny key list cannot be empty! ")
}  
  
vfs.src(fileFilter, {  
 Base: '. /', // use the phase path for the file, in order to cover the source file later 
 Nodir: true, // ignore folder
})
.pipe(tinypng({  
    apiKeyList, 
    reportFilePath: basePath + '/ tinypngReport.json "// if it is not set, logging will not be performed 
    md5RecordFilePath: basePath + '/tinypngMd5 Record.json "// if it is not set, cache filtering will not be performed 
    Mincompressionpercentlimit: 10, // the default value is zero, and the minimum compression percentage is limited. To ensure the image quality, when the compression ratio is lower than this value, keep the source file, avoid excessive compression, and damage the image quality. Create md5formorigin, // do not perform compression, only generate MD5 information of existing images, and use it as a cache. "Picture MD5 information" for "initial project access" and manual clearing of redundancy
 }))  
.pipe( vfs.dest ('. /', {rewrite: true})) // overwrites the original file

Project address

Second development, generate custom script

  • Git clone download project
  • NPM install installation dependency
  • Modify tinyng- mjw.js “Tinyng with”- cache.js “Source file
  • implementnpx webpack --config webpack.config.jsCommand to package
  • Generate target filedist/mtp.js

Test resources

  • Test img: image compression test directory
  • Test img origin: test image backup directory for recovery test

Operation effect

Independent tinypng node script

Compress Report

Independent tinypng node script

MD5 record

Independent tinypng node script

For gulp version, please refer tohere