一個命令完成[打包+同步七牛cdn+上傳伺服器]

獨木橋先生發表於2018-02-09
伺服器

webpack+gulp+qshell+npm-scripts實現一個命令完成[打包+同步cdn+上傳伺服器]

說明

由於我們用的七牛雲端儲存，所以cdn也是走的七牛，所以並不適用於其他的cdn，但是思路可以借鑑

打包

打包目前我這邊用的是webpack，網上已經有很多文章了，這裡就不作過多闡述了，只是說一下publicPath這個引數，如果要做cdn同步肯定是要配置這個引數的，目前我是這樣配置的：

http://youCdnPath/${process.env.npm_package_name}/
複製程式碼

上面的process.env.npm_package_name就是你packge.json裡面的name欄位

上傳資源到伺服器

這塊的實現我用的是gulp配合gulp-ssh來實現的，會先刪除現有檔案然後上傳，不會由於檔案指紋變動導致檔案的堆積，然後所有的靜態資源都走的cdn，所以，只上傳了dist目錄下不包括static目錄的檔案，具體配置如下：

/*
  yarn add gulp gulp-ssh
 */
const gulp = require('gulp')
const GulpSSH = require('gulp-ssh')
// 需要上傳到伺服器的路徑
const remotePath = '/home/wwwroot/default/hyan_weixin/public/pages/h5/2018/0125zaosangrenhe'
const config = {
  ssh: { // 正式
    host: 'xx.xx.xx.xx',
    port: 22,
    username: 'root',
    password: 'xxxxxxxx'
  },
  remotePath: remotePath,
  commands: [
    // 刪除現有檔案
    `rm -rf ${remotePath}`
  ]
}
let gulpSSH = new GulpSSH({
  ignoreErrors: false,
  sshConfig: config.ssh
})
/**
 * 上傳前先刪除伺服器上現有檔案...
 */
gulp.task('execSSH', () => {
  console.log('刪除伺服器上現有檔案...')
  return gulpSSH.shell(config.commands, {filePath: 'commands.log'})
      .pipe(gulp.dest('logs'))
})
/**
 * 上傳檔案到伺服器
 */
gulp.task('deploy', ['execSSH'], () => {
  console.log('2s後開始上傳檔案到伺服器...')
  setTimeout(() => {
    return gulp.src(['./dist/**', '!./dist/static/**'])
        .pipe(gulpSSH.dest(config.remotePath))
  }, 2000)
})

複製程式碼

同步靜態資源到cdn

這塊用的到是我自己開發的一個npm外掛qiniu-qupload，配置起來也很方便，這段程式碼我放在./scripts/cdn.js目錄下，具體內容如下：

const qiniuUploader = require('qiniu-qupload')
const path = require('path')
const qnConf = {
  "ak"            : "youAK",
  "sk"            : "youSK",
  "src_dir"       : `${path.resolve(process.cwd(), './dist/static').replace(/\\/g, '\\')}`,
  "bucket"        : "youBucket",
  "key_prefix"    : "11test/static/",
  "overwrite"     : true,
  "rescan_local"  : true,
  "log_file"      : "qnupload.log",
  "file_type"     : 0
}
qiniuUploader(qnConf)
複製程式碼

把上面對應的欄位換成你自己的七牛的配置就行了，一般這些引數就可以了，另外，需要特別說明一下src_dir這個引數，mac和windows不一樣，上面的為windows平臺的示例，mac應該為path.resolve(process.cwd(), './test')但是我沒驗證，具體說明和其他完整的配置引數可參考qshell-qupload官方文件

注意：qiniu-qupload外掛依賴於七牛的命令列工具qshell，所以需要先安裝qshell

整合打包，同步cdn，上傳伺服器為一個命令

這一步就比較簡單了，直接在package.json裡面的scripts欄位加個命令就行了，具體如下：

{
  "name": "11test",
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "deploy": "gulp deploy",
    "build-cdn-deploy": "npm run build && node scripts/cdn.js && npm run deploy"
  }
}
複製程式碼

然後直接執行npm run build-cdn-deploy就行了

相關文章