Command Line Untuk Web Design: Live Reload & BrowserSync

() translation by (you can also view the original English article)

Pada pelajaran terakhir anda belajar bagaimana mengcompile atau membangun keseluruhan proyek anda dengan command singkat seperti grunt, grunt watch, gulp dan gulp watch.

Pada pelajaran ini anda akan belajar bagaimana membuat command yang menambahkan layer keren tambahan ke dalam proyek anda, mengaktifkan live reload dan sinkronisasi browser.

Jika anda belum melengkapi tutorial lainnya dalam seri ini, mohon kembali dan selesaikan sebelum anda memulai di sini.

Live Reload

Catatan: Untuk mencegah kebingungan, ada aplikasi desktop dan plugin Chrome bernama LiveReload yang sering digunakan bersama dengan banyak npm packages untuk menangani muat ulang otomatis. Dengan cara tersebut kita akan mengaturnya, sehingga aplikasi dan plugin tersebut tidak akan diperlukan.

Live Reload via Grunt

Untuk mengizinkan live reloading untuk berfungsi diperlukan localhost yang dapat di-refreshed, yaitu cara untuk melihat situs anda secara local dengan mensimulasi web host dengan sebuah http:// protocol bukannya file://.

Dengan proyek Grunt kita akan menangani pengaktifan localhost untuk menyajikan file statis proyek anda, dan melakukan live reloading terhadap localhost tersebut, dengan menggunakan plugin grunt-express.

Install grunt-express ke dalam proyek anda dengan:

1	npm install grunt-express --save-dev

Kemudian aktifkan plugin dalam Gruntfile dengan menambahkan ini di bawah baris grunt.loadNpmTasks:

1	grunt.loadNpmTasks('grunt-express');

Konfigurasi task express dengan menambahkan code ini:

express: {
      all: {
        options: {
          bases: 'build',
          livereload: true,
          open: 'http://localhost:3000'
        }
      }
    },

Anda akan menyadari bahwa dalam konfigurasi task express kita option livereload diatur ke true, sehingga setelah local preview dijalankan itu akan secara otomatis memuat ulang ketika perubahan ditemukan.

Sekarang kita akan menambahkan sebuah task baru bernama start. Kita akan menggunakan task ini untuk memicu task express dan watch sekaligus.

Tambahkan ini dibawah baris grunt.registerTask:

1	grunt.registerTask('start', ['express', 'watch']);

Sekarang jalankan command:

1	grunt start

...dan anda akan melihat browser default anda terbuka dengan menampilkan preview proyek anda.

Task watch sekarang berjalan dan akan mengcompile perubahan pada Stylus dan Jade ke dalam folder "build".

Express lalu akan memonitor terhadap perubahan pada folder "build", jadi jika file HTML, CSS atau JS dicompile ulang itu akan secara otomatis memuat ulang preview anda.

LiveReload via Gulp

Berikutnya kita akan melanjutkan dan mencapai tipe localhost preview yang sama dalam proyek Gulp anda. Namun kali ini kita akan menggunakan plugin gulp-connect.

Install gulp-connect ke dalam proyek anda dengan command ini:

1	npm install --save-dev gulp-connect

Buat itu dapat diakses dalam Gulpfile dengan menambahkan baris ini di bawah baris lainnya dimana anda menggunakan fungsi require():

1	var connect = require('gulp-connect');

Atur sebuah task baru bernama connect dengan menambahkan code ini di bawah task code anda yang lain:

gulp.task('connect', function() {
  connect.server({
root: 'build',
    livereload: true,
    open: true
  });
});

Seperti yang kita lakukan dengan Grunt, kita sekarang akan membuat sebuah task buatan bernama start yang akan menjalankan localhost preview dan mengaktifkan task watch.

Tambahkan baris ini pada bagian bawah Gulpfile:

1	gulp.task('start', ['connect', 'watch']);

Untuk mengaktifkan muat ulang pada localhost preview, kita akan menghubungkan "pipa" lain pada ujung kedua task css dan html tasks.

Tambahkan trigger reload ini ke bagian akhir dari tiap - tiap:

1	.pipe(connect.reload())

Buat task menjadi:

gulp.task('css', function () {
gulp.src('source/stylus/main.styl')
  	.pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())
		.pipe(minifyCSS())
		.pipe(rename('style.css'))
		.pipe(gulp.dest('build'))
		.pipe(connect.reload())
});

....dan:

gulp.task('html', function() {
  gulp.src('source/jade/*.jade')
.pipe(jade())
    .pipe(gulp.dest('build'))
    .pipe(connect.reload())
});

Sekarang jalankan command:

1	gulp start

...kemudian masuk ke http://localhost:8080 dan anda akan melihat preview local site anda.

Simpan perubahan tiap file Jade atau Stylus dan perhatikan kilatan kecepatan recompile dan reload!

BrowserSync

Sekarang setelah anda localhost preview anda reloading secara otomatis, anda dapat meninggalkannya dan tetap memiliki sebuah pengaturan proses pengembangan puncak untuk proyek anda. Bagaimanapun juga, kemampuan untuk melakukan lintas browser dan antar perangkat, juga memiliki BrowserSync adalah sangat berharga.

