touchr - Linux touch 命令增强版

Legend80s
232 阅读2分钟

image.png

今天在做一些基于 tailwind css UI 组件库的调研，大概有十来个组件库，需新建大量的 HTML 文件来试用，整个过程有许多重复事情，比如新建文件、写入内容、浏览器打开，能否将这些重复劳动自动化？

后续会分享下有哪些好玩的流行的 tailwind css 组件库。

Before：

  1. 📁 新建 html 文件：touch DaisyUI.html
  2. VSCode 打开：code DaisyUI.html
  3. 写入基础模板 <!DOCTYPE html>...
  4. 浏览器打开
  5. 开始写代码

After：

touchr DaisyUI.html

  1. 📁 新建 html 文件 自动🤖
  2. VSCode 打开：code DaisyUI.html 自动🤖
  3. 写入基础模板 <!DOCTYPE html>... 自动🤖
  4. 浏览器打开 自动🤖
  5. 开始写代码

也就是一行命令就完成准备工作直接上手写代码。下面我们看看这个 touchr 怎么写。

TouchR —— Linux touch 命令增强版

逐步拆解功能并实现，最后组合起来。

  1. 新建文件，直接用 touch 即可：
touch "$1"
  1. VSCode 打开（当然前提是开启了 code 全局命令）
code "$1"
  1. 写入基础模板：使用 echo 即可
echo '<!DOCTYPE html> ...' > filename
  1. 浏览器打开（Macos 使用 open）：
start filename

完整代码如下，大家可以复制后使用，使用方式可以采用 alias（详见 Windows 打造和 macOS 几乎一样的开发体验）：

# touchr **r** is for "recursive"
# 1. Create a new file under nested directory.
# @example
# touchr /path/to/file.ts -> mkdir -p /path/to && touch /path/to/file.ts
# 2. and open it in vscode
# 3. and if file name is `.html` then open it in browser.
# 4. and write into a template.
touchr() {
    mkdir -p "$(dirname "$1")" && touch "$1" && code "$1"

    # 如果文件名 `.html` 结尾则使用浏览器打开。
    if [[ "$1" == *.html ]]; then
      local name=$(basename "$1", '.html')

      echo '<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>'$name' Quick Start</title>
</head>
<body>
  <h1>'$name' Quick Start</h1>
</body>
</html>' > "$1"
      start "$1"
    fi
}

解释代码

  • mkdir -p "$(dirname "$1")"：支持即使目录不存在也能新建 touchr ./foo/bar/baz/hello.ts
  • basename "$1", '.html'：获取除了后缀的文件名，比如 basename ./foo/hello.html .html 输出 hello，然后放到模板的 title 以及 body 中，最后拼接成“<h1>Hello Quick Start</h1>”。

扩展阅读：去除文件后缀

去除文件后缀有多种方式。测试用例如下：

  • 输入 index2.html 输出 index2
  • 输入 index 输出 index
  • 输入 index-foo.html 输出 index-foo
  • 输入 foo/bar/baz/fox.html 输出 fox

最简单是使用内置方法 basename，如果知道要去除哪种文件扩展名：

remove_extension() {
    local name=$(basename "$1", '.html')  # 提取文件名（去除路径和后缀）
    echo name
}

如果无法预先知道，需分两步：

remove_extension() {
    local filename=$(basename "$1")  # 提取文件名（去除路径）
    echo "${filename%.*}"            # 去除后缀
}

参考：bash 去除文件后缀

版本 2：用 live-server 打开，达到热更新效果 🔥

只需替换一行代码即可：

- start "$1"
+ pnpx live-server "$1" # serve index.html 并在浏览器打开

可以用 npx 但更推荐 pnpx 或 bunx 后两者速度更快 🚀。

avatar
文章
阅读
粉丝