Cara menggunakan css minify vscode

Gulp adalah sebuah build tool yang dibuat dengan Nodejs. Biasanya digunakan untuk mengeksekusi task automasi seperti:

• Minify dan optimasi file HTML, CSS, Javascript;
• Kompilasi file SASS;
• Menjalankan Web Server;
• Me-reload server secara otomatis;
• Build dan deploy project;
• dan lain sebagainya.

Task ini dijalankan melalui command line interface (CLI).

Instalasi Gulp

Gulp dapat kita instal dengan NPM (Node Package Manager).

[sudo] npm install --g gulp-cli

Apabila kamu menginstal Nodejs pada root, gunakanlah cd belajar-gulp9 di depan. Tapi apabila kamu menginstal Nodejs pada home, maka cd belajar-gulp9 tidak diperlukan.

Tunggulah sampai prosesnya selesai. Setelah itu coba ketik perintah npm init -y1 untuk memastikan versi Gulp yang terinstall.

Membuat Proyek Javascript

Gunakan perintah berikut untuk membuat project baru:

npx mkdirp belajar-gulp

Kita akan membuat proyek dengan nama npm init -y2. Setelah itu, masuk ke direktori npm init -y2 dengan perintah npm init -y4.

cd belajar-gulp

Sekarang kita berada di dalam direktori proyek. Berikutnya kita akan membuat file npm init -y5 menggunakan npm.

Silahkan ketik perintah berikut:

npm init -y

Maka akan tampil seperti ini:

Ini artinya proyek sudah selesai dibuat.

Instalasi Gulp di dalam Proyek

Berikutnya kita harus mengisntal Gulp ke dalam proyek.

Caranya…

Gunakan perintah berikut:

npm install --save-dev gulp

Tunggulah sampai prosesnya selesai. Setelah itu, coba ketik lagi perintah npm init -y1.

Pada gambar di atas, terlihat ada dua Gulp yang terinstal.

Apa bedanya Gulp CLI dengan Local?

Gulp CLI adalah Gulp yang terinstal di sistem operasi komputer kita, sedangkan Gulp lokal adalah Gulp yang terinstal di dalam proyek.

Mengapa kita harus menginstal keduanya?

Sebenarnya tidak harus, karena kita bisa pakai salah satu saja.

Oh iya, kita akan menggunakan Gulp versi npm init -y7. Pastikan kamu juga menggunakan versi tersebut.

Karena ada banyak perubahan pada versi npm init -y8,npm init -y9, dan npm install --save-dev gulp0.

Membuat Task untuk Gulp

Sekarang bukalah proyek tadi dengan teks editor. Saya akan menggunakan VS Code.

Silahkan buka melalui File->Open Folder.

Berikutnya, silahakan buat file baru dengan nama npm install --save-dev gulp1.

File npm install --save-dev gulp1 adalah file yang berisi task untuk dikerjakan oleh Gulp.

Sekarang mari kita coba membuat sebuah task.

Ketiklah kode berikut di dalam npm install --save-dev gulp1:

var gulp = require('gulp'); gulp.task('sayHello', async function(){ console.log("Hello, selamat datang di Gulp!"); });

Ini adalah task sederhanya untuk menampilkan pesan npm install --save-dev gulp4.

Sekarang mari kita coba eksekusi.

Ketik perintah berikut:

gulp sayHello

Maka hasilnya:

Anatomi npm install --save-dev gulp1

Kita sudah berhasil membuat task di dalam npm install --save-dev gulp1. Sekarang kita akan membahas lebih dalam tentang npm install --save-dev gulp1.

File npm install --save-dev gulp1 terdiri dari tiga bagian penting:

1. Definisi plug-in atau modul;
2. Definisi Task;
3. Default Task.

Perhatikan contoh berikut:

Plug-in atau modul kita butuhkan untuk menggunakan fungsi tertentu. Nanti kita akan coba beberapa modul.

Task terdiri dari nama task dan body task. Body berisi script yang akan dieksekusi ketika taks tersebut dijalankan.

Lalu task default adalah taks yang akan dieksekusi ketika kita tidak memberikan nama task saat mengeksekusi Gulp.

Berikutnya kita akan mencoba beberapa modul Gulp.

Membuat Server dengan Gulp

Untuk membuat web server dengan Gulp, kita membutuhkan modul npm install --save-dev gulp9.

Silahkan instal modul ini dengan perintah berikut:

npm install --save-dev gulp-connect

Tunggulah sampai prosesnya selesai.

Kemudian tambahkan sebuah task untuk menjadlankan server pada npm install --save-dev gulp1 seperti ini:

var gulp = require('gulp'); var gulpConnect = require('gulp-connect'); //--- ada script di sini --- gulp.task('server', async function(){ gulpConnect.server({ root: "public", livereload: true }); });

Sehingga akan menjadi seperti ini:

