現(xiàn)在前端項(xiàng)目都是用構(gòu)建工具寫的，比如vue-cli，create-react-app，dva-cli等，打包完每次都要把文件復(fù)制到服務(wù)器，要是后期甲方爸爸不做修改還好，要是每天給你提一個(gè)這里加個(gè)圖片，那里改下樣式的，每次都是npm run build，然后打開服務(wù)器，上傳。。。很累，也很煩。
其實(shí)像以上那種構(gòu)建工具生成的項(xiàng)目里可以再搭配gulp一起使用，實(shí)現(xiàn)打包好項(xiàng)目后自動(dòng)上傳至服務(wù)器，
先安裝2個(gè)依賴包：

npm install gulp gulp-sftp --save-dev

然后在項(xiàng)目根目錄下新建gulpfile.js文件（gulp的默認(rèn)入口文件）

var gulp = require('gulp');
var sftp = require('gulp-sftp');

gulp.task('server', function () {
  return gulp.src('./dist/**/*')
    .pipe(sftp({
      host: '192.168.1.111',
      port:22,
      user: 'root',
      pass: '123456',
      remotePath:'/var/cjy/home'
    }));
});

如上，配置一個(gè)簡(jiǎn)單的任務(wù)，任務(wù)配置參數(shù)自行百度gulp-sftp這個(gè)插件，文檔寫的很詳細(xì)了。
之后再在package.json里面配置一條命令"upload": "node build/build.js && gulp"

"scripts": {
    ...,
    "server": "roadhog build && gulp server"
  },

如上，這樣如果想打包上傳直接npm run upload就好了。
注：gulp4.0需要更換gulp-sftp-up4這個(gè)插件