in Javascript, Programming

Gulp untuk web development

Gulp adalah alat yang dapat kita gunakan untuk menjalankan beberapa task atau pekerjaan dalam proses pengembangan website. Beberapa task yang dapat dijalankan Gulp antara lain :

  1. Otomatis reload browser ketika file css berubah
  2. Mengoptimalisasi file seperti CSS, JS dan images
  3. Menggunakan Sass dan LESS

Selain point tersebut, masih banyak sekali manfaat dan kegunaan Gulp untuk web development khususnya bagi front end developer.

Pada artikel ini, saya ingin berbagi mengenai penggunaan dasar Gulp untuk web development. Tetapi, sebelum kita mempelajari bagaimana menggunakan Gulp, alangkah baiknya kita mengetahui dulu alasan kenapa menggunakan Gulp.

Kenapa Gulp?

Gulp sering disebut sebagai alat untuk membangun website. Gulp digunakan untuk menjalankan tugas – tugas dalam membangun website. Selain Gulp, terdapat pula alat lain yang populer yaitu Grunt. Apa itu Grunt? Mungkin bisa saya bahas pada artikel selanjutnya tentang Grunt. Selain itu terdapat Brocoli dan Brunch. Banyak artikel yang membahas perbedaan alat – alat tersebut, contohnya ada pada artikel ini dan artikel ini.

Apa hasil dari Gulp pada artikel ini?

Pada akhir dari artikel ini, kita dapat mengatur alur kerja dari pekerjaan berikut ini :

  1. Install Gulp,
  2. Spin up web server,
  3. Compile Sass ke CSS,
  4. Otomatis reload browser,
  5. Mengoptimalisasikan semua file assets (CSS, JS dan images) untuk production.

 

Install Gulp

Sebelum melakukan instalasi Gulp, kita harus melakukan isntalasi Node.js terlebih dahulu. Download node.js di website resmi di sini.

Jika node.js sudah terinstall, maka kita dapat meng-install Gulp dengan perintah berikut ini :

Note : hanya pengguna mac yang disarankan menggunakan sudo.

Perintah tersebut di atas, menggunakan npm (node package manager) untuk melakukan instalasi Gulp di komputer kita. Perintah tersebut akan menginstall Gulp secara global, sehingga dapat di akses di mana pun.

Membuat Gulp project

Langkah pertama adalah, kita akan membuat folder dengan nama project pada web server folder. Kemudian jalankan perintah berikut ini di dalam folder project yang sudah di buat.

Perintah tersebut akan menggenerate file package.json yang digunakan untuk menyimpan informasi dari project termasuk dependensinya. Prompt berikut akan muncul jika kita menjalankan perintah di atas :

install gulp project

install gulp project

 

Jika file package.json sudah di generate, kita dapat menginstall Gulp dengan perintah berikut :

Perintah tersebut akan menginstall Gulp ke dalam folder project.

Setelah proses installasi Gulp selesai, maka di dalam folder project akan muncul folder baru dengan nama node_modules yang di dalamnya terdapat folder dengan nama gulp.

install gulp

install gulp

 

Kita hampir siap menggunakan Gulp dalam proses web development. Tetapi sebelum itu, kita harus paham dengan struktur folder pada folder project. Struktur folder yang digunakan pada artikel ini adalah sebagai berikut :

struktur folder pada project gulp

struktur folder pada project gulp

 

Membuat perintah Gulp

Untuk mulai menggunakan Gulp, langkah pertama adalah dengan membuat file dengan nama glupfile.js di dalam folder project. Kemudian tulislah kode berikut ini di dalam file glupfile.js :

Kode tersebut adalah kode untuk membuat task dengan nama “hello” yang di dalam task tersebut melakukan perintah untuk menampilkan string “Hello Gulp”. Jika task tersebut di dajalankan melalui perintah gulp hello maka akan menghasilkan tampilan berikut ini pada terminal :

gulp task hello

gulp task hello

 

Sampai di sini, kita telah berhasil melakukan installasi Gulp dan menggunakan Gulp untuk menjalankan perintah sederhana, akan tetapi masih banyak hal yang dapat dilakukan Gulp.

Compile Sass to CSS

Kita dapat meng-compile Sass menjadi CSS dengan menggunakan plugin gulp-sass. Kita dapat menginstall plugin tersebut dengan menggunakan perintah npm install berikut ini :

Setelah plugin berhasil di install, selanjutnya adalah dengan menambahkan beberapa kode berikut ini pada file gulpfile.js.

Kemudian kita dapat membuat task dengan nama “sass” yang menjalankan perintah untuk meng-compile Sass ke CSS. Berikut adalah kode untuk membuat task :

Untuk mencobanya, mari kita buat file dengan nama styles.scss pada folder project/app/scss/styles.scss. isi kan kode berikut ini pada file styles.scss

File styles.scss akan dijasikan sumber untuk membuat file CSS. Untuk membuat file CSS dengan menggunakan Gulp task, maka kita buat task pada gulpfile.js.

Jika kita menjalankan task “sass” melalui command line maka kita dapat melihat file styles.css pada folder project/app/css yang di dalamnya terdapat kode CSS berikut ini :

Otomatis reload browser dengan Browser Sync

Dengan menggunakan Browser Sync kita dapat mengembangkan website dengan lebih mudah lagi. Pasalnya, Browser Sync dapat digunakan untuk otomatis reload browser jika terdapat perubahan pada file assets (CSS, JS, Image).

Untuk menggunakan fitur otomatis reload, kita harus melakukan instalasi plugin Browser Sync menggunakan perintah berikut ini :
npm install browser-sync --save-dev

Setelah proses instalasi selesai, selanjutnya tambahkan kode berikut ini pada file gulpfile.js.

 

Selain itu, jika kita ingin me-reload browser otomatis pada waktu kitamengubah file assets kita dapat menggunakan task watch. Salah satu contohnya adalah sebagai berikut :

Berikut ini adalah kode lengkap dari file gulpfile.js :

Kita sudah dapat melakukan instalasi dan menggunakan Gulp walaupun masih penggunaan dasar saja. Masih banyak yang dapat dilakukan Gulp untuk mempermudah pekerjaan kita dalam membuat website. Pada kesempatan ini, saya cukupkan sekian dulu, semoga bermanfaat. Untuk kegunaan Gulp selanjutnya akan saya post di artikel selanjutnya.

Write a Comment

Comment