Berkenalan Dengan Gulp.js

Leave a Comment / JavaScript, Node.js / By

Gulp dibuat dengan menggunakan Node.js. Gulp biasanya digunakan untuk mengeksekusi task automasi seperti Minify dan optimasi file HTML, CSS, Javascript, Menjalankan Web Server, Me-reload server secara otomatis, dan lain sebagainya.

Instalasi Gulp

Silahkan kalian install gulp cli dengan menggunakan NPM. untuk caranya silahkan kalian buka CMD dan ketik perintah berikut ini.

npm install --g gulp-cli

Jika sudah berhasil menginstall gulp, Maka selanjutnya silahkan kalian ketik perintah berikut untuk mengecek versi gulp.

gulp --version

Perintah diatas akan memunculkan versi gulp yang telah kalian install.

Membuat Project

Silahkan kalian buat folder, disini kita akan membuat folder belajar-gulp kalian bisa ubah nama folder sesuai dengan keinginana kalian. Setelah itu masuk kedalam folder tersebut menggunakan terminal dan jalankan perintah berikut.

npm init

Perintah diatas akan membuat file package.json yang digunakan untuk menampung library yang akan kita gunakan.

Langkah selanjutnya kita akan menginstall gulp di dalam folder project yang telah kita buat. silahkan jalankan perintah berikut ini untuk menginstal gulp.

npm install --save-dev gulp

Setelah proses menginstall berhasil, maka langkah selanjutnya silahkan kalian buat file gulpfile.js didalam folder project yang sudah dibuat tadi.

File gulpfile.js ini nantinya akan diisi dengan task untuk dikerjakan oleh Gulp.

Membuat Task

Setalah berhasil menginstall gulp, langkah selanjutnya kita akan membuat task yang akan dijalankan oleh Gulp. Adapun task yang akan kita buat yaitu:

  • Task Membuat Server
  • Task Minify File
  • Task Watch
  • Task Live Reload
  • Task Clean dan Build

Baca Juga

Cara Menggunakan EJS Untuk Template Engine di Node.js

Membuat Server

Dengan Gulp kita bisa membuat server untuk menjalankan project kita. Untuk membuat server di Gulp kita butuh package gulp-connect

Kalian bisa install package gulp-connect dengan menggunakan perintah berikut.

npm install --save-dev gulp-connect

Setelah berhasil menginstall package gulp-connect, silahkan kalian buka file gulpfile.js dan silahkan tambahkan task berikut ini.

const gulp = require('gulp')
const gulpConnect = require('gulp-connect')

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

Pada kode task di atas, kita menentukan root direktorinya adalah src. Direktori ini belum kita buat.

Silahkan buat folder bernama src, lalu di dalamnya buat file HTML bernama index.html 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>Leravio - Berkenalan Dengan Gulp</title>
    <link href="style.css" rel="stylesheet" />
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

Untuk menjalankan Task server kita bisa menggunakan perintah berikut ini.

gulp server

Sehingga akan muncul output seperti ini.

Sekarang kalian bisa melihat hasil project kalian dengan membuka web browser kemudian ketik link localhost:8080.

Minify File

Minify merupakan suatu prosess dalam mengoptimasi file supaya ukuran file menjadi lebih kecil, Sehingga semakin kecil ukuran file maka kecepatannya akan meningkat.

Kita memerlukan modul untuk melakukan minify berikut ini modul yang akan digunakan untuk minify.

  • gulp-htmlmin modul ini digunakan untuk minify file HTML
  • gulp-minify-css modul ini digunakan untuk minify file CSS
  • gulp-uglify modul ini digunakan untuk minify file Javascript

Kemudian kita juga memerlukan modul gulp-concat yang digunakan untuk menggabungkan beberapa file Javascript.

Silahkan ketik perintah dibawah ini untuk menginstall modul yang sudah saya jelaskan tadi.

npm install gulp-htmlmin gulp-uglify gulp-minify-css gulp-concat --save-dev

