发布静态文件到服务器上的简化操作

Of course, you can use a client tool such as FileZilla to deploy your static files to the server. But you will certainly feel tired in the end if you need to repeat this work almost every day in case your target server is for test purpose. For me, I used webpack for local development, when I want to deploy something to the test server, I need to execute command “npm run build” first and then “npm run deployToTestServer”, it’s already very convenient, but things can be even convenient with only one command needed to type ^_^.

In your project root path, create a file named gulpfile.js, then type something like this:

const gulp = require('gulp')
const scp = require('gulp-scp2')

gulp.task('deployToTestServer', () => {
  return gulp.src('dist/**/*.*')
    .pipe(scp({
      host: '111.111.11.1',
      username: 'username',
      password: 'password',
      dest: '/usr/tomcat/apache-tomcat/webapps/wechat/static/demo/dist/'
    }))
    .on('error', e => {
      console.log(e)
    })
})

Then in you package.json file, add a script:

"scripts": {
  "deploy": "gulp deployToTestServer",
  // other code
},

With the above preparation, you can now type “npm run deploy” to deploy your files under local dist folder to remote server, and these files will be under the path /usr/tomcat/apache-tomcat/webapps/wechat/static/demo/dist/.

One step further, let’s install a node package called “npm-run-all” with command like:

npm i -D npm-run-all

Now let assume you use command like “npm run build” to generate your static files. Modify the package.json file and add a new line in “scripts”:

"scripts": {
  "buildAndDeployToTestServer": "npm-run-all --serial build deploy",
  "deploy": "gulp deployToTestServer",
  "build": "node build/build.js",
  // ... other code
},

See the script “buildAndDeployToTestServer”, right? The argument “–serial” after “npm-run-all” will enable you to run several tasks one after another. In the above example, if you execute “buildAndDeployToTestServer”, the result will be the same as executing  “npm run build” first, waiting for its completion, and executing “npm run deploy”.

That’s all.

Yakima,

Nov. 17, 2017, in Shanghai, China.