Setup GulpJS untuk Meminimalkan File Javascript di Ubuntu 19.10

Gambaran

GulpJS adalah toolkit untuk mengotomatisasi tugas-tugas yang membosankan dan berulang-ulang di lingkungan pengembangan. GulpJS menurut saya adalah sebagai asisten pribadi yang dapat mengerjakan task (tugas). Dengan menggunakan GulpJS sangat membantu sekali dan menghemat banyak waktu.

Apa saja task yang dimaksud:

  • Mempersiapkan local server.
  • Refresh browser supaya dapat melihat perubahan yang terjadi.
  • Optimasi file javascript, css, dan gambar.
  • Kompilator pemroses CSS seperti Sass, Stylus, dan Less.
  • Dan masih buanyak lagi.

Prasyarat

Pertama, atur pengguna non-root dengan hak sudo. Klik di sini untuk petunjuk.

Install build-essential.

$ sudo apt install build-essential

Install curl.

$ sudo apt install curl

Installasi

NodeJS and NPM

Perbarui dan tingkatkan paket lokal Anda.

sudo apt update && sudo apt upgrade -y

Instal NodeJS terbaru yang versi rilis stabil.

$ curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
$ sudo apt install -y nodejs

Verifikasi pemasangan jika berhasil.

$ node -v && npm -v

Output

$ node -v && npm -v
v13.11.0
6.13.7

GulpJS CLI

Install GulpJS CLI.

$ sudo npm install -g gulp-cli

Verifikasi pemasangan jika berhasil.

$ gulp -v
$ gulp -v
CLI version: 2.2.0

Mempersiapkan

Untuk menggunakan GulpJS dengan plugins, Anda memerlukan file gulpfile.js dan file package.json.

  • gulpfile.js: mengonfigurasi, mengirim dan menjalankan tugas bersama dengan manajemen plugin.
  • package.json: melacak dependensi dan versinya.

Buka direktori proyek Anda.

$ cd /lokasi/folder/proyek

Inisialisasi environment NPM untuk membuat package.json:

$ npm init

Saat diminta untuk nama paket, gunakan gulpjs. Tekan ENTER untuk menerima respons default di semua pertanyaan lainnya. Setelah itu, Anda akan melihat ringkasan ini.

About to write to /root/package.json:

{
  "name": "gulpjs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this OK? (yes)

Keitk yes lalu tekan ENTER.

Instal paket gulp lokal dan plugin gulp-uglify.

npm install --save-dev gulp gulp-uglify

Membuat task pada gulp

Buat gulpfile.js di dalam folder root proyek.

nano gulpfile.js

Impor library, lalu tentukan task. Contoh task bernama contohTask.

gulpfile.js
const gulp = require('gulp'); // Impor Gulp
const uglify = require('gulp-uglify'); // Impor Gulp Uglify (Javascript minify)

gulp.task('exampleTask', ()=>{ // mendefinisikan tugas
    return gulp.src('/lokasi/folder/proyek/javascript/*.js') // sumber direktori yang penuh dengan apa pun yang berakhir dengan .js
        .pipe(uglify()) // minify the stream
        .pipe(gulp.dest('/lokasi/folder/proyek/destination/')); // mengirim file ke tujuan
});

Pastikan setidaknya ada satu file javascript di /lokasi/folder/proyek/javascript/file/:

$ ls /lokasi/folder/proyek/javascript/files/

Output

$ ls /lokasi/folder/proyek/javascript/files/
file.js

Jalankan task.

$ gulp contohTask

Output

Working directory changed to ~
Using gulpfile ~/gulpfile.js
Starting 'contohTask'...
Finished 'contohTask' after 59 ms

/lokasi/folder/proyek/destination/ berisi file yang diperkecil.

$ ls /lokasi/folder/proyek/destination/

Output

$ ls /lokasi/folder/proyek/destination/
file.js

Untuk informasi lebih lanjut tentang gulp-uglify, lihat https://www.npmjs.com/package/gulp-uglify.

Diskusi