Menggunakan gulp.js dan Bower Ala @elfarqy

Halo, Wasap gaess.. 

Alhamdulilah, ada tulisan baru yang berani Saya terbitkan lagi setelah memilah dan memilih dari beberapa draft.

Jadi, akhir akhir ini selepas dari project skripsi yang sangat menyenangkan. Saya memiliki kesibukan lain yang sebenarnya hampir sama, sama-sama ngetik depan keyboard.  Platform yang sama, bahasa yang hampir sama. Dulu menggunakan CSS, sekarang menggunakan preprocessor CSS-nya namanya SASS. Tapi untuk html dan javascript belum mengalami perubahan berarti.

Meskipun begitu beberapa hal tidak berubah, dunia tempat saya terjerembab memiliki situasi sangat dinamis. Sehingga mau tidak mau efektifitas dan fase optimalisasi alur kerja juga harus di upgrade dong. Beruntunglah bersama seorang teman sempat mengikuti salah satu sharing session  di Digital Lounge Telkom Malang,  Sehingga muncul salah satu pengetahuan baru soal task runner untuk meningkatkan alur kerja.

Mengambil keterangan dari website grunt, salah satu alasan utama menggunakan task runner adalah

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes.

Yah.. bagaimana ya? Pengertian tadi menurut grunt, sedangkan Saya sejak dari awal menggunakan gulp, bukan Grunt. Baiklah, mari kita berbicara soal gulp saja.

Untuk melakukan instalasi gulp dibutuhkan NPM, Saya tidak menjelaskan secara panjang lebar soal npm. Bukan karena apa, tapi secara mendetail bisa Anda akses di laman resminya . Jelasnya saya sudah menginstallnya di perangkat komputer, langkah selanjutnya adalah melakukan konfigurasi project sesuai dengan kebutuhan.

Jadi yang pertama adalah membuat direktori untuk project. misalkan

 

mkdir work/

cd work/

mkdir src

mkdir dist

 

Posisi Saya saat ini ada di folder work, dimana didalamnya terdapat folder src dan dist.

Kenapa src dan dist?

Rencana saya, dalam folder ‘src’ merupakan tempat untuk menyimpan file selama proses pengembangan. Sedangkan ‘dist’ merupakan tempat untuk menerbitkan file yang nantinya akan disebarkan kepada khalayak umum.

Selanjutnya adalah dengan melakukan perintah
npm init -y
Perintah ini digunakan untuk melakukan generate file package.json dari npm. Imbuhan ‘-y’ dibelakang perintah untuk meng-iya-kan seluruh pertanyaan. Jika tidak percaya silahkan lakukan tanpa ‘-y’. Jika Sukses maka akan ada file ‘package.json’ pada direktori folder yang digunakan.

Setelah selesai, lakukan instalasi gulp. Saya melakukan instalasi secara global pada komputer. Hal ini saya lakukan karena nantinya jika dibutuhkan saya tidak lagi perlu melakukan instalasi berulang-ulang pada project lain. ketikan
npm install -g gulp
‘-g’ artinya global. Oh ya, secara detail proses ini bisa dilihat link official npm tadi ya. Atau menggunakan ‘npm -h’ pada terminal.  Jika berhasil, ketikan ‘gulp -v’ pada terminal, maka akan ditampilkan versi gulp terinstall pada perangkat. Misalkan milik saya adalah
# el @ x64_machine in ~ [13:36:34]
$ gulp -v
[13:36:40] CLI version 3.9.1

Sampai sini gulp seharusnya sudah bisa digunakan. Tetapi saya juga menyarankan melakukan instalasi bower, yaitu semacam package management. Untuk bower saya juga melakukan install global, tentunya dengan alasan yang sama.
npm install -g bower
# el @ x64_machine in ~ [13:36:44] C:1
$ bower -v
1.7.9

Sudah terinstall, seharusnya sudah siap untuk melanjutkan langkah sih. Konfigurasi.

Karena diawal tadi sudah di init npm-nya, maka Saya memilih untuk mengira-ngirakan beberapa paket bower yang dibutuhkan. Misalnya Bootstrap-sass dan font-awesome.
bower install --save bootstrap-sass components-font-awesome
‘–save’ digunakan agar paket yang terinstall juga tertulis di dependensi dari npm nya. Jika bingung dengan dependency apa yang akan di install, gunakan ‘bower search’. Cerita panjang soal bower baca di dokumentasi ya.

Setelah fase instalasi dependensi selesai, buat file gulpfile.js secara manual. Nantinya gulpfile merupakan konfigurasi dari gulp pada direktori ‘work’ tadi. Jika menggunakan UNIX, bisa dengan mengetikan
touch gulpfile.js
Dalam tutorial kali ini saya menggunakan beberapa plugin sesuai dengan kebutuhan saya, Antara lain adalah:

gulp-sass: fungsinya untuk meng-kompile SASS menjadi CSS. Bisa di-minify juga sih jika menggunakan plugin ini.

gulp-sourcemaps: meng-generate source maps baik untuk CSS atau pun untuk JS. Penjelasan agak detail soal sourcemaps ada di html5rocks.

gulp-uglify: Melakukan minify pada js. Udah tau kan ya minify? Jika belum, minify itu proses untuk menghilangkan spasi, paragraf atau hal yang dianggap tidak penting dan menjadikannya barisnya lebih sedikit.

browser-sync: melakukan auto reload browser ketika ada perubahan pada file yang di daftarkan pada konfigurasinya. Sekaligus bisa diakses lewat perangkat eksternal dalam satu jaringan lokal. Misal wifi pada router yang sama, jadi hape atau leptop lain bisa akses ke bagian project.

Kurang lebih beginilah konfigurasi gulpfile milik saya.

 

Untuk mengaktifkannya, tinggal panggil gulp pada terminal sesuai dengan task yang dilakukan.

Kelihatannya mudah kok, coba aja! Kalau punya config lain dan lebih keren atau dijalankan error. Tinggalin komentar deh 🙂

2 Replies to “Menggunakan gulp.js dan Bower Ala @elfarqy”

  1. masih bingung antara gulp dan grunt, tapi sekarang lagi baca dan belajar gulp dulu lalu ke grunt, biar tau lebih banyak, btw thanks tulisannya berguna untuk ane yang awam gulp ^_^

Leave a Reply

Your email address will not be published. Required fields are marked *