从零开始开发自己的脚手架工具cli系列：css压缩

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

css压缩工具

clean-css

安装

npm install clean-css 

压缩命令

cleancss -o style.min.css style.css

js配置

# Get the clean-css package
var cleanCSS = require('clean-css');

# Read in the source of a file or use hard-coded CSS...
var source = "body { color: red; font-weight: bold; }";

# Minify!
var minifiedCSS = cleanCSS.process(source);

压缩CSS示例：

var CleanCSS = require('clean-css');
var input = 'a{font-weight:bold;}';
var options = { /* options */ };
var output = new CleanCSS(options).minify(input);

cli工具完整代码示例

import program from 'commander'; //  子命令
import execa from 'execa'; //  cli中调用外部命令
import inquirer from 'inquirer'; //  询问
import ora from 'ora'; //  终端加载效果
import Listr from 'listr'; //  步骤
import chalk from 'chalk';　//  高亮终端打印出来的信息
import boxen from 'boxen'; //  加边框
import updateNotifier from 'update-notifier'; //  update okg
import pkg from '../package.json';
import logSymbols from 'log-symbols'; // 打印日志的特殊标志

function checkVersion() {  // 检查版本
    const notifier = updateNotifier({ pkg, updateCheckInterval: 0 });
    if (notifier.update) {
      notifier.notify();
    }
}

export function cli(args) { // 初始化命令
    checkVersion();
    // 查看version版本
    program.version(pkg.version, '-v, --version,').usage('<command> [options]');
    //  init 初始化
    //  vue 初始化
    program.version(pkg.version)
      .usage('<command> [options]') 
      .command('init', 'init')
      .command('vue', 'vue') ;
    // .parse(process.argv) ;

// 帮助文档
    program.on('--help', () => {
      console.log('  Examples:')
      console.log()
      console.log(chalk.gray('    # create a new project with an official template'))
      console.log('    $ calamus-cli init webpack my-project')
      console.log()
      console.log(chalk.gray('    # create a new project straight from a github template'))
      console.log('    $ calamus-cli init username/repo my-project')
      console.log()
    })

    //  子命令
    program
        .command('start <food>')
        .option('-f, --fruit <name>', 'Fruit to be added')
        .description('Start cooking food')
        .action(function(food, option) {
            console.log(`run start command`);
            console.log(`argument: ${food}`);
            console.log(`option: fruit = ${option.fruit}`);
        });

// 问答式命令展示
    program
        .command('ask')
        .description('Ask some questions')
        .action(async function(option) {
          const answers = await inquirer.prompt([
            {
              type: 'input',
              name: 'name',
              message: 'What is your name?'
            },
            {
              type: 'confirm',
              name: 'isAdult',
              message: 'Are you over 18 years old?'
            },
            {
              type: 'checkbox',
              name: 'favoriteFrameworks',
              choices: ['Vue', 'React', 'Angular'],
              message: 'What are you favorite frameworks?'
            },
            {
              type: 'list',
              name: 'favoriteLanguage',
              choices: ['Chinese', 'English', 'Japanese'],
              message: 'What is you favorite language?'
            }
          ]);
          
          console.log(boxen(chalk.yellow(logSymbols.success + 'your answers:' ), { padding: 1 }) , '\n', answers);
        });

    program
        .command('wait')
        .description('Wait 5 secords')
        .action(async function(option) {
          const spinner = ora('Waiting 5 seconds').start();
          let count = 5;
          
          await new Promise(resolve => {
            let interval = setInterval(() => {
              if (count <= 0) {
                clearInterval(interval);
                spinner.stop();
                resolve();
              } else {
                count--;
                spinner.text = `Waiting ${count} seconds`;
              }
            }, 1000);
          });
        });


    program
        .command('steps')
        .description('some steps')
        .action(async function(option) {
          const tasks = new Listr([
            {
              title: 'Run step 1',
              task: () =>
                new Promise(resolve => {
                  setTimeout(() => resolve('1 Done'), 1000);
                })
            },
            {
              title: 'Run step 2',
              task: () =>
                new Promise((resolve) => {
                  setTimeout(() => resolve('2 Done'), 1000);
                })
            },
            {
              title: 'Run step 3',
              task: () =>
                new Promise((resolve, reject) => {
                  setTimeout(() => reject(new Error('Oh, my god')), 1000);
                })
            }
          ]);
    
          await tasks.run().catch(err => {
            console.error(err);
          });
        });
        
    program.parse(args);
}