The background,

Recently, in the process of online deployment of several projects, I found that every time the package was put into the test environment or development environment, the code had to be manually packaged and then copied to the remote service file. Occasionally, it was put in the wrong place and killed by the test. Recently in the process of fishing, the use of GULp to replace my hand cheap behavior, easy to achieve packaging deployment in one step, really sweet…

Second, implementation ideas

After the completion of vUE project construction, we will generate a dist directory in the root directory of the project. We only need to upload the files in this directory to the Web container of the server to access it. All we need to do is use the command line to upload all the files in the dist directory to the corresponding directory on the server.

Three, implementation steps

NPM I gulp gulp-sftp –save-dev 2. Create the gulp configuration file gulpfile.js in the root directory of the project

const gulp = require('gulp')
const sftp = require('gulp-sftp')
gulp.task('test'.function () {
  return gulp.src('dist' + '/ * *')
    .pipe(sftp({
      host: 'IP',
      user: 'Username',
      pass: 'password',
      port: 'port', remotePath: 'server'))})Copy the code

Gulp is used to create task name test, and gulp-SFTP connection is used to upload the task name to the specified directory. Test in the code can be customized for gulp task name, or multiple tasks can be configured at the same time. 3, optimization if we directly put the server account and password directly written in the code, it is easy to seto oh! Therefore, we can create gulp-sftp configuration file. FtpPass, to ensure FTP account security, FTP account password configuration in a separate file, disable the use of version control. 4, Gulp configuration is complete, now is the package upload operation, we can add package in the package.json file

 "scripts": {
    "build": "vue-cli-service build && gulp test"."gulp": "gulp test"
  },
Copy the code

“Build “: “vue-cli-service build && gulp test” will do.