Resource Uploader

一站式資源上傳和處理工具（使用阿里云 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 資源
• 支持多文件合并

使用

上傳資源到 OSS

用法

res-up [選項] 文件

選項

--compress

是否壓縮文件。這個選項可以壓縮圖片、JS 腳本和樣式文件。

簡寫: -c

類型: boolean

默認值: true

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

--babel

是否使用 Babel 轉譯 JS 文件。

類型: boolean

默認值: true

不進行轉譯可以使用?--no-babel。

--iife

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

類型: boolean

默認值: false

--obfuscate

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

簡寫: -o

類型: boolean

默認值: false

--sass

是否使用 Sass 預處理器。

類型: boolean

默認值: true

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

--less

是否使用 Less 預處理器。

類型: boolean

默認值: true

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

--raw

是否上傳原始文件。如果打開這個選項，所有文件處理選項全部關閉，文件將原封不動的上傳到 OSS 或存儲到目標位置。

類型: boolean

默認值: false

--concat

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

類型: boolean

默認值: false

--prefix

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

簡寫: -p

類型: string

--name

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

類型: string

--base64

是否處理成 base64 內容，而不上傳 OSS。單純開啟此選項會把生成的 base64 文本復制到剪貼板。

類型: boolean

默認值: false

--dest

本機文件系統路徑，使用此選項將保存文件到指定路徑，而不上傳 OSS。可以使用此選項進行文件處理而不需要上傳，如果結合?--base64?選項可以把 base64 內容保存到本地。

類型: string

刷新 OSS 資源

用法

res-up refresh URL

URL 表示已經由 resource-uploader 生成的 OSS URL。一般使用這個命令覆蓋已經上傳過的文件，因為如果不刷新的話，OSS 會一直緩存舊的文件內容。

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

其它選項

--output-simple

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

類型: boolean

默認值: false

--config

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

類型: string

--init-config

初始化配置文件。使用這個選項重新初始化配置文件。

類型: boolean

默認值: false

樣式文件中的 px 轉 rem 單位

在樣式文件的最開始增加?@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"