一站式资源上传和处理工具(使用阿里云 OSS)
npm install -g resource-uploader
- 支持 Babel 转译
- 支持 Javascript 压缩和优化
- 支持 Javascript 深度混淆
- 支持 Sass/Less 转 CSS
- 支持 CSS 自动加浏览器前缀
- 支持 px 单位转 rem 单位(可选)
- 支持 CSS 压缩和优化
- 支持 jpg/png/gif 压缩和优化,优化包括渐进式加载等
- 支持处理 HTML 文件,自动处理 HTML 中引用的所有资源
- 自动生成全站唯一 URL,形如
https://domain.com/-/905bab36808f28a7/filename.png
- 自动设置 HTTP 缓存头,永久缓存资源在浏览器
- 支持多配置
- 支持处理成 BASE64 资源
- 支持多文件合并
resource-uploader [选项] 文件
简写:
res-up [选项] 文件
是否压缩文件。这个选项可以压缩图片、JS 脚本和样式文件。
简写: -c
类型: boolean
默认值: true
不压缩文件可以使用 --no-compress
。
是否使用 Babel 转译 JS 文件。
类型: boolean
默认值: true
不进行转译可以使用 --no-babel
。
JS 文件是否使用 IIFE(立即执行函数)包裹,启用压缩选项才可使用。一般来说这选项用于避免 JS 代码污染全局作用域。
类型: boolean
默认值: false
是否开启 JS 深度混淆。这个选项一般用于混淆代码,防止别人拿到或分析源代码。
简写: -o
类型: boolean
默认值: false
是否使用 Sass 预处理器。
类型: boolean
默认值: true
不使用 Sass 预处理器可以这样 --no-sass
。
是否使用 Less 预处理器。
类型: boolean
默认值: true
不使用 Less 预处理器可以这样 --no-less
。
是否上传原始文件。如果打开这个选项,所有文件处理选项全部关闭,文件将原封不动的上传到 OSS 或存储到目标位置。
类型: boolean
默认值: false
是否合并文件,如果开启此选项并传递多个文件,则会合并所有文件,并在 URL 中自动命名一个新文件名,如需要指定请使用 --name
选项。
类型: boolean
默认值: false
自定义 URL 路径。可自定义生成的 URL 中的部分路径,例如: http://domain.com/!/自定义路径/原文件名
。
简写: -p
类型: string
自定义 URL 文件名。只用于开启文件合并和保存文件到本地的情况下,开启这个选项后合并文件将使用指定的文件名而不使用自动生成的文件名。例如: http://domain.com/!/自定义路径/自定义文件名
。
类型: string
是否处理成 base64 内容,而不上传 OSS。单纯开启此选项会把生成的 base64 文本复制到剪贴板。
类型: boolean
默认值: false
本机文件系统路径,使用此选项将保存文件到指定路径,而不上传 OSS。可以使用此选项进行文件处理而不需要上传,如果结合 --base64
选项可以把 base64 内容保存到本地。
类型: string
res-up refresh URL
URL 表示已经由 resource-uploader 生成的 OSS URL。一般使用这个命令覆盖已经上传过的文件,因为如果不刷新的话,OSS 会一直缓存旧的文件内容。
例如: res-up refresh "https://oss.domain.com/-/xxx/filename.png"
是否简化控制台输出。简化输出后,控制台只输出生成的 URL,每行一个。
类型: boolean
默认值: false
自定义配置文件。JSON文件格式,配置数据需包裹在 alioss 字段名中,可以通过这个选项指定其他配置文件的路径,一般用于多 OSS 账户之间的切换。
类型: string
示例:
custom-config.json
{
"alioss": {
"accessKeyId": "xxx",
"secretAccessKey": "xxx",
"bucket": "xxx",
"urlPrefix": "xxx/",
"endpoint": ""
}
}
字段解释:
- accessKeyId:阿里云 OSS AccessKeyId
- secretAccessKey:阿里云 OSS AccessKeySecret
- bucket:阿里云 OSS Bucket 名称
- urlPrefix:阿里云 OSS 自定义域名,需以 / 结尾
- endpoint:阿里云 OSS 源站地址,为可选项,也可以直接去掉。
初始化配置文件。使用这个选项重新初始化配置文件。
类型: boolean
默认值: false
在样式文件的最开始增加 @postcss-use postcss-pxtorem;
即可,支持 css、sass、less。
如果需要对转换进行配置,可以这样:
@postcss-use postcss-pxtorem {
rootValue: 37.5;
}
配置默认值:
@postcss-use postcss-pxtorem {
rootValue: 75;
unitPrecision: 6;
replace: true;
mediaQuery: false;
minPixelValue: 2;
propList: '["*"]';
selectorBlackList: '["weui-", "no-rem-"]';
}
注意,其中 propList
和 selectorBlackList
中数组要用单引号括起来,数组中的字符串必须使用双引号,并且不能换行。
各个选项的意义请参考 https://github.com/cuth/postcss-pxtorem
res-up filename.png
res-up /Users/xxx/Desktop/**/*.png
res-up /Users/xxx/Desktop/**/*.png --output-simple
res-up /Users/xxx/Desktop/1.js /Users/xxx/Desktop/2.js --concat
res-up --prefix folder1/folder2 filename.png
res-up --prefix folder1/folder2 --name new.png filename.png
res-up --base64 filename.png
res-up --base64 --dest /Users/xxx/Desktop filename.png
res-up --dest /Users/xxx/Desktop filename.png
res-up --no-compress filename.png
res-up --config ./custom-config.json filename.png
res-up refresh "https://domain.com/-/xxx/filename.png"