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-gulp

cd belajar-gulp

Tunggulah sampai prosesnya selesai. Setelah itu coba ketik perintah

npm init -y

Membuat Proyek Javascript

Gunakan perintah berikut untuk membuat project baru:

npx mkdirp belajar-gulp

Kita akan membuat proyek dengan nama

npm init -y

npm init -y

npm init -y

cd belajar-gulp

Sekarang kita berada di dalam direktori proyek. Berikutnya kita akan membuat file

npm init -y

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 -y

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 -y

Karena ada banyak perubahan pada versi

npm init -y

npm init -y

npm install --save-dev gulp

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 gulp

File

npm install --save-dev gulp

Sekarang mari kita coba membuat sebuah task.

Ketiklah kode berikut di dalam

npm install --save-dev gulp

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 gulp

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 gulp

npm install --save-dev gulp

File

npm install --save-dev gulp

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 gulp

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 gulp

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!");
});

Silahkan buat folder atau direktori baru bernama

var gulp = require('gulp');

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

var gulp = require('gulp');

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

<!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-gulp

Maka akan keluar seperti ini.

Sekarang coba buka web browser, lalu arahkan ke alamat http://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-gulp

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 sayHello

    0 berisi file CSS;
    • 📄

      gulp sayHello

      1
  • 📁

    gulp sayHello

    2 berisi file JS;
    • 📄

      gulp sayHello

      3
  • 📄

    gulp sayHello

    4

Ketiga file ini (

gulp sayHello

gulp sayHello

gulp sayHello

gulp sayHello

Silahkan isi ketiga file tersebut dengan kode di bawah ini.

Isi

gulp sayHello

npx mkdirp belajar-gulp

Isi

npm install --save-dev gulp-connect

npx mkdirp belajar-gulp

Isi

npm install --save-dev gulp-connect

npx mkdirp belajar-gulp

Setelah itu, kita akan membuat task untuk melakukan minify.

Bukalah kembali file

npm install --save-dev gulp

npx mkdirp belajar-gulp

Pada task di atas, kita banyak menggunakan method

npm install --save-dev gulp-connect

Sekarang mari kita coba melakukan minify. Ketik perintah berikut:

npx mkdirp belajar-gulp

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-gulp

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 gulp

npx mkdirp belajar-gulp

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!");
});

Mari kita coba…

Silahkan ketik perintah berikut:

npx mkdirp belajar-gulp

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-connect

npm install --save-dev gulp-connect

cd belajar-gulp

Sebagai contoh, saya ingin mengaktifkan live reload saat saya mengubah CSS. Maka pada task

npm install --save-dev gulp-connect

cd belajar-gulp

Oke sekarang coba ubah

npm install --save-dev gulp-connect

var gulp = require('gulp');
var gulpConnect = require('gulp-connect');

//--- ada script di sini ---

gulp.task('server', async function(){
    gulpConnect.server({
        root: "public",
        livereload: true
    });
});

gulp sayHello

Kemudian untuk task defaultnya ubah menjadi seperti ini:

cd belajar-gulp

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
    });
});

var gulp = require('gulp');
var gulpConnect = require('gulp-connect');

//--- ada script di sini ---

gulp.task('server', async function(){
    gulpConnect.server({
        root: "public",
        livereload: true
    });
});

Lalu di setiap task minify, tambahkan

npm install --save-dev gulp-connect

cd belajar-gulp

Sekarang isi lengkap file

npm install --save-dev gulp

cd belajar-gulp

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
    });
});

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
    });
});

var gulp = require('gulp');

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

cd belajar-gulp

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
    });
});

<!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>

<!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>

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
    });
});

cd belajar-gulp

Tunggulah sampai prosesnya selesai.

Setelah itu, tambahkan task berikut di dalam

npm install --save-dev gulp

cd belajar-gulp

Setelah itu, cobalah untuk mengeksekusi taks tersebut dengan perintah:

cd belajar-gulp

Maka hasilnya:

Apa Selanjutnya?

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