Task runner adalah program yang mengeksekusi tugas berdasarkan kriteria tertentu, seperti mengkompilasi file setiap kali file terkait berubah. Gulp adalah task runner populer untuk development yang memungkinkan melakukan banyak hal seperti mengkompilasi SASS, mengubah JS, dan lainnya. Gulp menggunakan API seperti gulp.src untuk mengambil file, gulp.dest untuk menulis file, dan gulp.task untuk mendefinisikan

1. TASK RUNNER

2. Apa itu task runner ?
● Task runner adalah sebuah program yang
mengeksekusi suatu tugas berdasarkan kriteria
tertentu.
● Salah satu penggunaan umumnya adalah untuk
mengatur suatu tugas yang berjalan setiap kali
suatu file tertentu berubah, jadi kita tidak harus
meng-compile setiap saat.

3. Gulp ?
● Gulp adalah sebuah task runner untuk
development.
● Gulp memungkinkan kita untuk melakukan banyak
hal dalam workflow development. Kita bisa meng-
compile file SASS, uglify dan compress file
JavaScript, dan lain-lain.

4. Memulai Gulp
● Install Gulp secara global
npm install --global gulp-cli
● Inisialisasi npm di project
npm init
● Install Gulp sebagai devDependencies
npm install --save-dev gulp

5. Memulai Gulp
● Buat gulpfile.js di folder project
var gulp = require('gulp');
gulp.task('default', function() {
// tempatkan kode tugas default di sini
});
● Jalankan Gulp
gulp
Tugas default akan berjalan.
Untuk menjalankan tugas secara terpisah, gunakan
gulp <namatugas> <tugaslainnya>

6. Gulp API
● gulp.src
Mengembalikan sebuah stream atau vinyl files yang
dapat disalurkan kepada plugins.
gulp.src('client/templates/*.jade')
.pipe(jade())
.pipe(minify())
.pipe(gulp.dest('build/minified_templates'));

7. Gulp API
● gulp.dest
API ini akan menulis file dan mengeluarkan kembali
semua data yang dikirimkan jadi kita dapat
menyalurkannya ke beberapa folder. Folder yang tidak
ada akan dibuat.
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())
.pipe(gulp.dest('./build/minified_templates'));

8. Gulp API
● gulp.task
API ini digunakan untuk mendefinisikan suatu tugas.
gulp.task('somename', function() {
// Lakukan sesuatu
});

9. Gulp API
● gulp.watch
Mengamati file dan melakukan sesuatu ketika file
berubah.
gulp.watch('js/**/*.js', ['uglify']);

10. Gulp Plugins
● Autoprefixer
Parse CSS dan menambahkan prefix vendor
● Gulp-uncss
Menghapus CSS yang tidak terpakai
● Gulp-clean-css
Minify CSS
● Gulp-htmlmin
HTML minificator

11. Gulp Plugins
● Gulp-babel
Transpiler untuk menulis JavaScript generasi
berikutnya
● Gulp-uglify
JavaScript compressor
● Gulp-concat
Menggabungkan file
● Gulp-sass
Compile SASS menjadi CSS

12. Gulp Plugins
● Gulp-coffee
Compile CoffeeScript menjadi JavaScript
● Gulp-jade
Compile Jad menjadi HTML
● Gulp-rename
Merubah nama file dengan mudah

13. Terima Kasih