最近在用react+express做一個自己的工具型網站（其實就是奪寶島搶拍器）

然后因為經常要改動，而且又要放到服務器上進行測試。總是要webpack，然后手動把文件上傳上去，不勝其煩，索性搜索了下，直接寫個能檢測文件變化并自動進行上傳的腳本好了。

首先，我們使用npm 安裝兩個別人封裝好的模塊。

npm install ssh2-sftp-clientnpm install gaze

第一個模塊的作用是sftp上傳文件，

第二個模塊的作用就是監聽文件變化了。當然，你也可以采用node自帶fs模塊。

這兩個模塊的用法在這里：ssh2-sftp-client gaze

安裝好了以后，第一步就是監聽文件的變化了，由于我的文件已經使用webpack構建好了，所以后面只是文件變化，不會有文件增加，所以這里只需要使用changed就可以了，其他的用法請參考上面的鏈接，都大同小異

gaze(['你的文件路徑/*.*','還可以使用數組的方式監聽多個文件夾/app.js'], function(err, watcher) { let watched = this.watched(); //監聽文件的變化 this.on('changed', (filepath) => { //romotePath是我文件的遠程位置 let romotePath = '/root' + filepath.substr(15); //put為上傳文件的函數，下面會講  put(filepath,romotePath); console.log(filepath + ' was changed'); });}); 

然后就開始寫我們的上傳文件的函數

function put(localPath,romotePath){ let sftp = new Client(); sftp.connect({ host: '你的服務器地址', port: '端口，沒改過的話是22', username: '連接的用戶名', password: '密碼' }).then(() => { return sftp.put(localPath,romotePath); }).then(() =>{ console.log("上傳完成"); }).catch((err) => { console.log(err, 'catch error'); });}

好了，別忘了在我們的文件開始的地方可是要引入模塊的。

let Client = require('ssh2-sftp-client');let gaze = require('gaze');

接下來我們來實驗一下。來到我們的文件夾webpack一下

果然可以看到已經修改并且上傳完成了。上傳需要時間，請耐心等待。

來到我們的服務器，果然最近的修改時間已經變成現在了。

從此以后我終于不用一個個上傳了。每次要修改直接。打開一個窗口開啟這個腳本，就可以愉快的編碼了。

以上所述是小編給大家介紹的利用nodejs監控文件變化并使用sftp上傳到服務器，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網之家網站的支持！