Pada kode task di atas, kita menentukan root direktorinya adalah var gulp = require('gulp'); gulp.task('sayHello', async function(){ console.log("Hello, selamat datang di Gulp!"); });1. Direktori ini belum kita buat.

Silahkan buat folder atau direktori baru bernama var gulp = require('gulp'); gulp.task('sayHello', async function(){ console.log("Hello, selamat datang di Gulp!"); });1, lalu di dalamnya buat lagi file HTML bernama var gulp = require('gulp'); gulp.task('sayHello', async function(){ console.log("Hello, selamat datang di Gulp!"); });3 dengan isi sebagai berikut:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tutorial Gulp untuk Pemula</title> </head> <body> <h1>Hello World!</h1> <p>Saya sedang belajar Gulp.</p> </body> </html>

Sehingga akan menjadi seperti ini:

Nah! sekarang mari kita coba menjalankan tasknya.

Ketik perintah:

npx mkdirp belajar-gulp0

Maka akan keluar seperti ini.

Sekarang coba buka web browser, lalu arahkan ke alamat //localhost:8080. Maka hasilnya:

Minify File degan Gulp

Minify adalah proese mengoptimasi file menjadi lebih kecil. Semakin kecil file, maka kecepatan downloadnya akan semakin cepat.

Ini akan membuat website kita semakin cepat.

Untuk melakukan minify, kita membutuhkan beberapa modul:

• var gulp = require('gulp'); gulp.task('sayHello', async function(){ console.log("Hello, selamat datang di Gulp!"); });4 untuk minify file HTML;
• var gulp = require('gulp'); gulp.task('sayHello', async function(){ console.log("Hello, selamat datang di Gulp!"); });5 untuk minify file CSS;
• var gulp = require('gulp'); gulp.task('sayHello', async function(){ console.log("Hello, selamat datang di Gulp!"); });6 untuk minify file Javascript;
• var gulp = require('gulp'); gulp.task('sayHello', async function(){ console.log("Hello, selamat datang di Gulp!"); });7 untuk menggabungkan beberapa file javascript.

Mari kita instal semuanya. Silahkan ketik perintah berikut:

npx mkdirp belajar-gulp1

Tunggulah sampai prosesnya selesai.

Setelah itu buatlah folder dan file baru dengan struktur seperti ini:

• 📁 var gulp = require('gulp'); gulp.task('sayHello', async function(){ console.log("Hello, selamat datang di Gulp!"); });8 isi kosong, direktori ini akan menjadi direktori tujuan;
• 📁 var gulp = require('gulp'); gulp.task('sayHello', async function(){ console.log("Hello, selamat datang di Gulp!"); });9 berisi file HTML, CSS, dan JS;
  • 📁 gulp sayHello0 berisi file CSS;
    • 📄 gulp sayHello1
  • 📁 gulp sayHello2 berisi file JS;
    • 📄 gulp sayHello3
  • 📄 gulp sayHello4

Ketiga file ini (gulp sayHello4, gulp sayHello1, dan gulp sayHello3) akan kita minify. Lalu hasilnya akan disimpan ke dalam folder gulp sayHello8.

Silahkan isi ketiga file tersebut dengan kode di bawah ini.

Isi gulp sayHello9:

npx mkdirp belajar-gulp2

Isi npm install --save-dev gulp-connect0:

npx mkdirp belajar-gulp3

Isi npm install --save-dev gulp-connect1:

npx mkdirp belajar-gulp4

Setelah itu, kita akan membuat task untuk melakukan minify.

Bukalah kembali file npm install --save-dev gulp1 kemudian tambahkan task berikut.

npx mkdirp belajar-gulp5

Pada task di atas, kita banyak menggunakan method npm install --save-dev gulp-connect3. Method ini berfungsi untuk membuat saluran dan saringan dari sumber ke tujuan.

Sekarang mari kita coba melakukan minify. Ketik perintah berikut:

npx mkdirp belajar-gulp6

Maka akan keluar seperti ini:

Sekarang coba periksa hasilnya.

Badingkan file yang sudah di-minify degan yang asli.

Coba kita bandingkan isinya.

Menggunakan Gulp Watch

Saat kita melakukan minify, kita harus mengetik perintah ini.

npx mkdirp belajar-gulp6

Berikutnya, saat ada perubahan pada file…

…maka kita harus mengetik perintah itu lagi.

Agar tidak mengetik berulang-ulang, kita bisa memanfaatkan Gulp Watch.

Tugas dari Gulp Watch adalah memantai perubahan pada file, lalu saat ada perubahan Gulp akan menjalankan sebuah task secara otomatis.

Silahkan tambahkan task berikut pada file npm install --save-dev gulp1 untuk membuat Watch.

npx mkdirp belajar-gulp8

Artinya, Gulp akan memantau file-file yang ada di dalam folder 📁 var gulp = require('gulp'); gulp.task('sayHello', async function(){ console.log("Hello, selamat datang di Gulp!"); });9 , lalu akan menjalankan task tertentu.

