Resource Uploader

一站式資源上傳和處理工具（使用阿里云 OSS）

安裝

npm install -g resource-uploader

特性

• 支持 Babel 轉(zhuǎn)譯
• 支持 Javascript 壓縮和優(yōu)化
• 支持 Javascript 深度混淆
• 支持 Sass/Less 轉(zhuǎn) CSS
• 支持 CSS 自動加瀏覽器前綴
• 支持 px 單位轉(zhuǎn) rem 單位（可選）
• 支持 CSS 壓縮和優(yōu)化
• 支持 jpg/png/gif 壓縮和優(yōu)化，優(yōu)化包括漸進(jìn)式加載等
• 支持處理 HTML 文件，自動處理 HTML 中引用的所有資源
• 自動生成全站唯一 URL，形如?https://domain.com/-/905bab36808f28a7/filename.png
• 自動設(shè)置 HTTP 緩存頭，永久緩存資源在瀏覽器
• 支持多配置
• 支持處理成 BASE64 資源
• 支持多文件合并

使用

上傳資源到 OSS

用法

res-up [選項(xiàng)] 文件

選項(xiàng)

--compress

是否壓縮文件。這個(gè)選項(xiàng)可以壓縮圖片、JS 腳本和樣式文件。

簡寫: -c

類型: boolean

默認(rèn)值: true

不壓縮文件可以使用?--no-compress。

--babel

是否使用 Babel 轉(zhuǎn)譯 JS 文件。

類型: boolean

默認(rèn)值: true

不進(jìn)行轉(zhuǎn)譯可以使用?--no-babel。

--iife

JS 文件是否使用 IIFE（立即執(zhí)行函數(shù)）包裹，啟用壓縮選項(xiàng)才可使用。一般來說這選項(xiàng)用于避免 JS 代碼污染全局作用域。

類型: boolean

默認(rèn)值: false

--obfuscate

是否開啟 JS 深度混淆。這個(gè)選項(xiàng)一般用于混淆代碼，防止別人拿到或分析源代碼。

簡寫: -o

類型: boolean

默認(rèn)值: false

--sass

是否使用 Sass 預(yù)處理器。

類型: boolean

默認(rèn)值: true

不使用 Sass 預(yù)處理器可以這樣?--no-sass。

--less

是否使用 Less 預(yù)處理器。

類型: boolean

默認(rèn)值: true

不使用 Less 預(yù)處理器可以這樣?--no-less。

--raw

是否上傳原始文件。如果打開這個(gè)選項(xiàng)，所有文件處理選項(xiàng)全部關(guān)閉，文件將原封不動的上傳到 OSS 或存儲到目標(biāo)位置。

類型: boolean

默認(rèn)值: false

--concat

是否合并文件，如果開啟此選項(xiàng)并傳遞多個(gè)文件，則會合并所有文件，并在 URL 中自動命名一個(gè)新文件名，如需要指定請使用?--name?選項(xiàng)。

類型: boolean

默認(rèn)值: false

--prefix

自定義 URL 路徑。可自定義生成的 URL 中的部分路徑，例如:?http://domain.com/!/自定義路徑/原文件名。

簡寫: -p

類型: string

--name

自定義 URL 文件名。只用于開啟文件合并和保存文件到本地的情況下，開啟這個(gè)選項(xiàng)后合并文件將使用指定的文件名而不使用自動生成的文件名。例如:?http://domain.com/!/自定義路徑/自定義文件名。

類型: string

--base64

是否處理成 base64 內(nèi)容，而不上傳 OSS。單純開啟此選項(xiàng)會把生成的 base64 文本復(fù)制到剪貼板。

類型: boolean

默認(rèn)值: false

--dest

本機(jī)文件系統(tǒng)路徑，使用此選項(xiàng)將保存文件到指定路徑，而不上傳 OSS。可以使用此選項(xiàng)進(jìn)行文件處理而不需要上傳，如果結(jié)合?--base64?選項(xiàng)可以把 base64 內(nèi)容保存到本地。

類型: string

刷新 OSS 資源

用法

res-up refresh URL

URL 表示已經(jīng)由 resource-uploader 生成的 OSS URL。一般使用這個(gè)命令覆蓋已經(jīng)上傳過的文件，因?yàn)槿绻凰⑿碌脑挘琌SS 會一直緩存舊的文件內(nèi)容。

例如:?res-up refresh "https://oss.domain.com/-/xxx/filename.png"

其它選項(xiàng)

--output-simple

是否簡化控制臺輸出。簡化輸出后，控制臺只輸出生成的 URL，每行一個(gè)。

類型: boolean

默認(rèn)值: false

--config

自定義配置文件。可以通過這個(gè)選項(xiàng)指定其他配置文件的路徑，一般用于多 OSS 賬戶之間的切換。

類型: string

--init-config

初始化配置文件。使用這個(gè)選項(xiàng)重新初始化配置文件。

類型: boolean

默認(rèn)值: false

樣式文件中的 px 轉(zhuǎn) rem 單位

在樣式文件的最開始增加?@postcss-use postcss-pxtorem;?即可，支持 css、sass、less。

如果需要對轉(zhuǎn)換進(jìn)行配置，可以這樣：

@postcss-use postcss-pxtorem {
  rootValue: 37.5;
}

配置默認(rèn)值：

@postcss-use postcss-pxtorem {
  rootValue: 75;
  unitPrecision: 6;
  replace: true;
  mediaQuery: false;
  minPixelValue: 2;
  propList: '["*"]';
  selectorBlackList: '["weui-", "no-rem-"]';
}

注意，其中?propList?和?selectorBlackList?中數(shù)組要用單引號括起來，數(shù)組中的字符串必須使用雙引號，并且不能換行。

各個(gè)選項(xiàng)的意義請參考?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"