摘要：上次的一键打包代码并部署到服务器工具在实践过程中确实帮助艺灵节省了很多不必要的时间，但在用户体验上还有待改进。于是，艺灵先是使用了彩色日志，在视觉上做了改善。但后来工作起来还是容易忘记啥时候上传完毕，于是又在听觉上添加了自动播放音乐的功能。本地做了一个铃声库，每次上传完毕后都会随机播放一首铃声，一来做到了提醒功能，二来又可以缓解一下工作的压力，这个想法确实不错哈！

话说艺灵在3个月之前分享了一篇关于前端一键部署代码到服务器的踩坑文章。但在后面的实践过程中总觉得用户体验不是太好，然后我对上次的代码进行了改造，于是就有了今天这篇更高(niu)级(bi)的文章。

一、一键打包并上传已实现，为啥说用户体验还是不太好呢？

了解艺灵的看官都知道，在某些情况下，我是一个比较注重用户体验的人。上次我们实现了一键打包项目代码并上传到服务器，命令窗口中的日志信息全是清一色的白色。对于我来说，我能一眼知道上传结果。但对于使用者来说，并不一定能快速找到他想要的信息。于是，我的第一次改进就是：给部分重要的信息添加颜色，从视觉上改变，此次优化后在项目中的实践效果如图：在真实项目中使用彩色日志.png

经过一段时间的使用，我发现这种优化并不能起到很好的反响。于是，我又进行了第二次改进：上传完毕后播放一首本地音乐。这回我又加上了听觉上的改进，因为有时艺灵执行打包命令后就去做别的事情了，压根不会关注什么时候上传完成，但其他部门同事偶尔会过来问上传进度。所以呢，我就想出了播放音乐这个骚操作。就算我做别的事情了，只要音乐响起，那就表示项目上传完成了！播放音乐这个想法是不是很赞？！最终的效果如图：项目自动上传到服务器后播放一首随机铃声.png

好了，装逼结束，下面开始分开讲两次改进的过程，看官可以根据自己感兴趣的点来进行跳跃式阅读，但艺灵还是建议看官完整读完哦~

二、第一次改进：使用彩色日志，达到醒目效果

2.1、网上查找资料，找相关的库

在网上搜索一番后，艺灵我找到了chalk（戳我访问官方文档）这个node包，按照文档安装试了下，确实实现了不同颜色的日志信息。

需要注意的是：艺灵目前安装的4.1.2的版本。如果看官安装完成后，控制台无法变色，请设置Level的值为1以上。因为官方文档中有说明的哈，0: All colors disabled，即禁用所有颜色。如图：设置chalk.level不为0才能显示颜色.png

2.2、创建项目练练手

在系统磁盘任意目录下创建一个名为 chalk-console的目录，然后右键 - Git Base Here或使用终端命令进入此目录，接着在窗口中输入npm init并一路回车即可。此处以D盘为例，效果如图：在chalk-console目录中右键并初始化项目.png

2.3、安装 chalk 包

接着在命令窗口中输入以下代码并回车，耐心等待node包安装。

npm install chalk@4.1.2 --save-dev

2.4、配置自定义命令

接着用编辑器打开package.json这个文件，然后在script中新增一行代码，完整配置如下：

{
  "name": "chalk-console",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" &&amo; exit 1",
    "chalk": "node ./chalk-console.js" // 此行为新增，复制后请去掉注释
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chalk": "^4.1.2"
  }
}
    

2.5、新建名为chalk-console.js文件

在上面的配置中，我们自定义了一个名为chalk的命令，并指定到了当前目录下的chalk-console.js这个文件。接下来，要想实现命令行中的日志信息变色，我们就需要把前面提到的chalk运用过来。完整示例代码如下：

#!/usr/bin/env node
/*
 * @Description: 让命令行实现彩色
 * @Author: yilingsj（315800015@qq.com）
 * @Date: 2021-09-21 19:54:32
 * @LastEditors: yilingsj（315800015@qq.com）
 * @LastEditTime: 2021-09-21 20:01:39
 * @FilePath: \chalk-console\chalk-console.js
 */
const chalk = require('chalk') // 引入颜色插件
chalk.level = 1 // 不设置的话不会变色

