Gulp.js ile iş yükünüzü hafifletin

Gulp.js ile iş yükünüzü hafifletin

Gulpjs front-end’de iş akışınızı otomatikleştirmeye yarayan Nodejs tabanlı bir Javascript aracıdır.Bazen manuel olarak yapılan ve gereksiz yere vakit kaybedilen işlerde Gulpjs yardımınıza hızır gibi yetişmektedir.Alternatif olarak Grunt aracıda kullanılmaktadır ancak Grunt’u,Gulp’a göre kod bakımından okuması daha zordur ve Gulp üzerindeki konfigrasyonları nodejs kodu gibi çalıştırdığından Grunt’a göre daha hızlı çalışmaktadır.(Gulp ile yaptığınız tüm işleri Grunt ile de yapabilirsiniz)

Peki Gulp ile neler yapılabilir ?

Daha fazla eklenti için http://gulpjs.com/plugins/ adresini ziyaret edebilirsiniz.

Kurulum

Gulp yükleyebilmek için makinanızda nodejs yüklü olması gerekmektedir.Nodejs kendi sitesinden edinebilirsiniz.Windows ve Mac OSX için kurulumu oldukça basit zaten.Eğer Linux kullanıcıysanız bir önceki “Ubuntu için Npm ve Bower kurulumu” yazımda kurulumdan bahsettim buradan yararlanabilirsiniz.

Nodejs kurulumunu tamamladıktan sonra Gulp kurulumuna başlayabiliriz

npm install -g gulp

Gulp global olarak kuruldu ancak yapacağımız her projeye gulpjs tekrardan indirmek zorundayız.Bunun için terminalden(Windows için nodejs command prompt) proje dizinine giderek gulpjs projeye dahil ediyoruz.

npm install –save-dev gulp

Daha sonra projenin ana dizinine gulpfile.js adında bir js dosyası oluşturuyoruz.Bu dosya içerisine aşağıdaki kodları yazarak ilk taskımızı oluşturabiliriz.

Dosyayı kaydedip terminale gulp yazdığımızda karşımıza şöyle bir ekran gelecektir

Screenshot from 2015-09-18 17:35:40

Burada default task adıdır.Default task dışında bir task yazmışsanız, terminale çalıştırmak için gulp task_adı komutunu yazmanız gerekmektedir.

Şimdide üstte bahsettiğim gulp-pluginlerden birkaçını deneyelim

Örneğin js dosyalarımızı sıkıştırıp tek bir dosyada toplamak istiyoruz.Bunun için gerekli pluginler : gulp-uglify ve gulp-concat

Hemen bu pluginleri projemize dahil edelim

npm install –save-dev gulp-uglify gulp-concat

node_modules klasörüne baktığınızda gulp-uglify ve gulp-concat klasörlerini gördüyseniz pluginler sorunsuz yüklendi demektir.

Şimdi gulpfile.js dosyamızın içeriğini güncelleyelim

Daha sonra terminale gidip gulp scripts yazdığımızda app/js klasörü içerisindeki tüm js dosyalarını sıkıştırıp scripts.js klasöründe birleştirecek ve dist/js klasörüne atacaktır.

Aynı şekilde CSS dosyalarını sıkıştırıp,birleştirmek için önce gulp-minify-css plugini indirdikten sonra gulpfile.js içerisindeki kodları güncelleyelim.

npm install –save-dev gulp-minify-css

Bu iki taskı çalıştırmak içinde terminale çalıştırmak istediğimiz taskın adını önüne gulp yazarak çalıştırıyoruz.
“Hepsini tek tek mi yazacağız? Nerde vakitten kazanç ?” dediğinizi duyar gibiyim.Sakin olun hemen onuda tek satır kodla halledelim.gulpfile.js dosyasını tekrar güncelleyelim.

Son satıra dikkat ederseniz default task yazdık ve bu task çalıştırıldığı anda ‘scripts’ ve ‘styles’ tasklarımızında çalışmasını sağladık.Artık terminale gidip gulp yazmanız yeterli olacaktır.

Aslında problemler bitmedi.Hala vakitten kaybımız var.Şimdide şöyle bir senaryomuz olsun.Css kodluyorsunuz ve her kaydettiğinizde sıkıştırma ve birleştirme işlemini terminale giderek gulp styles mi yazacaksınız ? Tabikide hayır.Bu oldukça zahmetli bir iş.Bunun için watcher oluşturacağız ve her kaydettiğimizde otomatik olarak tasklar çalışacak.

Önce gulp-watch plugini indirelim

npm install –save-dev gulp-watch

Daha sonra gulpfile.js dosyamızdaki kodları güncelleyelim

Eklediğimiz watch taskınıda default taska depend ettik.Artık terminale gidip gulp yazmanız yeterli olacaktır.

Umarım faydalı olmuştur.Kalın sağlıcakla…

Bu yazı aynı zamanda MaviDurak-IO blog sayfasında da yayınlanmıştır.

Kaynaklar
http://www.hongkiat.com/blog/getting-started-with-gulp-js/

http://code.tutsplus.com/tutorials/managing-your-build-tasks-with-gulpjs–net-36910

http://tolga.gezginis.com/gulp-ile-frontend-islerinizi-yonetin.html


4 thoughts on “Gulp.js ile iş yükünüzü hafifletin”

  • 1
    Emre on 30 Ekim 2015 Cevapla

    Merhaba, faydalı bir anlatım olmuş kendime göre “gulpfile.js” i düzenledim, fakat her projeye modülleri kurmak yerine tek bir yerden modülleri çalıştırma şansımız var mı?

    • 2
      Emre Köse on 30 Ekim 2015 Cevapla

      Merhabalar
      Her projenin ihtiyaçları farklı olacağından modülleri ayrı ayrı indirip “gulpfile.js” dosyasında çağırmalısınız.Tek bir yerden çekme gibi bir şansımız maalesef yok

  • 3
    Devin Vanalphen on 11 Ağustos 2016 Cevapla

    How could any of this be better stated? It couldn’t.

  • 4
    Rebecca on 18 Kasım 2016 Cevapla

    Hello my name is Rebecca and I just wanted to drop you a quick note here instead of calling you. I came to your Gulp.js ile iş yükünüzü hafifletin | | Emre Köse website and noticed you could have a lot more visitors. I have found that the key to running a popular website is making sure the visitors you are getting are interested in your website topic. There is a company that you can get keyword targeted visitors from and they let you try their service for free for 7 days. I managed to get over 300 targeted visitors to day to my site. http://r.advantech.com/ng

Bir Cevap Yazın

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