基于vue-cli搭建一个多页面应用(五)--自动化部署

[tonyfree]

本地部署

打包测试或者上线发布，都需要把打包好的代码上传到服务器，重复手动的事情都可以通过代码来解决。

本文以gulp为例，根据不同的协议选用不同的插件：SFTP--gulp-sftp、FTP--vinyl-ftp，下面以SFTP协议来配置

1.安装相应的插件

$ npm install gulp -g
$ npm install gulp gulp-sftp -D

2.在项目根目录下的project.config.js中添加配置：

var sftpConfig = {
  host: 'https://github.com/tonyfree',
  port: 22,
  user: 'tony',
  pass: '123',
  remotePath: '/opt/html/projectName'
}

module.exports = {
  ......
  sftpConfig: sftpConfig
}

3.在项目根目录下创建gulpfile.js

var gulp = require('gulp')
var sftp = require('gulp-sftp')
var sftpConfig = require('./project.config.js').sftpConfig

gulp.task('upload', function() {
  return gulp.src('dist/**')
    .pipe(sftp(sftpConfig))
})

4.在package.json中配置scripts：

  "scripts": {
    ......
    "build-only": "node build/build.js"
    "build": "node build/build.js && gulp upload",
    "upload": "gulp upload"
  },

5.执行如下命令后,会先打包然后上传到服务器

$ npm run build

6.上面上传到服务器一般都是内部测试，如果需要发布到正式环境要把dist文件夹发给运维人员，使用node-archiver插件把dist文件夹压缩成zip文件
build/zip.js

var fs = require('fs')
var archiver = require('archiver')
var output = fs.createWriteStream(require('path').join(__dirname,'../') + '/haotaitai.zip')
var archive = archiver('zip', {
    zlib: { level: 9 } // Sets the compression level.
})

archive.pipe(output)

archive.directory(require('path').join(__dirname,'../dist/'))

archive.finalize()

7.修改script命令：

  "scripts": {
    ......
    "build-publish": "node build/build.js && node build/zip.js"
  },

8.静态资源托管和部署，可以使用第三方平台：Surge、Firebase、Netlify

服务器端部署

（待续）

本系列文章：

1. 基础结构的搭建
2. postcss插件和css预编译配置
3. 路径别名和模块自动加载配置
4. rap自动切换配置
5. 自动化部署
6. 移动端适配方案
7. UI库的选择和使用
8. 移动调试和异常监控

[kevinZengXing]

tony老师，请问gulp-sftp中的host填的github地址为什么不行，github能作为sftp的host嘛？user和pass这些都是在哪配置的？

[tonyfree]

sftp的作用是把本地build文件上传到相应的服务器，host等信息是服务器的相关信息，github只是举例