console.log(
  '节后必跌仿佛已经成了' +
    chalk.redBright('铁律') +
    '，但我还是希望明天的' +
    chalk.red('基金') +
    '不要再' +
    chalk.greenBright('绿') +
    '下去，' +
    chalk.yellow('好吗？')
)
    

2.6、运行项目

现在在命令行窗口中输入：npm run chalk并回车即可看到部分文字变成了彩色哦！如图：在命令行中运行chalk并回车后可看到部分文字已经成了彩色.png

至此，彩色日志的方案已经分享完毕，接下来我们来说更骚的操作--- 播放音乐

三、第二次改进：上传完后自动播放音乐，来场听觉上的盛宴吧！

说真的，为了实现播放音乐的功能，艺灵我花了将近一天的功能在网上查找资料并实践。也踩了不少坑，好在最终实现了想要的功能。这里长话短说，我只放一些自己摸索时试过的一些库，有兴趣的看官可以仔细研究下。

3.1、踩过的坑

资料地址	缺点	结果
node.js 从命令行播放MP3	需要下载VCL播放器	考虑到还要额外下载软件，放弃测试
play-sound	也需要播放器支持mplayer、afplay、mpg123、mpg321、play、omxplayer、aplay、cmdmp3，示例文章：通过play-sound模块调用cmdmp3播放本地音频	考虑到还要额外下载软件，测试一半后放弃
node-mp3-player		测试失败
node.js(一) Stream 流的mp3		测试成功，手动打开浏览器
open	-	测试成功，功能更强大

接下来开始今天的主角儿了，看官别走神哈。

3.2、创建项目练练手

在系统磁盘任意目录下创建一个名为 playMusic的目录，然后右键 - Git Base Here，接着在窗口中输入npm init并一路回车即可。可参见前面的chalk-console的流程，此处不再赘述。

3.3、安装 open 包

接着在命令窗口中输入以下代码并回车，耐心等待node包安装。

npm install open@8.2.1 --save-dev

3.4、配置自定义命令

接着用编辑器打开package.json这个文件，然后在script中新增一行代码，完整配置如下：

{
  "name": "playMusic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "playMusic": "node ./playMusic.js" // 此行为新增，复制后请去掉注释
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "open": "^8.2.1"
  }
}
    

3.5、新建名为playMusic.js文件

在上面的配置中，我们自定义了一个名为playMusic的命令，并指定到了当前目录下的playMusic.js这个文件。完整示例代码如下：

#!/usr/bin/env node
/*
 * @Description: 播放本地音乐
 * @Author: yilingsj（315800015@qq.com）
 * @Date: 2021-09-21 20:52:43
 * @LastEditors: yilingsj（315800015@qq.com）
 * @LastEditTime: 2021-09-21 21:22:38
 * @FilePath: \playMusic\playMusic.js
 */
const open = require("open")
// 本地音乐地址，windows下注意双斜线
const dir = "D:\\work2020\\playMusic\\music\\恋人心.mp3"
/**
 * @author: yiling (315800015@qq.com)
 * @description: 播放音乐
 * @param {String} dir 本地音乐路径
 * @return {*}
 * @Date: 2021-09-21 21:02:43
 */
async function playMusic(dir) {
  await open(dir)
}

playMusic(dir)
    

3.6、创建音乐目录及文件

这里我在当前目录下创建了一个名为music的新目录，里面并放了3首格式为mp3的手机铃声。

3.7、运行项目

现在到了最激动人心的时刻，在命令行窗口中输入：npm run playMusic并回车，如果不出意外的话，装逼失败，成功翻车(:笑哭)！毕竟现在的电脑都不再是裸奔状态了，像什么360、腾讯管家、火绒这些安全软件多少还是能起到些作用的。

