Browser Sync

browsersync · npmjs · github

Web sitesi oluştururken birden fazla tarayıcıyı ve cihazı senkronize halde gösterir. Kodunuzu kaydettiğiniz anda tarayıcıyı yeniler, F5 yapmanıza gerek kalmaz; bu da bize oldukça zaman kazandırır ve hızlı kod yazmamızı sağlar.

Kurulum

Aşağıdaki komut ile kurulum işlemini gerçekleştirebilirsiniz.

npm install browser-sync --save-dev

Kullanımı

var browsersync     = require("browser-sync"),
    gulp            = require("gulp");


gulp.task("browsersync", function() {
    browsersync({
        server: {
            baseDir: './'
        },
        open: false,
        online: false,
        notify: false
    });
});

bworsersync fonksiyonunu oluşturduktan sonra örneğin css dosyamızda değişiklik olduğunda tarayıcıyı yenilemek için şu kodu kullanın:

gulp.task("css", function() {
    return gulp.src("./src/*.css")
        // burada birkaç işlem yapıldığını varsayalım
        .pipe(gulp.dest("./dest"))
        .pipe(browsersync.reload({stream: true}))
});

Css dosyaları alınıp bir kaç işlem gerçekleştikten sonra, son halini dest klasörüne atıyor, hemen ardından tarayıcıyı güncelliyor.

Gulp default fonksiyonuna browsersync fonksiyonumuzu eklemeyi unutmayalım:

gulp.task("default", ["browsersync"]);

Browser Sync’ın Gulp için hazırladığı dokümana göz atabilirsiniz.

Sıradaki Eklenti: Clean Css