{"id":11222,"date":"2020-12-27T00:00:00","date_gmt":"2020-12-27T00:00:00","guid":{"rendered":"https:\/\/binus.ac.id\/binus-digital\/2020\/12\/27\/membuat-elegan-console-log-dengan-consola\/"},"modified":"2024-09-24T02:20:16","modified_gmt":"2024-09-24T02:20:16","slug":"membuat-elegan-console-log-dengan-consola","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/binus-digital\/2020\/12\/27\/membuat-elegan-console-log-dengan-consola\/","title":{"rendered":"Membuat Elegan Console.Log dengan Consola"},"content":{"rendered":"

Maksud membuat\u00a0console.log\u00a0<\/code>yang elegan adalah dengan menambahkan warna pada hasil kode\u00a0console.log<\/code>\u00a0berdasarkan 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\u00a0console.log<\/code>\u00a0yang elegan dengan library Consola.<\/p>\n

\n

Consola<\/strong>
\nElegant Console Logger for Node.js and Browser<\/p>\n

https:\/\/github.com\/nuxt-contrib\/consola<\/a><\/cite><\/p>\n<\/blockquote>\n

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.<\/p>\n

NodeJS:\u00a0https:\/\/nodejs.org\/en\/<\/a>
\nGulp:\u00a0https:\/\/gulpjs.com\/<\/a><\/p>\n

01. Buat Projeck Baru dan Setup Gulpfile<\/strong>
\nJika NPM dan Gulp sudah terinstall, langkah selanjutnya buat sebuah folder baru, beri nama misalnya \u201cconsola-example\u201d. Lalu buka Terminal dan arahkan lokasi path ke folder \u201cconsola-tersebut\u201d seperti berikut.<\/p>\n

\"\"<\/p>\n

Setelah itu, ketika perintah \u201cnpm init\u201d lalu tekan tombol \u201cEnter\u201d untuk melakukan inisialisasi projek kita. Isi sesuai dengan data projek kita.<\/p>\n

\"\"<\/p>\n

Setelah itu install Gulp lokal (di dalam folder \u201cconsola-example\u201d) dengan mengetik perintah berikut.<\/p>\n

npm install --save-dev gulp<\/pre>\n
Jika sudah selesai install, buat file baru dengan nama \u201cgulpfile.js\u201d di dalam root folder \u201cconsola-example\u201d, lalu ketik kode berikut.<\/p>\n
function defaultTask(cb) {\r\n   console.log('Gulp sudah terinstall!!');\r\n   cb();\r\n}\r\nexports.default = defaultTask;<\/pre>\n
Setelah itu, balik ke Terminal dan ketik kode berikut untuk menjalankan kode perintah pada Gulp.<\/p>\n
gulp<\/pre>\n
Hasilnya, pada Terminal akan tercetak kalimat \u201cGulp sudah terinstall!!\u201d dengan text berwarna putih.<\/p>\n
\"\"<\/p>\n
Selanjutnya kita akan membuat hasil console.log menjadi lebih berwarna.<\/p>\n
02. Install Consola<\/strong>
\nLangkah selanjutnya ada menginstall Consola. Ketika kode berikut pada Terminal untuk menginstall Consola.<\/p>\n
npm install --save-dev consola<\/pre>\n
Jika sudah, kembali ke file \u201cgulpfile.js\u201d dan update kode sebelumnya menjadi seperti berikut.<\/p>\n
const consola = require('consola');\r\nfunction defaultTask(cb) {\r\n   consola.success('Gulp sudah terinstall!!');\r\n   cb();\r\n}\r\nexports.default = defaultTask;<\/pre>\n
Setelah itu ketik perintah \u201cgulp\u201d pada terminal untuk melihat hasilnya.<\/p>\n
\"\"<\/p>\n
Terlihat jelas bukan bedanya setelah menggunakan Consola. Terdapat icon checklist berwarna hijau yang menandakan bahwa perintah telah sukses dijalankan.<\/p>\n
Dan berikut fungsi-fungsi yang dapat Anda gunakan untuk menampilkan warna text console.log berdasarkan perintah.<\/p>\n
consola.success('This is a success message');\r\nconsola.info('Give me some Info');\r\nconsola.error('I am not good because I am an error');\r\nconsola.silent('I am not going to be silent');\r\nconsola.fatal('I am fatal');\r\nconsola.warn('Warning consola ahead');\r\nconsola.log('logging out this message');\r\nconsola.ready('I am ready to log');\r\nconsola.start('lets start using consola');<\/pre>\n
Hasilnya adalah sebagai berikut.<\/p>\n
\"\"<\/p>\n
Semoga artikel kali ini bermanfaat. Selamat bereksplorasi!!<\/p>\n
Referensi:\u00a0https:\/\/medium.com\/javascript-in-plain-english\/alternative-libraries-for-console-log-for-your-next-javascript-project-af6bc9a2f2ba<\/a>
\nFeatured Image from: https:\/\/github.com\/nuxt-contrib\/consola<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Maksud membuat\u00a0console.log\u00a0yang elegan adalah dengan menambahkan warna pada hasil kode\u00a0console.log\u00a0berdasarkan 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\u00a0console.log\u00a0yang 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 […]<\/p>\n","protected":false},"author":20,"featured_media":11223,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[],"class_list":["post-11222","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/comments?post=11222"}],"version-history":[{"count":1,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11222\/revisions"}],"predecessor-version":[{"id":11801,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11222\/revisions\/11801"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media\/11223"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media?parent=11222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/categories?post=11222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/tags?post=11222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}