前端开发过程中经常会用到各种各样的脚手架工具npm全局工具包命令行工具,如:Vue脚手架@vue/cli、React脚手架create-react-app、node进程守卫工具pm2、本地静态服务工具serve、代码格式化工具prettier等等。因此也自行开发了一套基于nodenpm的命令行工具集,主要封装了自动化shell脚本工具和开箱即用的Vue全家桶模板工具

一、全局安装

提示: tive-cli 依赖 Node.js (>=7.x)

npm install tive-cli -g

二、Vue全家桶模板工具

1.介绍

模板工具内置了Vue2.0Vue3.0两个版本所对应的 Vue全家桶 模板,可根据项目需要自行选择使用。

  1. vue2.0+VantUI移动端模板
  2. vue3.0+vite2+VantUI移动端模板

2.使用

# 自定义目录生成
tive create <project-name> # 当前目录生成
tive create .

执行次命令后,会出现命令行交互式选择,可使用上()下()箭头进行选择,如下:

E:\dev>tive create vue3-demo
? 请选择要创建的脚手架或Demo (Use arrow keys)
> vue2.0+VantUI移动端Demo
vue3.0+vite2+VantUI移动端Demo

回车(enter)确认后,会输出:

E:\dev>tive create vue3-demo
? 请选择要创建的脚手架或Demo vue3.0+vite2+VantUI移动端Demo
{ tel: 'tive6/tive-vue3-vite-demo' }
√ tive-vue3-vite-demo 下载成功 Done. Now run: cd vue3-demo
npm install
npm start

接下来就可以按照提示的命令进行操作:

cd vue3-demo

npm install

npm start

演示Demo:

三、自动化shell脚本工具

1.介绍

脚本工具封装了两个常用的Git常用脚本命令自定义的shell脚本命令,并统计了执行时长。

2.使用

2-1.Git常用脚本命令

  1. push当前分支代码到远程仓库
tive git -b <branch> -m "commit description"  

# 例:push master分支代码到远程仓库        

例: push master分支代码到远程仓库

tive git -b master -m "master commit"

相当于依次执行了以下6个命令:

git status
git add .
git commit -m "master commit"
git pull origin master
git push origin master
git status
  1. 当前分支合并到目标分支并push到远程仓库
tive git -b <current branch> -t <target branch> -m "commit description"

例: 将dev分支合并到test分支并push到远程仓库

tive git -b dev -t test -m "dev merge"

等价于依次执行了以下10个命令:

git status
git add .
git commit -m "dev merge"
git pull origin dev
git checkout test
git pull origin test
git merge --no-ff -m "dev merge into test" dev
git push origin test
git checkout dev
git status

2-2.自定义的shell脚本命令

需要在项目根目录下新建tive.config.js,和package.json同级

// tive.config.js

module.exports = {
shell: [
'node -v',
'npm -v',
'ls',
'git status',
]
}

提示:

  1. shell命令可以根据项目需要灵活搭配,如:git命令、node命令、npm脚本命令、shell脚本命令等等。
  2. 前端项目可以在package.json文件的scripts中配置对应的npm命令。配置例如:
{
"scripts": {
"start": "npm run serve",
"serve": "vue-cli-service serve",
"dev": "nodemon --watch vue.config.js --exec \"npm start\"",
"build": "vue-cli-service build",
"git": "tive git -c tive.config.js",
},
}

现在就可以愉快的使用 npm run git 命令来执行脚本了。

npm run git

输出:

E:\dev\vue-demo>npm run git

> vue-demo@1.0.0 git
> tive git -c tive.git.config.js - Doing ...
┍-------------------- node -v --------------------┑ [command]=> node -v (成功)
[code]=> 0
[output]=>
v12.5.0 ┕-------------------- node -v --------------------┙
- Doing ...
┍-------------------- npm -v --------------------┑ [command]=> npm -v (成功)
[code]=> 0
[output]=>
7.17.0 ┕-------------------- npm -v --------------------┙
\ Doing ...
┍-------------------- ls --------------------┑ [command]=> ls (成功)
[code]=> 0
[output]=>
babel.config.js
node_modules
package.json
public
README.md
src
tive.config.js
vue.config.js ┕-------------------- ls --------------------┙
| Doing ...
┍-------------------- git status --------------------┑ [command]=> git status (成功)
[code]=> 0
[output]=>
On branch dev
nothing to commit, working directory clean ┕-------------------- git status --------------------┙
√ Run successfully DONE End of shell script in 935ms

四、tive-cli其他命令

  1. 查看 tive 的帮助信息
tive
# or
tive -h
  1. 查看 tive create 的帮助信息
tive create
# or
tive create -h
  1. 查看 tive git 的帮助信息
tive git
# or
tive git -h

五、TODO

  • tive ssh命令:基于node封装一套CI/CD命令行工具,做到一行命令完成项目打包、zip压缩、文件上传、解压上线、重启服务等等一系列操作。
  • 规划中...

欢迎访问:天问博客

