Melanjutkan tentang Bootstrap, Less dan Gulp dari artikel sebelumnya di Pontianak Web. Pada catatan sebelumnya masih sebatas compile manual setiap ada perubahan. Ini tentunya akan sangat merepotkan dan tidak efisien dalam membuat website.
Nah dikarenakan repotnya harus compile manual tiap perubahan file Less dengan memanggil perintah lessc. Maka catatan kali ini kita membahas penggunan Gulp supaya proses compile bisa otomatis dilakukan setiap ada perubahan di file Less.
Gulp ini secara singkatnya adalah alat berupa script Javascript yang membantu developer mempermudah pekerjaan, seperti compile SASS maupun LESS, kompresi file bahkan sampai refresh browser. Bayangkan saja sebuah script yang akan membantu kita compile SASS/LESS dan kemudian refresh browser jadi saat kita membuka browser maka hasilnya sudah akan langsung kelihatan. Lumayan kan menghemat waktu tanpa perlu menekan tombol F5 dan menunggu beberapa saat. Singkat saja penjelasan Gulp ini, karena setelah baca dan lihat tutorialnya, kemampuan Gulp ini sangat banyak. Pluginnya saja saat catatan ini dibuat ada sekitar 2534 plugin. Silahkan cek langsung ke sumbernya untuk lebih detailnya.
Langsung saja kita ujicoba paka Gulp, yang pasti install dulu secara global Gulp ini biar bisa dipakai terus. Berhubung aku pakai Ubuntu 16.04 maka caranya seperti berikut:
npm install --global gulp
bisa juga dengan perintah dibawah, jika ada error terkait hak akses aku biasanya tambah sudo didepan perintah.
npm install --g gulp
Apaan lagi nih NPM, hmmm baca-baca sih ini adalah manajemen paket Javascript jadi kode Javascript yang sudah dibuat developer lain tinggal kita pakai dan bisa pantau updatenya. Untuk detail bisa langsung ke sumbernya. Supaya bisa memakai NPM ini, install dulu NodeJS. Silahkan dicek langsung ke sumbernya, disana terdapat banyak cara instalasi untuk berbagai platform OS anda
Okeh lanjut lagi ke bahasan utama. Berikutnya pastikan posisi folder ada di root subthemes yang akan kita kerjakan seperti themes/nama_subthemes.
Panggil perintah npm init, ini bertujuan membuat file package.json. File ini berisi informasi tentang project kita. Istilahnya kenalan dulu, pasti harus menyebutkan minimal nama.
Setelah menjalankan npm init, nanti dilayar terminal anda akan muncul beberapa pertanyaan. Aku hanya isi default saja yaitu tekan Enter terus sampai selesai. Pertanyaan yang ditampilkan seperti nama project, versi dan deskripsi. Tahapan terakhir akan ada konfirmasi apakah informasinya sudah sesuai, jawab default aja dengan langsung menekan tombol Enter. Setelah selesai folder project anda akan muncul file package.json, isi dari file kurang lebih seperti berikut:
{
"name": "solusi",
"version": "1.0.0",
"description": "<!-- @file Instructions for subtheming using the LESS Starterkit. --> <!-- @defgroup subtheme_less --> <!-- @ingroup subtheme --> # LESS Starterkit",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Nah tahapan berikutnya, masih di folder root subthemes jalankan perintah berikut untuk instalasi gulp secara lokal di project kita.
npm install --save-dev gulp
Setelah selesai, di folder root subthemes anda akan muncul satu folder lagi dengan nama node_modules. Folder ini berfungsi menyimpan plugin dari Gulp untuk project anda.
Selanjutnya buat file gulpfile.js di folder project anda dan gunakan text editor favorit untuk mengisinya. Contoh pertama adalah seperti dibawah yang digunakan hanya untuk testing saja.
var gulp = require('gulp');
gulp.task('default', function() {
console.log('testing gulp')
});
Baris pertama adalah panggil gulp itu sendiri, baris berikutnya membuat task bernama default. Default ini otomatis pasti dipanggil saat kita ketik perintah gulp di terminal. Task ini hanya testing dulu menampilkan teks "testing gulp".
Pada terminal di folder root project kita (subthemes) ketik perintah gulp dan tekan enter.
[11:41:05] Starting 'default'...
testing gulp
[11:41:05] Finished 'default' after 119 μs
Jika baris diatas muncul, maka proses pembuatan task default sudah berhasil. Bisa dilihat mulai dari Starting sampai Finished. Berhubung nama task ini adalah default, maka cukup perintah gulp saja yang kita entri di terminal. Kalau suatu saat sudah banyak task yang dibuat kita bisa memanggilnya dengan cara gulp watch yang artinya kita hanya memanggil task watch saja. Jika ada banyak task dan mau berjalan secara berurutan bisa juga kita membuat task default dan membuat array untuk urutan tasknya seperti berikut
gulp.task('default', ['task1', 'task2', 'task3',]);
Dengan task default seperti diatas, maka pada terminal kita tinggal panggil gulp saja dan task akan dipanggil sesuai urutan array mulai dari task1 sampai dengan task3.
Lanjut ketugas aslinya, yaitu compile file less bootstrap menjadi css.
Karena kita ingin compile less sampai dengan menggunakan livereload untuk otomatis refresh browser, maka beberapa plugin gulp harus kita install dahulu dengan cara mengetik perintah berikut di terminal (posisi masih di root project).
npm install --save-dev gulp-less gulp-livereload gulp-plumber
Setelah proses instalasi plugin, kita dapat melihat didalam folder node_modules ada beberapa folder tambahan yang sesuai dengan plugin yang kita pakai.
Untuk isi dari gulpfile.js aku buat seperti ini:
var gulp = require('gulp'),
less = require('gulp-less'),
livereload = require('gulp-livereload'),
plumber = require('gulp-plumber');
gulp.task('less', function() {
return gulp.src('./less/style.less')
.pipe(plumber())
.pipe(less({}))
.pipe(gulp.dest('css/'))
.pipe(livereload());
});
gulp.task('default', function(){
livereload.listen();
gulp.watch('less/*.less', ['less'])
});
Untuk Penjelasan script diatas adalah sebagai berikut:
Pertama panggil plugin yang dibutuhkan dan simpan ke variable. Dalam contoh kebetulan buat nama variablenya sama dengan pluginnya itu sendiri.
gulp
--- ni intinya dari gulp itu sendiri
gulp-less
--- untuk compile less
gulp-livereload
--- untuk memanggil livereload
gulp-plumber
--- penanganan error, dimana jika file less kita ada kurang entri atau salah kode maka proses watch tetap berjalan tanpa harus memanggil ulang perintah gulp.
Berikutnya membuat task dengan nama less, bisa dilihat pertama gulp.src ini adalah source/sumber file yang mau di compile, setelah dipastikan sumber file yang mau di compile berikutnya adalah pipe (mirip perintah linux pipe |) yang berfungsi eksekusi perintah berikutnya yaitu plumber. Plumber ini dipanggil duluan sebelum proses lainnya supaya jika ada error pada pipe berikutnya gulp tidak akan berhenti.
Pada
pipe less ini pastinya compile file yang sudah di tentukan di src, untuk pipe berikutnya
dest itu adalah folder tujuan menyimpan file css. Terakhir panggil
livereload jadi saat anda membuka browser perubahan sudah bisa langsung dilihat. Lumayan kan menghemat menekan tombol F5. Untuk
livereload pastikan plugin browser livereload sudah terpasang dan aktif.