apa itu taskrunner / build tools ? apa itu gulp ?

saya baru aja belajar gulp, dan saya jatuh cinta. Saya bener-bener berterima kasih banget sama orang yang udah buat tool tersebut. salah satu permasalah hidup terpecahan, hehehe. oke bagi temen-temen yang belum tahu saya akan jelaskan dan sedikit tutorial tentang gulp.

oke jadi gulp biasanya digunakan untuk mengerjakan task-task di front end development : - menjalankan web server - prepossesing Sass / Less - reload browser secara otomatis kalau kita ngedit file - mengoptimasi file2, css, js, images (dikompres)

itu aja yang bakal saya bahas, sebenernya masih banyak lagi task-task yang bisa dilakukan di gulp, cuma karena saya baru belajar itu ya saya bakalan share itu dulu, mungkin nanti kita lanjut lagi :)

jadi gulp sendiri itu dikategorikan sebagai taskrunner atau build tools. ya karena emang fungsinya itu. menjalankan tugas-tugas dan ngebuild app yang kita develop. Ada dua build tools yang besar dan banyak digunakan, yaitu gulp dan grunt. dua-duanya sama aja, beda-beda dikit lah, kaya gojek sama grab gitu.

oke, mulai ke tutorialnya. dengan mengikuti tutorial ini temen-temen nantinya bakal bisa : - menjalankan web server - compile sass ke css - refresh browser secara otomatis - optimisasi file-file, seperti .css, dan .js

ngga cuma itu, tapi ntar semua task-task diatas bakal dirangkai dalam satu task aja, jadi tinggal tulis "gulp" semuanya otomatis jalan, mantep gak tuh ?

INSTALL GULP

untuk install gulp temen-temen butuh node.js terlebih dahulu disini, <a href='https://nodejs.org/en/ '>https://nodejs.org/en/ </a> pilih lang LTS aja, klo udah install node.js ntar temen-temen bisa install gulp di bash / terminal / cmd tergantung pake OS apa.


// bash

$ sudo npm install gulp -g

note :sudo hanya dibutuhkan di mac, lainnya ga perlu sudo. mac butuh akses admin untuk install gulp secara global

"npm install" ini adalah command npm (Node Package Manager) untuk menginstall gulp ke komputer temen-temen.

"-g" flag bakal menginstall gulp secara global di komputer temen-temen.

MEMBUAT GULP PROJECT

pertama-tama temen-temen coba buat folder baru dengan nama "cobaCoba", tapi terserah temen aja mau kasih nama apa :). terus temen2 buka folder tersebut di bash / cmd, saya sendiri pake git Bash, walaupun pake windows jadi serasa pake linux. kemudian tulis "npm init"

npm init ini bakal membuat file "package.json" yang isinya informasi2 tentang proyek kita, kita bakal disuruh isi nama proyek version descripsi dll, saya enter-enter aja biar cepet. nantinya bisa kok diedit di file package.json nya kalau perlu perubahan.

kalau udah, kita install Gulp pada proyek cobaCoba secara lokal.


//bash

$ npm install gulp --save-dev


"--save-dev" itu maksudnya supaya gulp diinstal secara lokal di folder "cobaCoba" saja, dan menadikan gulp sebagai dev depedency di "package.json"


{
  "name": "cobacoba",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1" // <-- nih !!
  }
}


MENENTUKAN STUKTUR FOLDER

saya disini akan buat struktur folder seperti ini :



 |- app/
      |- css/
      |- fonts/
      |- images/
      |- index.html
      |- js/
      |- scss/
  |- dist/
  |- gulpfile.js
  |- node_modules/
  |- package.json


folder "app" adalah tempat kita develop web, sementara "dist" bakal diisi file-file production. pokoknya ntar kita bakal berkutat di app folder ( index.html, .js .css .scss file semuanya kita buat didalam "app" folder)

MENULIS GULP TASK

temen-temen perlu buka file gulpfile ntar didalamnya temen-temen instruksikan apa-apa saya yang perlu dilakukan gulp, contoh sederhana :


// gulpfile.js

var gulp = require("gulp");


statement "require" bakal memberi perintah ke Node untuk mencari ke folder "node-modules", package dengan nama "gulp". setelah itu, kita assign ke variabel "gulp". setelah itu kita bisa menulis Gulp task dengan variabel tersebut.


// gulpfile.js

gulp.task("nama-task",function() {
    // tulis perintah disini
});


"nama-task" ya nama tasknya, mungkin temne-temen sekarang masih bngung, tapi sabar, kita menuju kesana.. kita buat "greeting" task yang fungsinya nge log "hallo teman-teman".


// js

gulp.task("greeting",function() {
    console.log("hallo teman-teman");
});

