Pengantar Otomatisasi JavaScript dengan Gulp

Sebagai pengembang web, terkadang kita mendapati diri kita mengulangi tugas membosankan yang sama berulang kali. Jika Anda mempertimbangkan berapa banyak waktu yang terbuang dengan menjalankan perintah build atau menekan refresh pada browser Anda, Anda akan menyadari bahwa Anda dapat menghemat banyak waktu. Selain itu, dengan mengotomatiskan proses Anda, Anda dapat tetap fokus pada tugas yang ada alih-alih meninggalkan "zona" untuk sementara (kondisi produktivitas Anda).

Dalam tutorial otomatisasi JavaScript ini, Anda akan belajar cara mengotomatiskan proses desain dan pengembangan Anda dengan Gulp. Jika Anda lebih berorientasi pada desain, saya mendorong Anda untuk mengatasi ketakutan yang Anda miliki dan terus membaca. Di sisi lain, jika Anda seorang pengembang, Anda akan dapat memahami ini setelah Anda memahami logika di baliknya.

Gulp adalah sistem pembangunan yang menggunakan aliran Node.js untuk menerapkan pendekatan sumber-tujuan asinkron untuk otomatisasi. Semuanya ditulis dalam JavaScript, sehingga mudah bagi siapa saja yang memiliki pengetahuan pengkodean menengah untuk memulai. Proses pembuatan Gulp terdiri dari kumpulan pengamat dan tugas. Selain itu, komunitas di belakang Gulp memelihara direktori plugin besar dalam npm yang membantu menyelesaikan tugas apa pun mulai dari menggabungkan JavaScript hingga membuat font ikon dari SVG.

Alternatif untuk Gulp

Ada banyak alternatif di luar sana, yang sebagian besar telah muncul dalam beberapa tahun terakhir - yang paling menonjol adalah Grunt. Kontes antara Gulp dan Grunt tidak akan pernah memiliki pemenang yang jelas, karena keduanya memiliki pro dan kontra, maka saya akan menghindari menggali lebih dalam. Singkatnya, ketergantungan berat Grunt pada konfigurasi adalah yang mengarahkan orang ke pendekatan JavaScript Gulp. Sementara itu, implementasi GUI asli seperti Koala telah mendapatkan dukungan, sebagian besar dari orang-orang yang tidak mau masuk ke pengkodean. Namun, dengan aplikasi yang dibundel, tidak mungkin mencapai tingkat kemampuan penyesuaian dan perluasan yang ditawarkan Gulp.

Dasar-dasar Otomasi Proses

Plugin

Plugin adalah sarana di mana gulp menyelesaikan setiap proses. Plugin diinstal melalui npm dan dimulai menggunakan "memerlukan".

tugas

Untuk Gulp, tugas selalu memiliki sumber dan tujuan. Di antara mereka terletak pipa yang memanggil setiap plugin dan mengeluarkan hasil yang ditransmisikan ke pipa berikutnya.

gumpalan

Gumpalan adalah pola wildcard yang merujuk ke file. Gumpalan atau array gumpalan digunakan sebagai input dalam sumber tugas.

Pengamat

Pengamat menonton file sumber untuk perubahan dan memanggil tugas setiap kali perubahan terdeteksi.

gulpfile.js

Ini adalah file JavaScript yang ditunjuk oleh perintah "gulp". Ini berisi segala sesuatu mulai dari tugas hingga pengamat atau potongan kode lain yang digunakan oleh tugas.

Tugas Langsung

Untuk memulai, Anda memerlukan Node.js dan shell baris perintah dengan akses administrator. Anda dapat mengunduh Node.js dari sini. Setelah terinstal, Anda dapat menjalankan perintah berikut untuk memastikan bahwa npm sudah diperbarui.

 sudo npm install npm -g

Bendera -g menyatakan bahwa instalasi akan bersifat global.