Mari kita coba…

Silahkan ketik perintah berikut:

npx mkdirp belajar-gulp9

Maka akan keluar seperti ini:

Sekarang coba ubah sesuatu, misalnya kita akan ubah file CSS. Maka akan keluar seperti ini:

Ini artinya Gulp menjalankan task secara otomatis saat kita membuat perubahan.

Menggunakan Live Reload

Hampir sama dengan Gulp Watch, Live Reload berfungsi untuk me-reload web browser saat ada perubahan.

Fitur Live Reload dapat kita gunakan dengan memanggil method npm install --save-dev gulp-connect6 di npm install --save-dev gulp-connect3 yang diinginkan.

cd belajar-gulp0

Sebagai contoh, saya ingin mengaktifkan live reload saat saya mengubah CSS. Maka pada task npm install --save-dev gulp-connect8 akan saya berikan seperti ini:

cd belajar-gulp1

Oke sekarang coba ubah npm install --save-dev gulp-connect9 direktori pada task var gulp = require('gulp'); var gulpConnect = require('gulp-connect'); //--- ada script di sini --- gulp.task('server', async function(){ gulpConnect.server({ root: "public", livereload: true }); });0 menjadi gulp sayHello8.

Kemudian untuk task defaultnya ubah menjadi seperti ini:

cd belajar-gulp2

Artinya kita akan menentukan var gulp = require('gulp'); var gulpConnect = require('gulp-connect'); //--- ada script di sini --- gulp.task('server', async function(){ gulpConnect.server({ root: "public", livereload: true }); });2 dan var gulp = require('gulp'); var gulpConnect = require('gulp-connect'); //--- ada script di sini --- gulp.task('server', async function(){ gulpConnect.server({ root: "public", livereload: true }); });0 sebagai task default.

Lalu di setiap task minify, tambahkan npm install --save-dev gulp-connect3 ini.

cd belajar-gulp0

Sekarang isi lengkap file npm install --save-dev gulp1 akan menjadi seperti ini:

cd belajar-gulp4

Sekarang mari kita coba jalankan…

Cukup ketik var gulp = require('gulp'); var gulpConnect = require('gulp-connect'); //--- ada script di sini --- gulp.task('server', async function(){ gulpConnect.server({ root: "public", livereload: true }); });6 saja.

Setelah itu, coba buat file HTML baru di dalam folder var gulp = require('gulp'); var gulpConnect = require('gulp-connect'); //--- ada script di sini --- gulp.task('server', async function(){ gulpConnect.server({ root: "public", livereload: true }); });7 dengan nama var gulp = require('gulp'); gulp.task('sayHello', async function(){ console.log("Hello, selamat datang di Gulp!"); });3 dan isi sebagai berikut:

cd belajar-gulp5

Maka hasilnya:

Clean dan Build Project dengan Gulp

Untuk melakukan build dan clean proyek dengan Gulp, kita membutuhkan dua modul:

1. var gulp = require('gulp'); var gulpConnect = require('gulp-connect'); //--- ada script di sini --- gulp.task('server', async function(){ gulpConnect.server({ root: "public", livereload: true }); });9 untuk menghapus hasil build;
2. dan <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tutorial Gulp untuk Pemula</title> </head> <body> <h1>Hello World!</h1> <p>Saya sedang belajar Gulp.</p> </body> </html>0 untuk menjalankan task secara berurutan (kita akan menggunakan <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tutorial Gulp untuk Pemula</title> </head> <body> <h1>Hello World!</h1> <p>Saya sedang belajar Gulp.</p> </body> </html>1).

Kita hanya perlu menginstal var gulp = require('gulp'); var gulpConnect = require('gulp-connect'); //--- ada script di sini --- gulp.task('server', async function(){ gulpConnect.server({ root: "public", livereload: true }); });9 saja, karena <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tutorial Gulp untuk Pemula</title> </head> <body> <h1>Hello World!</h1> <p>Saya sedang belajar Gulp.</p> </body> </html>0 bisa digantikan dengan fungsi <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tutorial Gulp untuk Pemula</title> </head> <body> <h1>Hello World!</h1> <p>Saya sedang belajar Gulp.</p> </body> </html>4.

Mari kita install var gulp = require('gulp'); var gulpConnect = require('gulp-connect'); //--- ada script di sini --- gulp.task('server', async function(){ gulpConnect.server({ root: "public", livereload: true }); });9, silahkan ketik perintah berikut:

cd belajar-gulp6

Tunggulah sampai prosesnya selesai.

Setelah itu, tambahkan task berikut di dalam npm install --save-dev gulp1.

cd belajar-gulp7

Setelah itu, cobalah untuk mengeksekusi taks tersebut dengan perintah:

cd belajar-gulp8

Maka hasilnya:

Apa Selanjutnya?

Kita sudah belajar dasar-dasar menggunakan Gulp pada proyek web front-end. Sebenarnya masih banyak yang belum kita coba seperti: