Maksud membuat console.log yang elegan adalah dengan menambahkan warna pada hasil kode console.log berdasarkan hasil perintah (error, sukses, dsb). Biasa nya hanya menampilkan text warna hitam pada Browser dan text warna putih pada Terminal. Pada artikel kali ini kita akan membuat console.log yang elegan dengan library Consola.

Consola
Elegant Console Logger for Node.js and Browser

https://github.com/nuxt-contrib/consola

Saya akan coba menampilkan warna-warna apa saja yang terdapat pada Consola dengan membuatkan sebuah perintah Gulp yang sederhana. Sebelumnya pastikan komputer Anda telah terinstall NodeJS (NPM) dan juga Gulp. Berikut link nya.

NodeJS: https://nodejs.org/en/
Gulp: https://gulpjs.com/

01. Buat Projeck Baru dan Setup Gulpfile
Jika NPM dan Gulp sudah terinstall, langkah selanjutnya buat sebuah folder baru, beri nama misalnya “consola-example”. Lalu buka Terminal dan arahkan lokasi path ke folder “consola-tersebut” seperti berikut.

Setelah itu, ketika perintah “npm init” lalu tekan tombol “Enter” untuk melakukan inisialisasi projek kita. Isi sesuai dengan data projek kita.

Setelah itu install Gulp lokal (di dalam folder “consola-example”) dengan mengetik perintah berikut.

npm install --save-dev gulp

Jika sudah selesai install, buat file baru dengan nama “gulpfile.js” di dalam root folder “consola-example”, lalu ketik kode berikut.

function defaultTask(cb) {
   console.log('Gulp sudah terinstall!!');
   cb();
}
exports.default = defaultTask;

Setelah itu, balik ke Terminal dan ketik kode berikut untuk menjalankan kode perintah pada Gulp.

gulp

Hasilnya, pada Terminal akan tercetak kalimat “Gulp sudah terinstall!!” dengan text berwarna putih.

Selanjutnya kita akan membuat hasil console.log menjadi lebih berwarna.

02. Install Consola
Langkah selanjutnya ada menginstall Consola. Ketika kode berikut pada Terminal untuk menginstall Consola.

npm install --save-dev consola

Jika sudah, kembali ke file “gulpfile.js” dan update kode sebelumnya menjadi seperti berikut.

const consola = require('consola');
function defaultTask(cb) {
   consola.success('Gulp sudah terinstall!!');
   cb();
}
exports.default = defaultTask;

Setelah itu ketik perintah “gulp” pada terminal untuk melihat hasilnya.

Terlihat jelas bukan bedanya setelah menggunakan Consola. Terdapat icon checklist berwarna hijau yang menandakan bahwa perintah telah sukses dijalankan.

Dan berikut fungsi-fungsi yang dapat Anda gunakan untuk menampilkan warna text console.log berdasarkan perintah.

consola.success('This is a success message');
consola.info('Give me some Info');
consola.error('I am not good because I am an error');
consola.silent('I am not going to be silent');
consola.fatal('I am fatal');
consola.warn('Warning consola ahead');
consola.log('logging out this message');
consola.ready('I am ready to log');
consola.start('lets start using consola');

Hasilnya adalah sebagai berikut.

Semoga artikel kali ini bermanfaat. Selamat bereksplorasi!!

Referensi: https://medium.com/javascript-in-plain-english/alternative-libraries-for-console-log-for-your-next-javascript-project-af6bc9a2f2ba
Featured Image from: https://github.com/nuxt-contrib/consola