kalau misal kita run task ini di bash/ command line



$ gulp greeting


maka akan muncul seperti ini

tapi, biasanya task ga sesimpel ini, bakal lebih complex sedikit dengan beberapa Gulp method, seperti gulp.src, .pipe ..


//gulpfile.js

gulp.task('task-name', function () {
  return gulp.src('source-files') // mengambil sumber kode dengan gulp.src
    .pipe(aGulpPlugin()) // kirim ke plugin, kode kita bakal diproses dengan plugin tertentu
    .pipe(gulp.dest('destination')) // output atau hasil proses bakal dikirim ke destinasi folder dengan gulp.dest
})


biar gak bingung langsung praktek aja..

PREPROCESSING DENGAN GULP

kita bisa compile sass file menjadi css file dengan gulp, tapi kita butuh pluginnya terlebih dahulu, namanya "gulp-sass". temen2 bisa install "gulp-sass" di node dengan cara yang sama seperti kita menginstall gulp sebelumnya

// di bash

$npm install gulp-sass --save-dev

setelah package terintall, kita perlu me"require" gulp-sass dari node-module folder.

// gulpfile.js

var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');

kita ubah template diatas aGulpPlugin() dengan sass(). karena task ini berfungsi mengcompile sass menjadi css, maka kita beri nama compileSass.

// gulpfile.js

gulp.task("compileSass", function() {
  return gulp.src("app/scss/styles.scss") // source file kita ubah dengan tempat dimana kita menyimpan .scss file
    .pipe(sass()) // using gulp-sass
    .pipe(gulp.dest("app/css))
  });

sekarang ayo kita test tas diatas dengan cara menambahkan file sass dalam "styles.scss"

//styles.scss

.testing {
  width: percentage(5/7);
}

sekarang, kita coba run "gulp sass" pada bash / command line, maka styles.css bakal muncul di app/css folder. dimana file tersebut merupakan hasil compile dari .scss file



/* styles.css */
.testing {
  width: 71.42857%;
}

contoh diatas hanya akan mengcompile satu file scss saja, yaitu styles.scss. gimana sekarang caranya kalau kita ingin mengcompile lebih dari satu file ? caranya dengan Node Globs.

GLOBBING IN NODE

globbing maksudnya kita tentukan agar gulp.src bisa match dengan lebih dari satu file. ada 4 jenis globbing yang biasanya dipakai, yaitu :

1. *.scss : (*) pattern disebut wildcard yang bakal match/memilih semua file dengan ekstensi .scss di dalam folder tersebut.

2. **/*.scss : nah ini lebih ekstrem lagi dari yang diatas, pattern ini bakal match dengan ekstensi .scss di dalam folder tersebut(root folder) dan semua turunan foldernya (child dorectories)

3. !not-me.scss : (!) menandakan agar gulp tidak menginclude file yang diikuti oleh (!), jadi pada kasus ini not.me.scss akan di exclude dari matched file.

4. *.+(scss|sass) (+) dan () berfungsi agar Gulp bisa match dengan berbagai macam ekstensi. pada kasus ini maka semua file pada root folder dengan ekstensi .scss atau .sass akan match (dipilih).

karena sekarang kita udah paham dengan globbing maka sebaiknya kita ganti app/scss/styles.scss dengan scss/**/*.scss. maka semua file dengan ekstensi .scss di app/scss atau child directorynya bakal dipilih (matched).


//gulpfile.js

gulp.task('compileSass', function() {
  return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
})

sekarang kita udah bisa mencompile file sass menjadi file css. tapi kan cape juga klo setiap saat kita harus run "gulp compileSass". syukur, alhamdulillah, kita bisa kasih komando ke gulp untuk mengcompile secara otomatis setiap kita nge-save .scss file melalui proses yang disebut "watching".

WATCHING SASS FILES FOR CHANGES

ada method di Gulp yang namanya "watch", yang fungsinya ngecek apabila ada file yang telah disimpan dan kemudian menjalan task yang telah ditentukan. syntax "watch" :

// Gulp watch syntax

gulp.watch('files-to-watch', ['tasks', 'to', 'run']);

kita bisa implementasikan untuk task kita, compileSass.

// gulpfile.js

gulp.task('watch', function(){
  gulp.watch('app/scss/**/*.scss', ["compileSass"]);
  // Other watchers
})

apabila kita run gulp watch, maka Gulp mulai untuk "watching"..

sekarang, "compileSass" akan secara otomatis dijalankan apabila kita menyimpan .scss file.

LIVE-RELOADING WITH BrowserSync

browser Sync berfungsi untuk menjalankan web-server, sehingga kita bisa dengan mudah melakukan live reloading. ngga perlu lagi kita reload page di browser secara manual.

pertama-tama, seperti biasa, kita harus install packagenya dulu :


//bash

$ npm install browser-sync --save-dev

kemudian kita tulis kodenya di gulpfile.js untuk menggunakan browser-sync


//gulpfile.js

var browserSync = require('browser-sync').create();

//setelah itu kita buat "browserSync" task, agar gulp bisa membuat web server

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'app'
    },
  })
})

dengan task browserSync, maka web server akan dijalankan dengan 'app' sebagai root servernya.

sekarang coba temen2, edit .scssnya, misal backgroundnya, otomatis di browser index.htmlnya berubah warna.

ngomongin live-reloading, kan baru aja kita buat .scss live-reload, karena kita nge"watch" file .scss, kenapa ngga sekalian aja kita "watch" html dan js file. jadi nanti, kalau misal ada perubahan di file html dan js maka otomatis browser akan otomatis ke reload.

//gulpfile.js

gulp.task('watch', ['browserSync', 'compileSass'], function (){
  gulp.watch('app/scss/**/*.scss', ['compileSass']);
    // Reloads the browser whenever HTML or JS files change
  gulp.watch('app/*.html', browserSync.reload);
  gulp.watch('app/js/**/*.js', browserSync.reload);
})

ok, jadi sejauh ini kita udah bisa ngerjain beberapa hal : 1. ngejalanin web server buat development 2. ngecompile Sass file ( menggunakan Sass preprocessor) 3. Reload browser ketika menyimpan data

sekarang kita tinggal mengoptimasi file css dan js. supaya nantinya website ketika produktion bakal ngebut, wuzzz wuzz...

OPTIMASI file-file CSS dan JAVASCRIPT

pada intinya, optimasi disini adalah dengan cara membuat file2 tersebut membutuhkan data penyimpanan sekecil mungkin, tanpa mengorbankan fungsinya. saya akan melakukannya dengan menempuh dua langkah, yaitu : 1. menggabung semua file-file js dan css yang diinclude ke dalam index.html 2. meng-compress file yang sudah disatukan tersebut

untuk langkah pertama kita bisa menggunakan plugin "gulp-useref" untuk langkah kedua kita akan menggunakan plugin "gulp-uglify-es" untuk file js dan "gulp-cssnano" untuk file css.

"gulp-useref" akan menggabungkan(concatenate) file2 CSS dan Javascript dengan cara melihat ke satu source file, dan melihat comment yang dimulai dengan "<!--build:" dan berakhir dengan "<!--endbuild-->". syntaxnya seperti ini :


<!-- build:<type> <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

<type> bisa diisi "js", "css" atau "remove" yang berfungsi menghilangkan link / include dengan kata lain dihapus tanpa menghasilkan apapun di build path.

sedangkan <path> adalah target dimana kita akan menaruh file yang digenerate oleh plugin "useref"

contoh, anggap kita include 3 file js dan 2 file CSS di index.html. Maka kita tambahkan comment "<!--build:" dan "<!--endbuild-->" sebelum dan sesudah ketiga file js tersebut. dan file buildnya akan bernama "main.min.js". kemudian kita juga akan build CSS file dengan cara yang agak sama ( berbeda <type> sama <path>nya ) namun secara general sama saja, oh ya, nama file buildnya akan kita beri nama "styles.min.css"

//index.html

<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/another-stylesheet.css">
<!--endbuild-->

<!--build:js js/main.min.js -->
<script src="js/lib/library1.js"></script>
<script src="js/lib/library2.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->

sekarang kita konfigurasi gulpfilenya, tapi sebelumnya kita download dulu plugin2 yang dibutuhkan

//bash

$ npm install gulp-useref --save-dev

//setelah package terinstall, kemudian kita butuh gulp-uglify-es plugin

$ npm install gulp-uglify --save-dev

//gulpfile.js

// Other requires...
var useref = require('gulp-useref');
var uglify = require('gulp-uglify-es').default; //plugin untuk mengkompres .js file
var cssnano = require ('gulp-cssnano'); ////plugin untuk mengkompres .css file
var gulpIf = require('gulp-if');

gulp.task('optimasi', function(){
  return gulp.src('app/*.html')
    .pipe(useref())                 // sampai disini useref menghasilkan file-file build (e.g .css dan .js)
    .pipe(gulpIf('*.js', uglify())) // jika filenya .js maka compress menggunakan plugin uglify
    .pipe(gulpIf('*.css', cssnano())) // jika filenya .css maka compress mengggunakan plugin cssnano
    .pipe(gulp.dest('dist'))          // hasinya disimpan di folder dist
});

dengan task "optimasi" diatas, apabila kita run "gulp optimasi" di command line, maka dengan otomatis file-file css dan js kita disatukan dan dikompres sehingga nantinya, app kita memiliki performa yang cihuy.

