Colored logging in terminal with NPM run script

Question

I'm trying to setup a project exclusively with NPM as a build system (no Gulp or Grunt) so I'm a bit of a beginner, but so far it's working pretty nicely except for this little road block. The scripts section of my package.json looks something like that :

"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"
  }

I have notifications to announce successful tasks, but ideally I'd like some nice colored messages directly in the terminal. I know this can be done with Gulp via colored logging but I can't fin any NPM package that has a CLI that would be able to do that. Any ideas ? Is it even possible ?

Thanks for your help.

Merce

Possible duplicate of How to change the output color of echo in Linux – Exchange

Answer 1

Individual scripts defined in package.json can output a message to Mac's Terminal in color by following a syntax that boils down to echo + ANSI color reference + some text although you can get more complicated than this, as well.

Step 1: Define your scripts

"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\""
{

Step 2: Run your scripts

npm run greeting

npm run notification

npm run timestamp

Some things to note

Escaping is inherently a part of this. A comment by James Lim on StackOverflow mentions the use of -e which apparently ensures that echo honors escaping slashes. I found this was necessary when running the command directly in Terminal but unnecessary when firing it as part of npm run <script>.

The ANSI code that sets the color is made up of eight characters that always begin with a backslash, like this \033[32m. Also, notice that the text I am outputting in my scripts above begins immediately after the last character in the ANSI code– this is so the message will be flush left in the Terminal.

In the timestamp script above, the semicolon separates the echo and date commands but maintains the same color we set at the beginning. In fact, this color will affect everything defined in this script and, in my case, even changed the color of a message output by a separate script that immediately followed this one. For this reason, I included another echo that simply resets the color to the Terminal's default color (in this case, black).

For reference, I could have used && in place of the semicolon and achieved the same results. If you do not already know the difference between these two operators, see this post.

Dammar