从零开始开发自己的脚手架工具cli系列:实现代码压缩上传下载

142 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第25天,点击查看活动详情

压缩js使用的依赖的使用

image.png

压缩js

js压缩代码使用的依赖:

uglify-es: 压缩js html-minifier: 压缩html文件 clean-css: 压缩css文件

  1. 生成minify压缩命令方法如下:
const fs = require('fs-extra'); // 文件处理器
const path = require('path'); // 文件路径,压缩需要获取文件路径
const glob = require('glob');
const UglifyJS = require('uglify-es'); // js压缩依赖包
const HTMLMinifier = require('html-minifier'); // html压缩依赖包


function minify(srcfolder, outfolder) {
  console.log("srcfolder", srcfolder)
  console.log("outfolder", outfolder)
  const srcPath = path.resolve(process.cwd(), srcfolder);
  const buildPath = path.resolve(process.cwd(), outfolder);
  //  将源码目录复制到新目录中
  fs.copySync(srcPath, buildPath, {
    overwrite: true,
    errorOnExist: false,
  });

  //  压缩SDK目录文件
  //  压缩JS文件
  const jsFiles = glob.sync('**/*.js', {
    cwd: buildPath,
  });
  jsFiles.forEach((file) => {
    const srcFile = path.join(buildPath, file);
    console.log('minify>', srcFile);
    fs.outputFileSync(
      srcFile,
      UglifyJS.minify(fs.readFileSync(srcFile, 'utf8'), {
        compress: {
          dead_code: true,
          drop_debugger: true,
          booleans: true,
          unused: true,
          join_vars: true
        },
        mangle: true,
      }).code,
      'utf8',
    );
  });

  //  压缩模板文件
  const tplFiles = glob.sync('**/**/*.{js}', {
    cwd: buildPath,
  });
  tplFiles.forEach((file) => {
    const srcFile = path.join(buildPath, file);
    console.log('minify>', srcFile);
    fs.outputFileSync(
      srcFile,
      HTMLMinifier.minify(fs.readFileSync(srcFile, 'utf8'), {
        removeComments: true,
        collapseWhitespace: true,
        keepClosingSlash: true,
      }),
      'utf8',
    );
  });
}


module.exports = {
  minify
}

  1. 发布命令
const fs = require('fs-extra');
const path = require('path');
const archiver = require('archiver');
const { init } = require('./init');

// 发布文件夹
function releaseZip(releaseConfig, releasePath) {
// 获取文件夹相对路径
  const releaseFile = path.join(path.resolve(process.cwd(), releasePath), releaseConfig.releaseFile)
  // 生成输出路局
  const buildPath = path.resolve(process.cwd(), releaseConfig.srcPath)
  console.log('buildPath', buildPath)
  // 生成新版本压缩包
  const output = fs.createWriteStream(releaseFile);
  // 压缩为zip格式
  const archive = archiver('zip', {
    zlib: { level: 9 }, // Sets the compression level.
  });
  output.on('close', function () {
    console.log(`${archive.pointer()} total bytes`);
    console.log('archiver success finished.');
  });

  archive.pipe(output);
  archive.directory(buildPath, releaseConfig.isNotRoot ? releaseConfig.releasePkgName || 'release' : false);
  archive.finalize();
}

// 发布release方法整理
function release() {
  const configPath = path.join(path.resolve(process.cwd(), './'), 'faceid.config.js');
  if (fs.existsSync(configPath)) {
    const { releaseConfig, releasePath } = require(configPath);
    // existsSync判断当前路径是否存在,存在则直接创建
    if (fs.existsSync(releasePath)) {
      releaseZip(releaseConfig, releasePath);
    } else {
    // 不存在则先创建文件路径再发布包
      fs.mkdirSync(releasePath);
      releaseZip(releaseConfig, releasePath);
    }
  } else {
  // 初始化路径配置
    init(false,'release').then(res => {
      release(srcfolder, outfolder)
    })
  }

}

module.exports = {
  release
}
  1. 引入压缩/发布方法,创建命令 代码第一行需要加入命令声明#!/usr/bin/env node
#!/usr/bin/env node 

const { program } = require('commander'); // commander命令行创建包
const inquirer = require('inquirer'); // 询问cli创建命令包
// 处理文件
const fs = require("fs");
const { minify } = require('../lib/minify'); // 引入刚刚的代码压缩方法
const { release } = require('../lib/release'); // 引入刚刚的代码发布方法
const { init } = require('../lib/init'); // 文件路径初始化方法

// cli版本
program.version(require('../package').version, '-v, --version', '查看版本');

// 初始化
program
    .command('init')
    .description('初始化')
    .action(async () => {
        init(false);
    });

// 创建文件夹
// 创建文件夹命令行
program
    .command('create-f <folder>')
    .description('创建一个文件夹')
    .action((folder) => {
        console.log('create', folder);
        if (fs.existsSync(folder)) {
            console.log('文件夹已存在');
        } else {
            fs.mkdirSync(folder);
            console.log('文件夹创建成功');
        }
    });

// minify压缩命令创建
program
    .command('minify')
    .description('压缩')
    .option('-s,--srcfolder <srcfolder>', '待压缩文件夹路径')
    .option('-o,--outfolder <outfolder>', '压缩输出文件夹路径')
    .action((res) => {
        const { srcfolder, outfolder } = res;
        minify(srcfolder, outfolder);
    });


// release发布打包命令
program
    .command('release')
    .description('打包文件')
    .option('-s,--srcfolder <srcfolder>', '待打包文件夹路径')
    .option('-o,--outfolder <outfolder>', '打包输出文件夹路径')
    .action(async (res) => {
        const { srcfolder, outfolder } = res;
        release(srcfolder, outfolder);
    });

// 处理命令行输入的参数
program.parse(process.argv);