xes-wltf

A simple CLI for scaffolding projects.

Usage no npm install needed!

<script type="module">
  import xesWltf from 'https://cdn.skypack.dev/xes-wltf';
</script>

README

xes-cli

前端全局脚手架工具.

npm version

参考网址

项目脚手架安装说明

$ npm install -g xes-cli

常规使用

初始准备：

1. 在 git 上面新建一个仓库
2. 通过 git clone git地址 将项目下载到本地
3. cd 进入项目文件夹

// 选择项目脚手架模板方式
$ xes init

// 快捷拉取脚手架方式
$ xes init <template-name>

Example:

$ xes init vue

个人本地新增项目脚手架模板

  • 因项目工具模板为内部项目，故需要添加为项目开发者，且通过 ssh免密方式才可拉取项目代码。
    个人开发者可以通过 xes add 命令添加自己的项目脚手架模板，拉取代码不受限制,。
$ xes init [templateName]         // 通过 xes init + 脚手架名称 来拉取对应项目模板代码.
$ xes show                        // 显示所有脚手架模板
$ xes add                         // 添加新的脚手架模板
$ xes remove                      // 删除指定的脚手架模板
$ xes update                      // 升级全局的 xes-cli 到最新版本
$ xes tree [level] [ignoreFile]   // 自动化文件目录结构生成
$ xes imageMin -k [tinyKey] -p [imagePath] -o [outPath]  // TinyPNG图片压缩工具
  • 新增 xes imageMin 使用说明:
$ xes imageMin                  // 直接压缩当前文件夹下所有图片，并覆盖原图    
$ xes imageMin  -k 'tinyKey'    // 首次使用需设置 TinyPNG 的key, 会自动保存到配置文件    
$ xes imageMin  -p './images'   // 指定需要压缩的图片文件夹，使用相对路径   
$ xes imageMin  -o './output'   // 指定压缩后的图片保存位置，保留原图   
$ xes imageMin  -f './images/demo.png' // 单独压缩某一张图片，写相对路径

参数说明：

  • 所有参数可级联使用，依次在后面添加即可(文件夹会忽略 node_modules ，防止误操作)

  • -k, --key [key] ： TinyPNG 的key，免费的每个月可压缩 500张

  • -p, --path [path]： 指定需要压缩的图片文件夹，使用相对路径 ，会遍历内部所有文件及文件夹

  • -o, --out [path]： 指定压缩后的图片保存位置，目录结构与压缩文件夹完全一致

  • -f, --file [path]： 单独压缩某一张图片 ，相对路径

  • xes tree 使用说明:

$ xes tree                      // 自动化文件目录结构生成     
$ xes tree  1                   // 只遍历第一级文件目录     
$ xes tree  0  'docs|test'      // 需要忽略的文件夹或者文件 以 '|' 来链接

注：

  • level： 变量目录的深度，初始值 0，默认遍历全部目录

  • ignoreFile：需要忽略的文件夹或者文件，默认已忽略 node_modules、dist 和 特殊字符开头的文件(例 . )

  • 添加项目脚手架模板相关参数说明

{
  "short": "vue",                                        // 项目脚手架仓库名称简写
  "value": "xes-template-vue",                           // 项目脚手架仓库名称
  "name": "通用@vue/cli 3移动端模板，不带vuex",             // 项目脚手架在 init 显示的名称 
  "description": "移动端脚手架工具，采用 @vue/cli 3 框架",   // 项目脚手架的相关描述
  "gitUrl": "https://github.com/liuyun012/Js_frame.git"  // 项目脚手架的git 仓库地址
},