Jika anda adalah seorang developert javascript terutama yang udah sering ngoding di node js pasti udah tidak asing lagi dengan yang namanya gulp :D.
Gulp adalah sebuah build tool yang biasanya digunakan untuk automated task atau bisa dibilang sebagai automator.
Biasanya gulp digunakan untuk melakukan serangkaian kerja seperti membuat minify terhadap file html, css, js, melakukan concat file js, dan sebagainya. Pada artikel kali ini, penulis ingin membahas bagaimana cara penggunaan gulp untuk setup development sebuah project :D.
Instalasi Gulp
Karena gulp basic nya menggunakan node js maka anda diharuskan melakukan instalasi node js, yang belum melakukan instalasi node js silahkan lihat di Instalasi Perlengkapan Coding NodeJS.
Untuk melakukan instalasi gulp silahkan jalankan perintah
npm install -g gulp
Membuat Project
Silahkan buat sebuah folder dimana saja, disini penulis membuat sebuah folder dengan nama Belajar-Gulp
. Kemudian masuk ke folder tersebut dengan menggunakan terminal. Jalankan perintah berikut ini.
npm init
Kemudian isikan perintahnya sesuai dengan kebutuhan, jika sudah maka akan terbentuk file package.json
dimana file ini nantinya akan berisi library yang kita butuhkan. Kemudian install library gulp untuk kebutuhan project dengan perintah.
npm install gulp --save-dev
Setelah selesai, tahap selanjutnya adalah kita menentukan list task yang akan kita lakukan. List task yang akan penulis lakukan adalah sebagai berikut.
- Task Minify file css, js dan html
- Task Server
- Task Watch
- Task LiveReload
- Task Clean dan Build
Task Minify file css, js dan html
Silahkan anda membuat sebuah file di dalam folder tersebut dengan nama gulpfile.js
. kemudian kita lakukan instalasi library gulp dengan perintah.
npm install gulp-htmlmin gulp-uglify gulp-minify-css gulp-concat --save-dev
Minifiy CSS
Sama seperti sebelumnya, hanya saja pada minify kita memasukkan plugin minify css.
var gulp = require('gulp');
var gulpMinifyCss = require('gulp-minify-css');
gulp.task('minify-css', function() {
gulp.src('./src/index.css')
.pipe(gulpMinifyCss({
compatibility: 'ie8'
}))
.pipe(gulp.dest('./dist/'));
});
kemudian jalankan dengan perintah.
gulp minify-css
Minifiy JS
Sebelum diminify maka kita lakukan concat terlebih dahulu, berikut adalah codingan untuk concat dan minify
var gulp = require('gulp');
var gulpConcat = require('gulp-concat');
var gulpUglify = require('gulp-uglify');
gulp.task('minify-js', function() {
gulp
.src([
'./src/index1.js',
'./src/index2.js'
])
.pipe(gulpConcat('bundle.js'))
.pipe(gulpUglify())
.pipe(gulp.dest('dist'));
});
kemudian jalankan dengan perintah.
gulp minify-js
Minifiy HTML
Yang terakhir adalah membuat agar file html menjadi lebih kecil yaitu dengan menggunakan plugin gulp-htmlmin
, berikut adalah kodingannya.
var gulp = require('gulp');
var gulpHtmlmin = require('gulp-htmlmin');
gulp.task('minify-html', function() {
gulp.src('src/*.html')
.pipe(gulpHtmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest('dist'))
});
kemudian jalankan dengan perintah.
gulp minify-html
Task Server
Gulp juga menyediakan plugin untuk membuat sebuah server sehingga kita bisa langsung mengubah kodingan html, css dan js tanpa server back end. Silahkan jalankan perintah berikut untuk instalasi librarynya.
npm install --save-dev gulp-connect
kemudian tambahkan kodingan berikut pada file gulpfile.js
var gulp = require('gulp');
var gulpConnect = require('gulp-connect');
gulp.task('server', function() {
gulpConnect.server({
root: 'src',
livereload: true
});
});
Codingan root
berfungsi sebagai tempat folder aplikasi yang akan kita jalankan sedangkan livereload berfungsi agar server dapat melakukan hot reload. Silahkan jalankan dengan perintah.
gulp server
maka akan muncul log terminal seperti berikut.
[13:12:05] Using gulpfile ~/Documents/Github Page/Belajar-Gulp/gulpfile.js
[13:12:05] Starting 'server'...
[13:12:05] Finished 'server' after 11 ms
[13:12:05] Server started http://localhost:8080
[13:12:05] LiveReload started on port 35729
silahkan akses di browser pada http://localhost:8080
.
Task Watch
Task yang satu ini berfungsi untuk melihat semua aktifitas yang anda kerjakan :D. Fungsi yaitu setiap kali kita melakukan edit sebuah file maka dia akan melakukan task yang lain, misalnya jika kita mengedit file css, js dan html maka dia akan concat dan minify file - file tersebut. Masukkan codingan berikut pada file gulpfile.js
.
gulp.task('watch', function() {
gulp.watch('./src/*.js', ['minify-js']);
gulp.watch('./src/*.css', ['minify-css']);
gulp.watch('./src/*.html', ['minify-html']);
});
kemudian jalankan dengan perintah
gulp watch
jika anda melakukan perubahan pada file js, css dan html maka dia akan melakukan compile ulang terhadap masing - masing file tersebut.
Task LiveReload
Task ini biasanya digunakan ketika kita ingin browser melakukan refresh setiap kali kita mengedit file - file css, js dan html. Silahkan ubah kodingan berikut ini.
gulp.task('minify-css', function() {
gulp.src('./src/index.css')
.pipe(gulpMinifyCss({
compatibility: 'ie8'
}))
.pipe(gulp.dest('./dist/'))
.pipe(gulpConnect.reload());
});
gulp.task('minify-js', function() {
gulp
.src([
'./src/index1.js',
'./src/index2.js'
])
.pipe(gulpConcat('bundle.js'))
.pipe(gulpUglify())
.pipe(gulp.dest('dist'))
.pipe(gulpConnect.reload());
});
gulp.task('minify-html', function() {
gulp.src('src/*.html')
.pipe(gulpHtmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest('dist'))
.pipe(gulpConnect.reload());
});
gulp.task('server', function() {
gulpConnect.server({
root: 'src',
livereload: true
});
});
gulp.task('watch', function() {
gulp.watch('./src/*.js', ['minify-js']);
gulp.watch('./src/*.css', ['minify-css']);
gulp.watch('./src/*.html', ['minify-html']);
});
gulp.task('default', ['watch', 'server']);
kemudian jalankan dengan perintah
gulp
mengapa gulp aja ? dikarenakan kita telah melakukan deklarasi default sehingga gulp akan menjalankan perintah default tersebut. Kemudian akses http://localhost:8080/
pada browser, ubah salah satu file maka browser akan otomatis melakukan reload.
Task Clean dan Build
Yang terakhir adalah task clean dan build, biasanya kita gunakan jika kita ingin membuild semua file yang ada. Silahkan instal library seperti berikut.
npm install --save-dev gulp-clean gulp-sequence
kemudian masukkan kodingan seperti berikut.
var clean = require('gulp-clean');
var gulpSequence = require('gulp-sequence');
gulp.task('clean', function() {
return gulp.src('dist', {
read: false
})
.pipe(clean());
});
gulp.task('build', gulpSequence('clean', 'minify-css', 'minify-js', 'minify-html'));
untuk menjalankannya dengan perintah
gulp build
Untuk source code nya silahkan lihat di Belajar Gulp. Sekian artikel mengenai berkenalan dengan gulp dan terima kasih :).