Jika sudah berhasil diinsatal, Silahkan kalian buat struktur folder seperti berikut ini.

Silahkan kalian perhatikan gambar diatas disitu saya telah membuat folder baru dengan nama css dan js dan didalamnya terdapat file style.css dan app.js.

Nahh nanti kita akan melakukan minify pada 3 file yang ada didalam folder src yaitu index.html,style.css, dan app.js. Kemudian hasil dari minify tersebut akan kita masukan kedalam folder dist.

Silahkan kalian isi terlebih dahulu didalam file style.css dan app.js seperti berikut ini.

src/css/style.css

body {
    background-color: skyblue;
}

h1 {
    color: bisque;
}

src/js/app.js

var text = document.getElementById("text");

text.innerHTML = "Berkenalan Dengan Gulp";
text.style.fontSize = "30px";

Langkah selanjutnya kita akan membuat task untuk melakukan minify. Silahkan kalian buka file gulpfile.js kemudian tambahkan kode berikut.

Setelah itu, kita akan membuat task untuk melakukan minify.

Bukalah kembali file gulpfile.js kemudian tambahkan kode berikut.

// import modul
const gulpMinifyCss = require('gulp-minify-css')
const gulpConcat = require('gulp-concat')
const gulpUglify = require('gulp-uglify')
const gulpHtmlmin = require('gulp-htmlmin')