Sekarang Anda siap untuk menginstal Gulp dan mulai memanggil beberapa tugas sederhana. Gunakan perintah berikut untuk menginstal Gulp secara global.

 sudo npm install gulp -g

Perhatikan bahwa Anda juga dapat menggunakan perintah yang sama untuk memperbarui.

Anda dapat mengunduh starter kit yang akan membantu Anda dengan tugas pertama Anda dari toptal-gulp-tutorial/step1. Ini termasuk tugas yang sangat sederhana yang mengkompilasi file SCSS ke CSS. Itu menggunakan plugin gulp-sass, yang menggunakan libsass. Saya telah memilih libsass di sini karena jauh lebih cepat daripada alternatif Ruby, meskipun tidak memiliki beberapa fungsinya. Setelah berada di direktori root proyek Anda, Anda dapat menggunakan perintah berikut untuk menginstal semua plugin yang diperlukan.

 npm install

Perintah ini membaca file package.json dan menginstal semua dependensi yang diperlukan. Kami menggunakan "npm install" di sini sebagai singkatan untuk yang berikut:

 npm install gulp --save-dev npm install gulp-sass --save-dev

Bendera “–save-dev” menambahkan plugin yang dipilih ke package.json devDependencies sehingga lain kali Anda ingin menginstal semuanya, Anda dapat menggunakan “npm install” yang praktis.

Pada titik ini Anda dapat menjalankan tugas pertama Anda. Jalankan perintah berikut dan perhatikan semua file SCSS di folder /scss dikompilasi ke dalam CSS di direktori yang sesuai:

 gulp scss

Perhatikan bahwa dalam contoh ini kami menentukan tugas yang akan dijalankan. Jika kami menghilangkan nama tugas, yang bernama "default" akan dijalankan.

Panduan Kode

Di atas dicapai hanya dalam 7 baris kode JavaScript. Tentunya, Anda akan merasa seperti di rumah setelah memahami kesederhanaannya:

 var gulp = require('gulp'); var scss = require('gulp-sass');