艺灵的这台电脑安装了360，此时会出现4次弹窗（2次拦截+1次播放器选择+弹出播放器），建议看官要全点击允许运行，否则下次还会弹窗提醒，弹窗会影响播放器的调用哦！第一次是360的弹窗，内容截图如下：360弹窗直接勾选并点允许运行.png 当点完允许运行后，紧接着屏幕右下角出现了第二个弹窗，这次是火绒，截图如下：火绒弹窗时也勾选并点允许.png 当点完允许后，这次才是系统播放器的弹窗。由于艺灵未设置默认播放器，所以系统会询问你。这里可以根据情况选一个，同样要勾选和点确定。系统弹窗截图如下：系统弹窗后也要勾选和点确定.png 此时，会出现第四个弹窗--音乐播放器。如果看官的电脑没有关闭声音，会立即听到音乐声哦！如图：弹出系统音乐播放器并成功播放音乐.png

因电脑而异，看官在运行上述代码后可能并不会出现太多弹窗，但只要在第一次时全勾选并确定，后面再执行命令时理论上便可直接唤醒本地音乐播放器。

3.8、优化：播放随机音乐

播放音乐的功能虽已实现，但我们还可以再继续搞事情，比如：随机播放，毕竟平时我们会有很多喜欢的歌嘛。那怎么搞呢？不要慌，我们在本地的music中多放些音乐文件，然后每次播放时搞个随机数的算法不就完事了嘛！完整代码如下：

#!/usr/bin/env node
/*
 * @Description: 随机播放本地音乐
 * @Author: yilingsj（315800015@qq.com）
 * @Date: 2021-09-21 20:52:43
 * @LastEditors: yilingsj（315800015@qq.com）
 * @LastEditTime: 2021-09-21 21:32:22
 * @FilePath: \playMusic\playMusic.js
 */
const open = require("open")
const fs = require("fs")
const path = require("path")

// 本地音乐地址，windows下注意双斜线
const dir = "D:\\work2020\\playMusic\\music"
/**
 * @author: yiling (315800015@qq.com)
 * @description: 读取文件夹下所有的文件
 * @param {String} dir 路径
 * @param {Array} filesList 存储的数组
 * @return {*}
 * @Date: 2021-09-18 13:55:54
 */
async function readFileList(dir, filesList = []) {
  const files = fs.readdirSync(dir)
  console.log("文件名：", files)
  files.forEach((item, index) => {
    let fullPath = path.join(dir, item)
    const stat = fs.statSync(fullPath)
    if (stat.isDirectory()) {
      readFileList(path.join(dir, item), filesList) // 递归读取文件
    } else {
      filesList.push(fullPath)
    }
  })
  return filesList
}
/**
 * @author: yiling (315800015@qq.com)
 * @description: 取两个数之间的随机数
 * @param {Number} min 最小值
 * @param {Number} max 最大值
 * @return {*}
 * @Date: 2021-09-18 14:05:34
 */
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min) + min)
}
/**
 * @author: yiling (315800015@qq.com)
 * @description: 获取音乐
 * @param {String} dir 本地音乐目录
 * @return {*}
 * @Date: 2021-09-18 14:12:16
 */
async function getMusic(dir) {
  const musicList = await readFileList(dir)
  const index = getRandomNumber(0, musicList.length)
  const src = musicList[index]
  const name = src.substr(src.lastIndexOf("\\")).replace("\\", "")
  console.log("当前播放的铃声是：", name)
  return src
}
/**
 * @author: yiling (315800015@qq.com)
 * @description: 播放音乐
 * @param {String} dir 本地音乐目录
 * @return {*}
 * @Date: 2021-09-18 14:13:13
 */
async function playMusic(dir) {
  const src = await getMusic(dir)
  await open(src)
}
playMusic(dir)

视频演示：视频演示↓↓↓：node实现随机播放铃声.mp4 （友情提示：点击上面的图片即可播放视频）

四、源码下载

为了方便看官研究代码，艺灵已经将相关文件打包到了网站上，有需要的看官可以点击右侧链接进行免费下载→→
本站下载：[源码]前端一键自动部署代码+彩色日志+播放音乐.zip、
github下载：分支：dev-vue-cli-keyUpload-chalk-and-playMusic-20210921

五、最后

看官亦可以结合上一节的代码，实现一个自动打包 + 上传 + 彩色日志 + 播放音乐集一体的插件来。

时间不早了，艺灵祝大家：中秋节快乐！晚安！

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2021-09-21/vue-cli-keyUpload-chalk-and-playMusi.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。