// task minify
gulp.task('minify-css', async function () {
    gulp.src('./src/css/*.css')
        .pipe(gulpMinifyCss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./dist/src/css/'))
        .pipe(gulpConnect.reload())
})

gulp.task('minify-js', async function () {
    gulp
        .src([
            './src/js/*.js'
        ])
        .pipe(gulpConcat('bundle.js'))
        .pipe(gulpUglify())
        .pipe(gulp.dest('dist/src/js/'))
})

gulp.task('minify-html', async function () {
    gulp.src('src/*.html')
        .pipe(gulpHtmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('dist/src/'))
})

Selanjutnya kalian dapat menjalankan task untuk melakukan minify dengan perintah berikut ini.

gulp minify-css
gulp minify-js
gulp minify-html

Dan jika selesai kalian dapat melihat hasil minify didalam folder dist.

Task Watch

Saat ini kita menjalankan task harus mengetikan perintah berikut satu persatu.

gulp minify-css
gulp minify-js
gulp minify-html

Ketika ada perbuhan didalam file maka kita harus mengetik lagi perintah diatas supaya task minify berjalan. Supaya kita tidak perlu ulang perintah tersebut. Kita bisa memanfaatkan Gulp Watch.

Gulp Watch bertugas untuk memantau perubahan pada file, lalu ketika ada perubahan maka akan menjalankan task secara otomatis

Silahkan kalian buka kembali file gulpfile.js dan tambahkan kode berikut untuk membuat Watch.

gulp.task('watch', async function () {
    gulp.watch('./src/js/*.js', gulp.series('minify-js'))
    gulp.watch('./src/css/*.css', gulp.series('minify-css'))
    gulp.watch('./src/*.html', gulp.series('minify-html'))
})

Penjelasan mengenai kode diatas yaitu gulp watch akan memantau file yang berada didalam folder src. Kemudian gulp akan menjalankan otomatis task minify.

Untuk menjalankannya kalian dapat mengetik perintah berikut.

gulp watch

Perintah diatas akan secara otomatis melakukan minify jadi kita tidak perlu mengetikan satu persatu dan berulang lagi.

Menggunakan Live Reload

Live Reload ini berfungsi untuk me-reload secara otomatis web browser ketika ada perubahan didalam file.

Live Reload dapat kita gunakan dengan cara memanggil method reload() di pipe() yang diinginkan.

Disini saya contohkan mengaktifkan live reload ketika mengubah file HTML. Maka pada task minify-html akan saya berikan seperti ini.

gulp.task('minify-html', async function () {
    gulp.src('src/*.html')
        .pipe(gulpHtmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('dist/src/'))
        .pipe(gulpConnect.reload())
})

Supaya pada semua task minify kalian ingin mengaktifkan live reloadnya maka kalian bisa tambahkan .pipe(gulpConnect.reload()) pada setiap task minify seperti contoh diatas, Sehingga task minify kalian menjadi seperti berikut ini.

// task minify
gulp.task('minify-css', async function () {
    gulp.src('./src/css/*.css')
        .pipe(gulpMinifyCss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./dist/src/css/'))
        .pipe(gulpConnect.reload())
})

gulp.task('minify-js', async function () {
    gulp
        .src([
            './src/js/*.js'
        ])
        .pipe(gulpConcat('bundle.js'))
        .pipe(gulpUglify())
        .pipe(gulp.dest('dist/src/js/'))
        .pipe(gulpConnect.reload())
})

gulp.task('minify-html', async function () {
    gulp.src('src/*.html')
        .pipe(gulpHtmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('dist/src/'))
        .pipe(gulpConnect.reload())
})

Kemudian kita buat task default untuk menentukan task watch dan server sebagai default.

gulp.task('default', gulp.series('watch', 'server'))

Sekarang kita dapat menjalankan semua task yang telah kita buat hanya menggunakan perintah berikut ini.

gulp

Silahkan kalian lakukan perubahan pada file didalam folder src maka akan secara otomatis di tampilan web browser akan berubah.

Task Clean dan Build

Disini kita memerlukan modul gulp-clean. silahkan ketik perintah berikut untuk menginstall modul gulp-clean.

npm i --save-dev gulp-clean

Setelah berhasil menginstall, Silahkan kalian tambahkan task berikut didalam file gulpfile.js.

const clean = require('gulp-clean')

// ---

gulp.task('clean', function() {
  return gulp.src('dist', {
    read: false,
    allowEmpty: true
  }).pipe(clean())
})

gulp.task('build', gulp.series('clean', 'minify-css', 'minify-js', 'minify-html'))

Sehingga secara keseluruhan file gulpfile.js menjadi seperti berikut ini.

const { tree } = require('gulp')
const gulp = require('gulp')
const gulpConnect = require('gulp-connect')
const gulpMinifyCss = require('gulp-minify-css')
const gulpConcat = require('gulp-concat')
const gulpUglify = require('gulp-uglify')
const gulpHtmlmin = require('gulp-htmlmin')
const clean = require('gulp-clean')

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

// task minify
gulp.task('minify-css', async function () {
    gulp.src('./src/css/*.css')
        .pipe(gulpMinifyCss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./dist/src/css/'))
        .pipe(gulpConnect.reload())
})

gulp.task('minify-js', async function () {
    gulp
        .src([
            './src/js/*.js'
        ])
        .pipe(gulpConcat('bundle.js'))
        .pipe(gulpUglify())
        .pipe(gulp.dest('dist/src/js/'))
        .pipe(gulpConnect.reload())
})

gulp.task('minify-html', async function () {
    gulp.src('src/*.html')
        .pipe(gulpHtmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('dist/src/'))
        .pipe(gulpConnect.reload())
})

gulp.task('watch', async function () {
    gulp.watch('./src/js/*.js', gulp.series('minify-js'))
    gulp.watch('./src/css/*.css', gulp.series('minify-css'))
    gulp.watch('./src/*.html', gulp.series('minify-html'))
})

gulp.task('default', gulp.series('watch', 'server'))

gulp.task('clean', function() {
    return gulp.src('dist', {
      read: false,
      allowEmpty: true
    }).pipe(clean())
  })
  
gulp.task('build', gulp.series('clean', 'minify-css', 'minify-js', 'minify-html'))

Untuk melakukan build kalian bisa menggunakan perintah berikut.

gulp build

Sedangkan untuk melakuakn clean kalian bisa menggunakan perintah berikut.

gulp clean

Penutup

Sekian untuk tutorial Menggunakan Gulp JS. Jika ada kesulitan kalian bisa komentar dibawah ini

Leave a Comment

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

Scroll to Top