介紹/info
auto compress img by tinypng when used webpack or vue
This plugin can record the compression and will not recompress the file if it is not updated
適用於vue和webpack的tinypng插件,支持調整圖片尺寸
能夠根據記錄判斷資源是否發生改變,未改變時不會重複進行壓縮
npm地址
使用/how to use
設置key/set key
1.create tinypng.js
path: {your workspace}/tinypng.js
tinypng.js:
module.exports = {
key: "XXXX",
};
2.set key in options.config
new tinypngPlugin({
config: {
key: "XXXX",
}
})
import/導入
webpack
module.exports = {
plugins: [
new tinypngPlugin()
]
};
vue
configureWebpack: (config) => {
return {
plugins: [
new tinypngPlugin()
]
}
}
配置屬性/options
option.configName
config file name , no suffix
default "tinypng"
配置文件名稱
默認為"tinypng"
configName: ""
option.cachePath
cache path
default ".tinypng"
壓縮記錄緩存路徑
默認為".tinypng",基於根目錄
cachePath: ""
option.cacheName
cache name
default "hash.json"
壓縮記錄緩存文件名
默認為"hash.json"
cacheName: ""
option.reg
compress img reg
default: /.(png|jpe?g|bmp)/i
需要壓縮資源後綴的正則效驗
默認: /.(png|jpe?g|bmp)/i
reg: XXXX
option.use
true/false run this plugin
default: true
是否啓動插件
默認: true
use: true/false,
option.cache
Whether to record compressed cache
default: true
是否啓用緩存記錄
默認: true
cache: true/false,
option.config
option.config.key
your key
tinypng的key
key:XXX,
option.config.method
resize method scale/fit/cover/thumb
look
圖片調整模式 支持:scale/fit/cover/thumb
詳情參考
method: ""
option.config.width
resize asset width
調整圖片的寬度尺寸
width: ""
option.config.height
resize asset height
調整圖片的高度尺寸
height: ""