fe-cli

一个 cli 工具，集成各种前端开发需要用的功能，持续迭代中!!!,欢迎贡献想法或者功能。

简体中文 ｜ English

目录

• 安装
• 视频切片
• 图片压缩
• 展示文件diff
• 获取本机IP
• URL转qrcode

安装

$ npm i @fe-go/fe-cli -g

视频切片

基于 HTTP Live Streaming 通过 ffmpeg 将视频分割为多份以达到视频秒开的目的。

了解更多看这里视频秒开操作指南

前提本机需要安装 ffmpeg （70多M实在难以内置） 推荐通过 homebrew 安装

• 安装 homebrew $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
• 安装 ffmpeg $ brew install ffmpeg

fe hls <file.mp4> <outdir>

• file.mp4 切片的mp4文件
• outdir 输出路径

示例:

fe hls test.mp4 ./

图片压缩

压缩 .png .jpg .jpeg 图片,借鉴super-tinypng 调用tinypng 进行图片压缩。

$ fe tinypng <src> [dest]

• src 压缩图片所在目录或者具体文件路径，自动寻找目录中 .png .jpg .jpeg 图片(src/*.{jpg,png.jpeg})，但是不进行深层遍历。
• dest 图片输出目录，可选参数默认值. ，当dest 为默认值时为了防止直接覆盖源文件，后缀名前会拼接.min

示例：

• $ fe tinypng images outdir
• $ fe tinypng images
• $ fe tinypng xx.png outdir

展示文件diff

展示两个文件间的diff

$ fe diff <file1> <file2> --code

• code 当电脑中已经安装了vscode并且code命令已经添加到环境变量中就可以使用vscode显示文件DIFF。

示例：

// example1.js
function example(firstName, lastName) {
  console.log(firstName + " " + lastName)
}

// example2.js
function example(firstName, lastName) {
  console.log('He/She is: ')
  console.log(firstName + "/" + lastName)
}

$ fe diff example1.js example2.js

结果

  function example(firstName, lastName) {
-   console.log(firstName + " " + lastName)
+   console.log('He/She is: ')
  console.log(firstName + "/" + lastName)
  }

$ fe diff file1 file2 --code

iconfont 转化

$ fe iconfont <src> [dest]

• src iconfont 源文件目录
• dest 输出路径

去掉iconfont中冗余的引用资源,将需要引用的.ttf资源自动转化为base64,简化 iconfont 引入方式。

转化前：@font-face如下依照浏览器兼容情况我们只要保留ttf就ok了。

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1557322756059'); /* IE9 */
  src: url('iconfont.eot?t=1557322756059#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,........') format('woff2'),
  url('iconfont.woff?t=1557322756059') format('woff'),
  url('iconfont.ttf?t=1557322756059') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1557322756059#iconfont') format('svg'); /* iOS 4.1- */
}

转化后：如下去掉冗余部分，并将ttf转为base64

@font-face { 
  font-family: "iconfont";
  src: url('data:font/ttf;charset=utf-8;base64,....') format('truetype');
  }

获取本机IP

通过fe IP命令可以获取本机IP

URL转qrcode

fe qr <URL> --small

• <URL> 被转换的URL地址
• -S/--small 可选值表示得到小尺寸的二维码

示例：

fe qr www.github.com

fe qr www.github.com -small / fe qr www.github.com -S