@julylb/cli
simple cli
Last updated 3 months ago by julylb .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @julylb/cli -g
SYNC missed versions from official npm registry.

l-cli

集成前端构建相关功能的 cli 工具,全局安装之后以 l-cli 命令执行

安装

# install
npm install @julylb/cli -g

功能介绍

# 查看使用帮助
l-cli -help

## 使用说明
Usage: l-cli [options] [command]

Options:
  -V, --version                     output the version number
  -h, --help                        output usage information

Commands:
  start                             修改package.json集成pre-commit钩子进行Eslint、prettier代码验证
  lint                              添加Eslint、Prettier代码检测
  mock <dir> [port]                 在指定端口启动mock服务,默认端口=8000
  tinypng [pattern] [suffix]        匹配图片进行压缩处理,默认添加后缀_tiny
  rmsuffix [pattern] [suffix]       去除tinypng产生的后缀,默认去除_tiny
  webp [pattern] [stuff] [quality]  将图片格式转换为webp
  px2rem [pattern] [ratio]          css单位 px转化为rem, 默认ratio=100, 100px => 1rem
  rem2px [pattern] [ratio]          css单位 rem转化为px, 默认ratio=100, 1rem => 100px
  new [dir]                         新建样本文件

添加pre-commit

$ l-cli start

修改当前执行路径下的package.json的内容文件添加pre-commit,来配合Eslint、Prettier进行代码检测。

添加合并配置如下:

{
  'husky': {
    'hooks': {
      'pre-commit': 'lint-staged'
    }
  },
  'lint-staged': {
    '*.{js,vue,jsx,ts}': 'prettier --write *.{js,vue,jsx,ts} && eslint --fix'
  },
  'devDependencies': {
    'husky': '^3.0.0',
    'lint-staged': '^10.0.7'
  }
}

添加Eslint、Prettier配置

在当前执行路径下的生成Eslint、Prettier的相关配置文件(可选择),Eslint配置采用了eslint-config-alloy的配置,支持4种项目类型:Javascript、Vue、React、Typescript

$ l-cli lint

eslint-config-alloy项目地址

mock服务

$ l-cli mock  [目录]  <端口默认8000>

在指定目录下的启动mock服务。进行接口 mock 时,只需要在指定目录下新建 json 文件。json文件内容对应接口返回内容,json文件名会按照一定规则转换为接口名, 转换规则为json文件名中的 _ 替换为 /, 如: api_userinfo.json => /api/userinfo

$ l-cli mock './test/mock' 8000
# 在test/mock目录下启动8000端口的mock服务 
# ./test/mock/hello_json =>  http://localhost:8000/hello/world

图片压缩

使用TinyPng Api 进行图片压缩,压缩后的图片会添加_tiny的默认后缀

$ l-cli mock <glob匹配规则> [图片后缀]

$ l-cli tinypng '**/*.{jpg,png}'
# 使用tinypng Api进行图片压缩  1.png => 1_tiny.png

去除后缀

去除压缩图片产生的默认后缀_tiny

$ l-cli rms <glob匹配规则> [图片后缀]

$ l-cli rms '**/*.{jpg,png}'
# 1_tiny.png => 1.png

px 和 rem 互相转换

对文件中的px和rem单位进行互相转换

$ l-cli mock <glob匹配规则> [转换比例]

$ l-cli px2rem '**/*.css'
# px转换为rem, 默认转换比例为100, 100px => 1rem

$ l-cli rem2px '**/*.css'
# rem转换为px, 默认转换比例为100, 1rem => 100px

图片转webp格式

将图片格式转换为webp,默认压缩质量为80(max=100) 1.png => 1.webp

$ l-cli webp <glob匹配规则> [转换比例]

$ l-cli webp '**/*.png'

Current Tags

  • 1.1.1                                ...           latest (3 months ago)

12 Versions

  • 1.1.1                                ...           3 months ago
  • 1.1.0                                ...           3 months ago
  • 1.0.9                                ...           3 months ago
  • 1.0.8                                ...           3 months ago
  • 1.0.7                                ...           3 months ago
  • 1.0.6                                ...           3 months ago
  • 1.0.5                                ...           3 months ago
  • 1.0.4                                ...           3 months ago
  • 1.0.3                                ...           3 months ago
  • 1.0.2                                ...           3 months ago
  • 1.0.1                                ...           4 months ago
  • 1.0.0                                ...           4 months ago
Maintainers (1)
Downloads
Today 12
This Week 12
This Month 13
Last Day 0
Last Week 0
Last Month 0
Dependencies (20)
Dev Dependencies (6)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |