Kısaca Gulp4 Kullanımı.

Gulp kod yazarken tekrar eden işlerinizi otomatize etmenize yardımcı olur. Ön yüzde geliştirme yaparken değişikliği görmek için f5 ile browsere yenilemekten sıkıldıysanız tam size göre.

İlk olarak çalışacağınız dizine gidilir. npm init -y komutu ile kısaca package.jsondosyası oluşturulur. Daha sonra kullanacğımız olan gulp indirilir biz sayfa refreslemeyi otomotize edeceğimiz için browsersync’i de indireceğiz. npm install browser-sync gulp --save-dev komutu ile gerekli paketleri indirelim ve bir gulpfile.js dosyası oluşturalım.

const gulp = require('gulp');
const browserSync = require("browser-sync").create();
function reload() {
    browserSync.reload();
}
function style(){
    return gulp.src('./*.css').pipe(browserSync.stream())
}
function watch() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
});
gulp.watch('./*.css', style);
gulp.watch('./*.js').on('change', reload);
gulp.watch('./*.html').on('change', reload);
}
exports.default = watch;

exports.default ile gulp’a default taski bildirmiş oluyoruz. Komut ekranında gulp yazdığımızda watch çalışacak. gulp.watch('./*.css',style) ile bizim basedir:'./'olarak belirtilen konumdaki herhangi bir .css ile biten dosyalarda değişiklik olduğunda style fonksiyonu çalışıyor. style fonkisyonu içerisinde belirtilen src ile gösterilen dosyalar stream olarka sayfa yeniden yüklemeye gerek kalmadan browsera iletilir. gulp.watch('./*.js').on('change',reload) ve gulp.watch('./*.html').on('change',reload) fonksiyonlarında ise belirtilen dosyalarda bir değişiklik olduğunda browser yeniden yüklenir. gulp ile bu tür işlemleri otomotize edebilirsiniz.

Ben galp Gulp! — 1

konuyu daha iyi anlamak adına yardımcı olabilecek bir yazı.

Faydalanılan kaynaklar: How to setup your Workflow using Gulp v4.0.0 gulpjs.com browsersync.io

LinkedIn|Email|GitHub|Twitter|Medium