Dengan BrowserSync anda disediakan sebuah preview URL yang dapat anda uji ke browser apapun dalam mesin anda, juga browser pada perangtak lain dengan koneksi internet yang sama.

Semua preview tersebut akan dimuat ulang setelah anda membuat perubahan sehingga anda dapat melihat hasilnya, dan semua interaksi anda akan ditampilkan dengan cepat. Jika anda melakukan scroll atau membuka sebuah menu pada satu browser anda akan melihat bagaimana setiap browser dan perangkat lainnya merespon pada waktu yang sama.

BrowserSync via Grunt

Untuk menginstall grunt-browser-sync plugin ke dalam proyek Grunt anda jalankan command berikut:

1	npm install grunt-browser-sync --save-dev

Comment out atau hapus baris yang anda gunakan untuk mengaktifkan grunt-express:

1	// grunt.loadNpmTasks('grunt-express');

Lalu tambahkan baris ini untuk mengaktifkan grunt-browser-sync:

1	grunt.loadNpmTasks('grunt-browser-sync');

Comment out atau hapus task express yang anda buat sebelumnya, dan tambahkan code pengaturan ini untuk task browserSync:

browserSync: {
      bsFiles: {
        src : ['build/*.css', 'build/*.html']
      },
      options: {
        watchTask: true,
        server: {
          baseDir: "build"
        }
      }
    },

Cari task start dan ganti sehingga itu menjalankan task browserSync bukannya task express, dari:

1	grunt.registerTask('start', ['express', 'watch']);

...ke:

1	grunt.registerTask('start', ['browserSync', 'watch']);

Sekarang ketika anda menjalankan command:

1	grunt start

...Anda akan tetap melihat sebuah localhost preview terbuka, dan itu akan tetap memuat ulang ketika anda membuat perubahan, namun perbedaannya sekarang adalah sinkronisasi browser menjadi aktif dan juga kemampuan untuk melihat preview pada perangkat lain.

Pada terminal setelah memulai BrowserSync server anda akan melihat ini:

1	————————————
2	Local: http://localhost:3000
3	External: http://192.168.1.3:3000
4	————————————
5	UI: http://localhost:3001
6	UI External: http://192.168.1.3:3001
7	————————————

Ambil alamat dengan label Local, masukkan itu pada beberapa browser lainnya dalam mesin anda, dan masukkan alamat dengan label External ke dalam perangkat lainnya yang memiliki koneksi yang sama. Kemudian lihat respon sinkronisasi yang anda dapatkan dalam waktu instan saat anda berinteraksi dengan salah satu dari itu.

Untuk info lebih lanjut tentang BrowserSync via Grunt masuk ke: http://www.browsersync.io/docs/grunt/

BrowserSync via Gulp

Sekarang kita akan mengatur untuk proses yang sama, kali ini menggunakan browser-sync plugin untuk Gulp.

Install plugin ke dalam proyek Gulp project dengan:

1	npm install browser-sync gulp --save-dev

Comment atau hapus baris ini:

1	// var connect = require('gulp-connect');

...dan ganti itu dengan:

1	var browserSync = require('browser-sync');

Comment out atau hapus task connect dan tambahkan task baru browser-sync ini:

gulp.task('browser-sync', function() {
  browserSync({
server: {
      baseDir: "build"
    }
  });
});

Di akhir task css dan html tentukan lokasi untuk dua tempat yang anda tambahkan ke dalam baris:

1	.pipe(connect.reload())

...dan ganti masing - masing dua baris tersebut dengan:

1	.pipe(browserSync.reload({stream:true}))

Dan terakhir tentukan cari lokasi task start dan edit itu untuk menjalankan task browser-sync bukannya task connect, ganti ini:

1	gulp.task('start', ['connect', 'watch']);

...dengan ini:

1	gulp.task('start', ['browser-sync', 'watch']);

Sekarang ketika anda menjalankan command:

1	gulp start

...Sebuah jendela browser anda terbuka dengan menampilkan preview anda. Sama seperti ketika anda menggunakan BrowserSync via Grunt, URL preview sekarang akan mensinkronisasi pada browser manapun pada perangkat manapun yang menjalankan koneksi internet anda.

Untuk info lebih lanjut tentang BrowserSync via Gulp kunjungi: http://www.browsersync.io/docs/gulp/

Dalam Tutorial Berikutnya

Anda sekarang telah melalui semua hal esensial tentang pengaturan proyek anda sendiri dari awal untuk memberdayakan command line selama pengembangan. Namun bagaimana ttg ketika anda tidak ingin memulai dari awal. Bagaimana jika ketika anda ingin menggunakan framework pihak ketiga, atau anda hanya ingin melewati hal - hal dasar?

Dalam tutorial berikutnya anda akan belajar bagaimana menggunakan command line untuk menyusun kerangka sebuah proyek yang benar - benar baru hanya dalam beberapa saat, menyelesaikannya dengan seluruh third party code yang diperlukan, sebagaimana manajemen task Grunt atau Gulp yang sudah terkonfigurasi dan siap dijalankan.

Sampai ketemu lagi dalam tutorial berikutnya!