Gulp’ta Yavaş Çalışan Uglify Derlemesi Nasıl Düzeltilir?

Merhaba arkadaşlar, sizlere gulp’ın kullanımını anlatmıştım. Ancak zamanla kullandıktan sonra yaşadığım bir sorununda çözümünü paylaşmak istiyorum. Büyük front-end projelerinde, javascript tarafındaki kodlar çoğaldıkça fark ettim ki, kullandığım uglify paketi çok yavaş şekide build etmeye başladı dosyaları. Yani öyleki bir js değişikliğinden sonra 8-10 sn arası bekliyordum build etsin diye. Bunun böyle olmayacağını düşünüp araştırmaya başladım ve gulp-fs-cache paketini buldum.

İlgili paketin linki;
https://www.npmjs.com/package/gulp-fs-cache

Kurulumu ise;

npm install gulp-fs-cache

Kullanım

Benim eski kodlarım şu şekildeydi;

gulp.task('js', () => {
return gulp.src('scripts/*.js')
.pipe(uglify())
.pipe(concat('app.min.js'))
.pipe(gulp.dest('dist/js'));
});

Bu şekilde kodlar çoğaldıkça derleme süresi 8-9 saniyeyi bulmaya başladı. Gif’e gözatın!

Ve bu paketi kullanarak şu hale dönüştürdüm;

gulp.task('js', () => {
let jsFsCache = fsCache('tmp/jscache');
return gulp.src('scripts/*.js')
.pipe(jsFsCache)
.pipe(uglify())
.pipe(jsFsCache.restore)
.pipe(concat('app.min.js'))
.pipe(gulp.dest('dist/js'));
});

Sonuç ise mükemmel 🙂

Kolaylıklar dilerim 🙂

Yazar: Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“Gulp’ta Yavaş Çalışan Uglify Derlemesi Nasıl Düzeltilir?” için 4 yorum

  1. Gulp kullanıyorum ama src/js dosyasının altında javascript dosyalarının önceliğini ayarlamakta sorun yaşıyorum. Örneğin JQuery js si app.min.js nin en üstünde olmalı sonra pluginler ve ardından bu pluginleri çağırdığım custom js lerim gelmeli. Bununla ilgili kullandığın bir yöntem var mı? jquerynin başına alt tire koyuyorum. Ya da js klasörünün içine plugin onunda içine custom klasörü açarak sıralama sağlanabiliyor. Önerin olursa süper olur.

    1. aynı sorunları bende yaşadım. Aslında ben scripts içerisinde 2 klasör oluşturdum. libraries ve plugins birde direk scripts klasörü içerisinde main.js oluşturdum. zaten en sonunda hepsini tek şekilde birleştiriyorum. Kullanırkende şu şekilde kullanıyorum;

      gulp.src([
                  'src/scripts/libraries/*.js',
                  'src/scripts/plugins/*.js',
                  'src/scripts/main.js'
      ])

      Yalnız bu cache paketini kullandıktan sonra bu sıralama işe yaramaz oldu, bu yüzden 2. bir order paketi kullandım. Şu arkadaşı kullandım yani. Tavsiye ederim.

      1. Teşekkür ettim emeğine sağlık 🙂 Bende aşağıdaki gibi bir klasör yapısı oluşturdum.

        gulp.src([
        ‘src/js/lib/*.js’,
        ‘src/js/plugins/*.js’,
        ‘src/js/custom.js’
        ])

  2. Sonunda ne zamandır arıyordum. inanılmaz iş süresi kısaltıyor beklemek zorunda kalmıyorsun.

Tayfun Erbilen için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.