Syntaxhighlighter: Gulp.js build error instalasi jadi gagal

Oleh: Admin - Wed, 19 September, 2018

Syntaxhighlighter, menampilkan barisan kode jadi lebih keren.

Yooo, balik lagi nih.

Gimana kabar kalian? semoga selalu dalam perlingungan-Nya, Amin. Iseng juga nih sore-sore pengen nyemil, hahaha malah curhat. Tapi emang bener kok, sore gini emang jamnya nyemil. Tau cilor? nah enak tuh cilor, apalagi bubuk cabenya yang banyak biar pedesnya nampol.

Udah sana buru cari abang cilor, beli yang banyak bagi gua sekalian ghahahaha, Ngaco :D. Cilor, dia tuh pengertian banget sama aku. Aku lagi pengen eh cilor selalu ada dikepala aku. Tiba-tiba aku jadi cilor. Makin ngaco gegara laper hahaa.

WaH sob, kalian sebagai programmer ato orang yang suka sama kode (cieee yang jomblo geer, yang biasa dikode-in) pasti seneng kan kalo ngeliat jomblo itu dibully, ehh maap keceplosan. Kalian pasti seneng sama tampilan editor text kalian yang membuat kode yang kita tulis jadi lebih rapih.

Choose the right editor, and you'll be fine..

Kalo kalian perhatiin, di blog ini juga ada sepotong kode yang disisipkan pada beberapa artikel. Silahkan kalian cek, tampilannya menarik bukan? ya seenggaknya saya ngerasa gitu hahaaha. Potongan kode tersebut bisa tampil menarik dan tidak berantakan itu dengan tambahan library javascript yang bisa kita pasang pada website kita.

Library tersebut adalah Syntaxhighlighter, kalian bisa mendownloadnya langsung di halaman resminya. Hari ini saya akan sharing bagaimana cara memasangnya pada website teman-teman, seperti biasa siapkan mental dan berdoa :D.

WaH Gulp.js error, instalasi Syntaxhighlighter gagal.

Oke, langsung aja. Untuk proses pemasangan library ini pada website kita n'ga semudah kliatannya sob, kalo n'ga percaya mari kita buktikan hahahaa.

Siapkan bahan-bahan sebagai berikut:

      Direktori kerja, misal /home/User/Documents .
      Kalo blm ada Git, install terlebih dahulu (skip kalo udah) .
      Kalo blm ada Npm, install terlebih dahulu (skip kalo udah) .

1. Masuk ke direktori kerja kita, dan eksekusi perintah dibawah.

    git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
    cd syntaxhighlighter
Run git command

2. Selanjutnya install dependency dengan mengeksekusi perintah dibawah, sebelumnya pastikan kita sudah berada di direktori repo git tadi (syntaxhighlighter).

    npm install
Npm install

3. Langkah selanjutnya kita akan mempersiapkan setup project dengan menggunakan Gulp.

    ./node_modules/gulp/bin/gulp.js setup-project
Gulp.js setup-project return error

Waduhhh gawat hahahaha. Ehh kalo gw sih error nih sob, gimana kalian? . Eh tapi jangan panik, ayo kita bismillah cari di google pasti ada caranya.
Dan bener aja sob, bisa dibuktikan nih pake cara ini, pertama-tama edit filenya, bisa liat contoh dibawah (kebetulan dicommand itu saya pake "code" / alias dari visual studio code, tinggal disesuaikan ya :D ).

    code ./node_modules/songbird/lib/songbird.js
    /**
     * cari baris ini
     */
    Promise = global.Promise || require("bluebird");
    /**
     * ubah kayak dibawah ini
     */
    Promise = require("bluebird");

Oke harusnya sih udah fixed nih issue nya, kita lanjut mulai dari step 3 ya.

    ./node_modules/gulp/bin/gulp.js setup-project
Gulp.js setup-project success

4. Kalo udah muncul pesan kayak gambar diatas itu, selanjutnya kita build repo tadi.

    ./node_modules/gulp/bin/gulp.js build --brushes=all --theme=default

Sampai tahap 4 ini kita udah sukses compiled (hahaha istilahnya ini kan ya, abis ribet :p) syntaxhighlighter tadi dan sekarang udah siap kita pake nih. Cukup kopi folder dist dan upload ke public direktori web server kalian.

Ciee sekarang udah bisa nyisipin kode-kode nya tuhh, ciee cieeee :p.
See you next time readers, salam tempel.