基于node和npm的命令行工具——tive-cli的更多相关文章

  1. 微软开放技术发布针对 Mac 和 Linux 的更新版 Azure Node.JS SDK 和命令行工具

    发布于 2013-12-04 作者 Eduard Koller 这次为我们使用Linux 的朋友带来了更多关于部署云上虚拟机的消息.今天,微软开放技术有限公司 (MS Open Tech),想与大家分 ...

  2. 『.NET Core CLI工具文档』(一).NET Core 命令行工具(CLI)

    说明:本文是个人翻译文章,由于个人水平有限,有不对的地方请大家帮忙更正. 原文:.NET Core Command Line Tools 翻译:.NET Core命令行工具 什么是 .NET Core ...

  3. node.js如何制作命令行工具(一)

    之前使用过一些全局安装的NPM包,安装完之后,可以通过其提供的命令,完成一些任务.比如Fis3,可以通过fis3 server start 开启fis的静态文件服务,通过fis3 release开启文 ...

  4. Apache Kafka系列(二) 命令行工具(CLI)

    Apache Kafka命令行工具(Command Line Interface,CLI),下文简称CLI. 1. 启动Kafka 启动Kafka需要两步: 1.1. 启动ZooKeeper [roo ...

  5. node命令行工具之实现项目工程自动初始化的标准流程

    一.目的 传统的前端项目初始流程一般是这样: 可以看出,传统的初始化步骤,花费的时间并不少.而且,人工操作的情况下,总有改漏的情况出现.这个缺点有时很致命. 甚至有马大哈,没有更新项目仓库地址,导致提 ...

  6. Gitbook 命令行工具

    1.Gitbook 简介 1.1 Gitbook GitBook 是一个基于 Node.js 开发的命令行工具,使用它可以很方便的管理电子书,GitBook 是目前最流行的开源书籍写作方案. 使用 G ...

  7. 如何用node编写命令行工具,附上一个ginit示例,并推荐好用的命令行工具

    原文 手把手教你写一个 Node.js CLI 强大的 Node.js 除了能写传统的 Web 应用,其实还有更广泛的用途.微服务.REST API.各种工具……甚至还能开发物联网和桌面应用.Java ...

  8. 认识Web前端、Web后端、桌面app和移动app新开发模式 - 基于Node.js环境和VS Code工具

    认识Web.桌面和移动app新开发模式 - 基于Node.js环境和VS Code工具 一.开发环境的搭建(基于win10) 1.安装node.js和npm 到node.js官网下载安装包(包含npm ...

  9. 使用命令行工具npm新创建一个vue项目

    使用vue开发项目的前期工作可以参考前面写的:  Vue环境搭建及node安装过程整理 Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的 ...

随机推荐

  1. VUE页面实现加载外部HTML方法

    前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的.所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件.需要搞点事情以达到想要的效果.本文主要和大家介绍VU ...

  2. 【编程思想】【设计模式】【创建模式creational】抽象工厂模式abstract_factory

    Python版 https://github.com/faif/python-patterns/blob/master/creational/abstract_factory.py #!/usr/bi ...

  3. 【Linux】【Services】【NetFileSystem】Samba

    1. 简介 1.1. 背景:case is initiative by 某windows无良人事,需求是需要一整块4T的硬盘,由于ESXi5最大支持一块盘是2T大小,而且不可以使用windows动态卷 ...

  4. linux 操作只读变量

    由于该操作需要用到 gdb,所以需要先 安装好 gdb 1. 查询是否有gdb: 2. 如果没有,需要先执行 yum install gdb 命令进行安装 3. 定义 只读变量 abc 并打印值: a ...

  5. HashMap、ConcurrentHashMap对比

    1.hashmap的put的原理,hashmap的扩容及计算槽的算法,线程安全的hashtable.ConcurrentHashMap的区别是什么 1.1 hashMap的put原理 什么时候变成红黑 ...

  6. Redis | 第12章 Sentinel 哨兵模式《Redis设计与实现》

    目录 前言 1. 启动并初始化 Sentinel 2. Sentinel 与服务器间的默认通信 2.1 获取主服务器信息 2.2 获取从服务器信息 2.3 向主服务器和从服务器发送信息 3. 接受来自 ...

  7. 联盛德 HLK-W806 (八): 4线SPI驱动SSD1306/SSD1315 128x64 OLED液晶屏

    目录 联盛德 HLK-W806 (一): Ubuntu20.04下的开发环境配置, 编译和烧录说明 联盛德 HLK-W806 (二): Win10下的开发环境配置, 编译和烧录说明 联盛德 HLK-W ...

  8. SQL 注入基础

    SQL注入 SQL注入是服务器端未严格校验客户端发送的数据,而导致服务端SQL语句被恶意修改并成功执行的行为. 本质:把用户输入的数据当作代码执行.任何和数据库产生交互的地方便有可能存在注入. SQL ...

  9. CF248A Cupboards 题解

    Content 在一个走廊上有 \(2n\) 扇门,排成两列分居左右.有个人很无聊,随意地开关了一些门,使得这些门看起来十分乱.现在请开关一些门,使得这些门恢复原来整齐的状态(要么都开.要么都关.要么 ...

  10. Python3 中bytes数据类型深入理解(ASCII码对照表)

    bytes的来源 bytes 是 Python 3.x 新增的类型,在 Python 2.x 中是不存在的. bytes 的意思是"字节",以字节为单位存储数据.而一个字节二进制为 ...