Pada awalnya kita menginisialisasi semua plugin yang akan kita gunakan. Gulp adalah satu-satunya yang tidak bisa kita lakukan tanpa:

 gulp.task('scss', function() {

Kami mendefinisikan tugas bernama "scss":

 return gulp.src('scss/*.scss')

Atur file sumber untuk tugas tersebut. Ini didefinisikan sebagai gumpalan. Dalam contoh ini kita merujuk ke semua file di folder "scss/" yang diakhiri dengan ".scss".

 .pipe(scss())

Pada titik ini, kami memanggil plugin gulp-sass yang sebelumnya kami definisikan:

 .pipe(gulp.dest('css'));

Terakhir, kami menggunakan "gulp.dest" untuk menentukan folder tujuan untuk file kami. Ini juga bisa berupa nama file tunggal jika file-file tersebut digabungkan.

Untuk lebih meningkatkan implementasi otomatisasi proses ini, Anda dapat mencoba memasukkan beberapa plugin Gulp lainnya. Misalnya, Anda mungkin ingin mengecilkan produk akhir dari tugas Anda menggunakan gulp-minify-css dan secara otomatis menambahkan awalan vendor dengan gulp-autoprefixer.

Mempekerjakan Pengamat

Saya telah membuat starter kit pengamat yang dapat Anda gunakan langsung. Anda dapat mengunduhnya dari toptal-gulp-tutorial/step2. Ini mencakup versi yang disempurnakan dari tugas SCSS yang dibuat sebelumnya, dan pengamat yang melihat file sumber dan memanggil tugas. Untuk memulainya, gunakan perintah berikut:

 gulp

Perintah ini memulai tugas "default" yang memulai pengamat. Pada titik ini Anda dapat mengedit file SCSS dan melihat file CSS dikompilasi ulang. Anda akan dapat melihat pemberitahuan Gulp di baris perintah.

Panduan Kode

Kami telah menyiapkan pengamat untuk tugas kami dengan hanya 3 baris kode tambahan. Konon, starter kit pengamat tidak berbeda jauh dari contoh pengantar. Pada bagian ini, kita akan membahas semua penambahan dan perubahan.

 return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

Dalam contoh ini, sumber Gulp dilengkapi dengan array gumpalan. Yang pertama menyertakan semua file yang diakhiri dengan ".scss" juga di subfolder, dan yang kedua tidak termasuk yang dimulai dengan "_". Dengan cara ini kita dapat menggunakan fungsi bawaan SCSS @import untuk menggabungkan file _page.scss.

 gulp.task('default', ['scss'], function() {

Di sini kita mendefinisikan tugas "default". Tugas "scss" dijalankan sebagai ketergantungan sebelum "default".

 gulp.watch('scss/**/*.scss', ['scss']);

Terakhir, kami memanggil fungsi jam tangan Gulp untuk menunjuk ke file apa pun yang diakhiri dengan ".scss" dan setiap kali terjadi peristiwa perubahan, untuk menjalankan tugas "scss".

Sekarang Anda siap untuk membuat pengamat baru untuk proses otomatis lainnya seperti penggabungan JavaScript, petunjuk kode, kompilasi CoffeeScript, atau apa pun yang mungkin terlintas dalam pikiran. Untuk mempelajari lebih dalam implementasi otomatisasi JavaScript ini, saya mengusulkan untuk menambahkan gulp-notify yang akan memberi tahu Anda saat tugas dijalankan. Selain itu, Anda dapat membuat tugas terpisah untuk mengecilkan kode CSS yang dihasilkan dan membuat tugas "scss" berjalan sebagai ketergantungannya. Terakhir, Anda dapat menggunakan gulp-rename untuk menambahkan akhiran “.min” ke file yang dihasilkan.

Plugin Gulp Tingkat Lanjut untuk Otomatisasi JavaScript

Ada ribuan plugin di basis plugin Gulp, beberapa di antaranya jauh melampaui otomatisasi JavaScript sederhana dari proses pembuatan. Berikut adalah beberapa contoh yang luar biasa:

Sinkronisasi Browser

BrowserSync menyuntikkan CSS, JavaScript, dan secara otomatis menyegarkan browser setiap kali ada perubahan. Selain itu, ini berisi fitur ghostMode yang dapat digunakan untuk menakut-nakuti rekan kerja Anda atau untuk sangat mempercepat pengujian browser Anda.

Browserify

Browserify menganalisis panggilan "memerlukan" di aplikasi Anda dan mengonversinya menjadi file JavaScript yang dibundel. Juga, ada daftar paket npm yang dapat diubah menjadi kode browser.

paket web

Mirip dengan Browserify, Webpack bertujuan untuk mengonversi modul dengan dependensi ke file statis. Yang satu ini memberikan lebih banyak kebebasan kepada pengguna tentang bagaimana dependensi modul akan diatur, dan tidak bertujuan untuk mengikuti gaya kode Node.js.

karma

Gulp-karma membawa lingkungan pengujian yang terkenal ke Gulp. Karma mengikuti pendekatan konfigurasi paling sedikit yang juga didukung oleh Gulp.

Kesimpulan

Dalam tutorial otomatisasi proses ini saya telah menunjukkan keindahan dan kesederhanaan menggunakan Gulp sebagai alat pembuatan. Dengan mengikuti langkah-langkah yang dijelaskan dalam tutorial Anda sekarang akan siap untuk sepenuhnya mengotomatisasi proses pengembangan perangkat lunak Anda baik di masa depan dan proyek warisan Anda. Menginvestasikan waktu untuk menyiapkan sistem pembangunan untuk proyek lama Anda pasti akan menghemat waktu Anda yang berharga di masa depan.

Nantikan tutorial Gulp yang lebih canggih segera hadir.