上次說(shuō)道，我們用Github建立了一個(gè)服務(wù)器，我們把圖片放到你的倉(cāng)庫(kù)代碼庫(kù)下，然后將圖片push到Github遠(yuǎn)端服務(wù)器上，之后就可以訪問(wèn)你的圖片了。這次，我們?cè)囍詣?dòng)化這些步驟。（上文鏈接如下）
http://www.itdecent.cn/p/6954b58200f9
想要自動(dòng)話這個(gè)步驟，我們需要寫一些代碼，這里我選擇了Node.js，可以提供一些工具來(lái)操作文件還有下載圖片。并且在也很容易在本地運(yùn)行。并且Node.js也支持運(yùn)行Shell Script。
下面我們將這個(gè)流程分為下面幾個(gè)步驟：
- 從命令行讀取參數(shù)
- 下載圖片并存到設(shè)定的路徑下
- 將圖片push到Github的遠(yuǎn)端倉(cāng)庫(kù)下
從命令行讀取參數(shù)
Node.js命令如下所示
node upload.js --url https://any-image-host.com/static/images/image.png
之后我們可以讀取到URL參數(shù)并用來(lái)下載圖片到Github倉(cāng)庫(kù)下。
通常，我們可以從process.argv來(lái)讀取這些參數(shù)，但是讀取的參數(shù)可讀性較低，因?yàn)閿?shù)據(jù)是存在數(shù)組里的，如下文所示：
[
'/<path>/node',
'/<path>/upload.js',
'--url',
'https://any-image-host.com/static/images/image.png'
]
所以我建議使用一個(gè)工具minimist，你可以通過(guò)npm來(lái)安裝，npm i minimist --save。這個(gè)工具可以幫你將參數(shù)整理成鍵值對(duì)的形式：
{
_: [
'/<path>/node',
'/<path>/upload.js'
],
url: 'https://any-image-host.com/static/images/image.png'
}
之后我們可以輕松的從minimist(process.argv).url來(lái)獲取數(shù)據(jù)。
下載圖片并存到設(shè)定的路徑下
拿到圖片的URL，我們就可以準(zhǔn)備下載圖片了。
首先，選擇一個(gè)路徑來(lái)存儲(chǔ)圖片，我比較傾向于下面這樣的路徑：
<project-path>/images/<timestamp>/<uuid>.<image-format>
首先我們需要?jiǎng)?chuàng)建文件夾<project-path>/images/<timestamp>，這里我們可以用shell script mkdir -p <project-path>/images/<timestamp>，但是我們?cè)?code>Node.js中使用shell script嗎？答案是：是的，我們可以通過(guò)下面打代碼來(lái)運(yùn)行shell script。
const exec = require('child_process').exec;
const sh = cmd => {
return new Promise((resolve, reject) => {
exec(cmd, (err, stdout, stderr) => {
if (err) {
reject(err);
} else {
resolve({ stdout, stderr });
}
});
});
}
首先，從child_process模塊中引入exec方法，這個(gè)模塊是包括在Node.js中，我們不需要再另外安裝。然后他可以接受一個(gè)shell script命令作為參數(shù)并執(zhí)行它。
在這里我們只需要執(zhí)行sh('mkdir -p <project-path>/images/<timestamp>')，文件夾便被創(chuàng)建出來(lái)了。
之后，我們便可以下載圖片了。這里我們使用了image-downloader模塊，通過(guò)npm i image-downloader --save可以安裝它。其API使用方式比較簡(jiǎn)單，eg.
const downloader = require('image-downloader')
const options = {
url,
dest: path.resolve(__dirname, `${dir}/${name}`),
extractFilename: false,
}
return downloader.image(options)
.then(({ filename, image }) => {
console.log('The image is saved to', filename);
console.log('The image is at', `https://raw.githubusercontent.com/<your-git-username>/static-images/master/images/v2/${timestamp}/${name}`);
})
如果你想了解更多關(guān)于image-downloader的內(nèi)容, 可以訪問(wèn)https://www.npmjs.com/package/image-downloader
將圖片push到Github的遠(yuǎn)端倉(cāng)庫(kù)下
拿到圖片后，最后一步就是發(fā)布這些圖片。
這步很簡(jiǎn)單，因?yàn)槲覀兦懊嬉呀?jīng)配置好sh方法來(lái)執(zhí)行命令行腳本，我們我們可以如下配置命令：
const command = `
git add --all; \
git commit -m "Add image"; \
git push origin master});
`
sh(command)
之后如果你的Git工作正常，應(yīng)該可以看到你的圖片已經(jīng)被發(fā)布到Github上了。
疑難排解
我在這個(gè)過(guò)程中面對(duì)的最大的問(wèn)題是在下載圖片的時(shí)候，有時(shí)候會(huì)遇到CONNECTION REFUSED 0.0.0.0:443的錯(cuò)誤，但是將URL輸入到瀏覽器中則可以看到圖片，這種情況下是由于DNS不能正確的解析域名導(dǎo)致的，你可以嘗試換一個(gè)DNS服務(wù)器比如114.114.114.114，如果你覺得這樣比較費(fèi)時(shí)間，對(duì)于這樣的圖片你也可以手動(dòng)下載。
