gulp学习

[mwjuan]

是什么

gulp 是一个项目开发的自动化打包构建工具，基于node环境来运行

能做什么

• 文件压缩合并
• 语法转换
• 公共文件抽离

常用命令

• series(task1,task2)：串行执行任务
• parallel(task1,task2)：并行执行任务
• src：读取流文件
• mustache：拿到数据渲染
• dest：写入流文件
• cwd：文件相对路径
• gulp [taskName]：执行指定任务，taskName为空则执行默认任务，需通过exports.default指定默认任务

自动化打包过程解析

const fs = require('fs-extra');
const { src, dest, series } = require('gulp');
const shelljs = require('shelljs');
const mustache = require('gulp-mustache');
const pkg = require('./package.json');

let outputFileName = `${pkg.name}-${pkg.version}.deb`;

// 清除编译文件
async function clean() {
  shelljs.exec('npx rimraf dist');
  shelljs.exec('npx rimraf backend/dist');
  shelljs.exec('npx rimraf backend/logs');
  shelljs.exec('npx rimraf web/build');
}

// 拷贝项目文件到服务器对应位置
async function prepare() {
  await new Promise((resolve, reject) => {
    // 相对目录./setup/DEBIAN下的所有文件，结合pkg中的数据，拷贝到./dist/image/DEBIAN中，完成后调用reslove
    src('./setup/DEBIAN/**').pipe(mustache(pkg)).pipe(dest('./dist/image/DEBIAN')).on('end', resolve);
  });

  await new Promise((resolve, reject) => {
    src('./setup/nginx/**').pipe(dest('./dist/image/app/loghub/nginx')).on('end', resolve);
  });

  await new Promise((resolve, reject) => {
    src('./setup/config/**').pipe(dest('./dist/image/etc/loghub')).on('end', resolve);
  });

  await new Promise((resolve, reject) => {
    src('./backend/dist/**').pipe(dest('./dist/image/app/loghub/service')).on('end', resolve);
  });

  await new Promise((resolve, reject) => {
    src('./web/build/**').pipe(dest('./dist/image/app/loghub/app')).on('end', resolve);
  });
}

// 编译文件
async function build() {
  // sync service version
  let servicePackagePath = './backend/package.json';
  let servicePackage = require(servicePackagePath);
  servicePackage.version = pkg.version;
  // 将项目package.json中的版本号写入backend的package.json中
  await fs.writeJson(servicePackagePath, servicePackage, { spaces:  2});

  // backend 安装依赖、编译，并且不输出安装日志
  shelljs.exec('yarn --cwd ./backend > /dev/null');
  shelljs.exec('yarn --cwd ./backend build > /dev/null');

  // web
  shelljs.exec('yarn --cwd ./web > /dev/null');
  shelljs.exec('yarn --cwd ./web build > /dev/null');
}

// thin-package (without node_module)
async function package() {
  // 运行环境判断，如果是macos、ios则需要借助docker打包成deb文件
  if (process.platform === 'darwin') {
    let cmd = `dpkg -b /app/image /app/${outputFileName} > /dev/null`;
    shelljs.exec(`docker run --rm -v $(pwd)/dist:/app ubuntu:20.04 bash -c '${cmd}'`);
  } else {
    shelljs.exec(`dpkg -b ./dist/image ./dist/${outputFileName}`);
  }
}

exports.clean = clean;
exports.prepare = prepare;

exports.build = series(clean, build);
exports.package = series(prepare, package);

exports.default = series(clean, build, prepare, package);

相关文件目录

• config
  存放backend的默认配置
• DEBAIN
  固定目录，包含文件拷贝、nginx写入系统并reload的命令
• nginx
  存放web访问的nginx配置

安装deb包

执行以下命令即可解压安装deb，写入pm2，需手动安装node_module
dpkg -i deb文件安装deb文件