4

我正在尝试使用 NPM 作为构建系统（没有 Gulp 或 Grunt）专门设置一个项目，所以我有点初学者，但到目前为止它工作得很好，除了这个小障碍。我的 package.json 的脚本部分看起来像这样：

"scripts": {
        "clean:task": "rimraf dist/*",
        "clean:notify": "notify --t 'Cleaning done.' --m 'dist/ has been cleaned successfully.",
        "clean": "npm run clean:task -s && npm run clean:notify -s",

        "serve": "browser-sync start --p 'xxx.dev/app' --host 'xxx.dev' --port '3000' --open 'external' --f 'app'",

        "styles:task": "node-sass --output-style nested -o app/assets/css app/assets/css",
        "styles:notify": "notify --t 'Styles compilation' --m 'Styles have been compiled successfully'",
        "styles:build": "npm run styles:task && npm run autoprefixer",

        "imagemin": "imagemin app/assets/img dist/img -p",

        "scripts:lint": "jshint --reporter=node_modules/jshint-stylish app/assets/js/scripts.js"
  }

我有通知来宣布成功的任务，但理想情况下，我希望直接在终端中显示一些漂亮的彩色消息。我知道这可以通过彩色日志使用 Gulp 完成，但我找不到任何具有 CLI 能够做到这一点的 NPM 包。有任何想法吗 ？甚至可能吗？

谢谢你的帮助。

4

1 回答 1

6

package.json中定义的各个脚本可以通过遵循归结为echo+ ANSI 颜色参考+一些文本的语法以颜色向 Mac 终端输出消息，尽管您也可以得到比这更复杂的内容。

第 1 步：定义脚本

"scripts": {
    "greeting": "echo \"\\033[32mHello World\"",
    "notification": "echo \"\\033[33mThe Server Has Started\"",
    "timestamp": "echo \"\\033[31m--------\";date \"+%H:%M:%S\n--------\n\" && echo \"\\033[00m\""
{

第 2 步：运行脚本

npm run greeting

在此处输入图像描述

npm run notification

在此处输入图像描述

npm run timestamp

在此处输入图像描述

一些注意事项

逃避本质上是其中的一部分。James Lim 在StackOverflow上的评论提到使用-e它显然可以确保echo荣誉转义斜线。我发现直接在终端中运行命令时这是必要的，但在将其作为npm run <script>.

设置颜色的 ANSI 代码由八个始终以反斜杠开头的字符组成，例如\033[32m. 另外，请注意，我在上面的脚本中输出的文本紧接在 ANSI 代码中的最后一个字符之后——这样消息将在终端中刷新。

在上面的时间戳脚本中，分号将echo和date命令分开，但保持与我们在开始时设置的颜色相同。事实上，这种颜色会影响这个脚本中定义的所有内容，在我的例子中，甚至改变了由紧跟在这个脚本之后的单独脚本输出的消息的颜色。出于这个原因，我添加了另一个echo简单地将颜色重置为终端默认颜色（在本例中为黑色）的方法。

作为参考，我可以用&&分号代替并获得相同的结果。如果您还不知道这两个运算符之间的区别，请参阅这篇文章。

于 2018-05-12T04:58:23.053 回答