MENGCOPY FONTS DAN IMAGES KE DIST

sebenarnya image atau gambar bisa dioptimasi dengan gulp plugin, tapi untuk sekarang agar lebih simple dan mudah kita copy saja file2 image tanpa di optimasi terlebih dahulu. sedangkan font tidak perlu lagi dioptimasi, jadi tinggal copy saja ke dist.

kita bisa mengcopy file hanya dengan menentukan sumber "gulp.src" dan "gulp.dest" tanpa butuh plugin.

// gulpfile.js

gulp.task('images', function() {
  return gulp.src('app/images/**/*')
  .pipe(gulp.dest('dist/images'))
})

gulp.task('fonts', function() {
  return gulp.src('app/fonts/**/*')
  .pipe(gulp.dest('dist/fonts'))
})

MEMBERSIHKAN FILE SECARA OTOMATIS

kenapa sih kita butuh menghapus file ? karena ketika kita build app pertama, dan kedua, dan seterusnya pastinya berbeda. kalau kita tumpuk file dari build yang pertama kedua dan seterusnya, maka bisa jadi nanti file di folder "dist" banyak file-file yang tidak berguna dan bikin berat app. oleh sebab itu, sebelum kita build kita hapus dulu semua file di folder "dist" baru kemudian kita build app kita.

untuk menghapus file kita butuh plugin "del", mari kita install

//bash

npm install del --save-dev

kita require node packagenya dan kita hapus isi dari folder "dist".

// gulpfile.js

var del = require("del");

gulp.task('clean:dist', function() {
  return del.sync('dist');
})

sekarang kita kombinasikan semua task-task yang telah kita buat

MENGKOMBINASIKAN TASK-TASK GULP

coba kita review task apa saja yang telah kita buat, 1. task yang berkaitan dengan web development, yaitu task "watch" yang berfungsi menjalankan webserver, auto reloading, dan compile Sass file 2. task untuk optimisasi file-file, seperti css, js, dan (images : belum dibahas). mengcopy images dan fonts ke "dist" folder.

point 1 sudah kita satukan dalan gulp task "watch", cuma karena pasti task "watch" akan sering dipakai, lebih baik task "watch" kita jadikan task default yang dengan mudah di run di command line, yaitu hanya dengan menulis "gulp" tanpa harus repot-repot menulis "gulp watch".

//gulpfile.js

gulp.task('default', ['watch'])

pada point yang kedua kita ingin satukan semua task-task itu dalan satu task yang bernama "build", jadi nanti kita tinggal tulis "gulp build" terus semua file yang ada di app akan di build menuju folder "dist"

//gulpfile.js

gulp.task('build', [`clean`, `sass`, `useref`, `images`, `fonts`], function (){
  console.log('Building files');
})

sayangnya kode diatas tidak akan berjalan baik, karena parameter kedua pada methode gulp.task dijalankan secara simultan, jadi bisa jadi "clean" dilakukan setelah copy images dan fonts, yang artinya build tidak berjalan secara benar. yang kita inginkan adalah pertama, task "clean" dijalankan terlebih dahulu, kemudian diikuti oleh task-task yang lainnya.

dengan demikian kita membutuhkan plugin lainnyanya yang disebut "run sequence", jadi plugin ini membuat, task dijalankan tidak secara simultan, melainkan satu demi satu. ok, sekarang kita install dlu

//bash

$ npm install run-sequence --save-dev

syntaxnya dari run sequence seperti ini

// js

var runSequence = require('run-sequence');

gulp.task('task-name', function(callback) {
  runSequence('task-one', 'task-two', 'task-three', callback);
});

// atau bisa juga seperti ini, ada yang dijalankan secara simultan ( dalam satu array)

gulp.task('task-name', function(callback) {
  runSequence('task-one', ['tasks','two','run','in','parallel'], 'task-three', callback);
});

mari kita adapasikan sesuai dengan kebutuhan kita

// gulpfile.js

gulp.task('build', function (callback) {
  runSequence('clean:dist',
    ['compileSass', 'optimasi', 'images', 'fonts'],
    callback
  )
})

maka dengan menulis "gulp build" folder dist akan diisi dengan file2 yang sudah dioptimasi dan siap dihosting.

karena saya belajar dari <a href=' https://css-tricks.com/gulp-for-beginners/ '> https://css-tricks.com/gulp-for-beginners/ </a> makanya saya banyak ambil dari situ. kalo temen-temen ada pertanyaan jangan takut untuk comment ya ! semangat belajar!

avatar timelord
@timelord

140 Kontribusi 86 Poin

Diperbarui 1 tahun yang lalu

Belum ada Jawaban. Jadi yang pertama Jawaban

Login untuk ikut Jawaban