一个敕令完成[打包+同步七牛cdn+上传服务器]

2024年1月26日 185次阅读 来源: 独木桥先生

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就好了

    原文作者：独木桥先生
    原文地址: https://segmentfault.com/a/1190000013239116
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