Gulp - Perangkat untuk Mengotomatiskan Tugas-Tugas Menyakitkan dalam Pembangunan

Gulp adalah perangkat kecil yang mengotomatiskan tugas berulang. Tugas berulang tersebut biasanya mengkompilasi file CSS, JavaScript atau pada dasarnya ketika Anda menggunakan kerangka kerja yang berhubungan dengan file JavaScript/CSS yang tidak standar, Anda akan ingin menggunakan alat otomatisasi yang mengambil file tersebut, mengemasnya bersama-sama dan mengkompilasi semuanya sehingga browser Anda dapat dengan mudah memahaminya. dia.

Gulp berguna untuk mengotomatiskan tugas-tugas berikut:

• Kompilasi file JS dan CSS
• Menyegarkan halaman browser saat Anda menyimpan file
• Jalankan pengujian unit
• Analisis kode
• Menyalin file yang dimodifikasi ke direktori target

Untuk melacak semua file yang Anda perlukan untuk membuat file gulp, mengembangkan alat otomatisasi, atau mengotomatiskan tugas, Anda perlu membuat file package.json. File tersebut pada dasarnya berisi penjelasan tentang apa yang ada di dalam proyek Anda, dependensi apa yang Anda perlukan agar proyek Anda berfungsi.

Dalam tutorial ini, Anda akan mempelajari cara menginstal Gulp dan cara mengotomatiskan beberapa tugas dasar untuk proyek Anda. Kami akan menggunakan npm – yang merupakan singkatan dari manajer paket node. Itu diinstal dengan Node.js, dan Anda dapat memeriksa apakah Anda sudah menginstal Nodejs dan npm dengan:

node --version
npm --version

Jika Anda belum menginstalnya di sistem Anda, saya sarankan Anda untuk memeriksa tutorial: Instal Versi Nodejs dan NPM Terbaru di Sistem Linux.

Cara Install Gulp di Linux

Instalasi gulp-cli dapat diselesaikan dengan npm menggunakan perintah berikut.

npm install --global gulp-cli

Jika Anda ingin menginstal modul gulp secara lokal (hanya untuk proyek saat ini), Anda dapat menggunakan petunjuk di bawah:

Buat direktori proyek dan navigasikan di dalamnya:

mkdir myproject
cd myproject

Selanjutnya, gunakan perintah berikut untuk menginisialisasi proyek Anda:

npm init

Setelah menjalankan perintah di atas, Anda akan ditanyai serangkaian pertanyaan untuk memberi nama proyek Anda, deskripsi versi dan lain-lain. Terakhir, konfirmasikan semua informasi yang Anda berikan:

Sekarang kita dapat menginstal paket gulp di proyek kita dengan:

npm install --save-dev gulp

Opsi --save-dev memberitahu npm untuk memperbarui file package.json dengan devDependencies yang baru.

Perhatikan bahwa devDependencies perlu diselesaikan selama pengembangan, sedangkan Dependensi selama run time. Karena gulp adalah alat yang membantu kita dalam pengembangan, hal ini perlu diselesaikan pada waktu pengembangan.

Buat File Gulp

Sekarang mari kita buat gulpfile. Tugas yang ingin kita jalankan akan ditemukan di file itu. Perintah ini dimuat secara otomatis saat menggunakan perintah gulp. Dengan menggunakan editor teks, buat file bernama gulpfile.js. Untuk tujuan tutorial ini, kita akan membuat tes sederhana.

Anda dapat memasukkan kode berikut ke dalam gulpfile.js Anda:

var gulp = require('gulp');

gulp.task('hello', function(done) {
        console.log('Hello world!');
        done();
});

Simpan file dan sekarang coba jalankan dengan:

gulp hello

Anda akan melihat hasil berikut:

Inilah yang dilakukan kode di atas:

• var gulp=require('gulp'); – mengimpor modul gulp.
• gulp.task('hello', function(done) { – mendefinisikan tugas yang akan tersedia dari baris perintah.
• console.log('Halo dunia!'); – cukup cetak “Halo dunia! ” ke layar.
• done(); – kita menggunakan fungsi callback ini untuk menginstruksikan gulp bahwa tugas kita telah selesai.

Tentu saja hal di atas hanyalah contoh untuk menunjukkan bagaimana gulpfile.js dapat diatur. Jika Anda ingin melihat tugas yang tersedia dari gulpfile.js Anda, Anda dapat menggunakan perintah berikut:

gulp --tasks

Plugin Gulp

Gulp memiliki ribuan plugin yang tersedia, semuanya menyediakan fungsi berbeda. Anda dapat memeriksanya di halaman plugin Gulp.

Di bawah ini kita akan menggunakan plugin minify-html dalam contoh yang lebih praktis. Dengan fungsi di bawah ini, Anda dapat memperkecil file HTML dan menempatkannya di direktori baru. Namun pertama-tama, kita akan menginstal plugin gulp-minify-html:

npm install --save-dev gulp-minify-html

Anda dapat membuat gulpfile.js Anda terlihat seperti ini:

cat gulpfile.js

Contoh Keluaran

// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

Kemudian Anda dapat memperkecil file HTML menggunakan perintah berikut.

gulp minify-html
du -sh /src dest/

Kesimpulan

Gulp adalah perangkat berguna yang dapat membantu Anda meningkatkan produktivitas. Jika Anda tertarik dengan alat ini, saya sangat menyarankan Anda memeriksa halaman dokumentasinya, yang tersedia di sini.