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 ?

Javascript dosyalarınızı sıkıştırabilirsiniz (gulp-uglify)
CSS dosyalarınızı sıkıştırabilirsiniz (gulp-minify-css)
CSS ve JS dosyalarınızı tek bir dosyada toplayabilirsiniz (gulp-concat)
Resimlerinizi sıkıştırabilir (gulp-imagemin) ve optimize edebilirsiniz(gulp-image-optimization)
Javascript hata kontrolü yapabilirsiniz (gulp-jslint)
CSS hata kontrolü yapabilirsiniz (gulp-csslint)
SASS (gulp-ruby-sass),LESS (gulp-less) ve Stylus (gulp-stylus) dosyalarınızı CSS çevirebilirsiniz
Değişiklik yaptığınız dosya üzerinde watcher oluşturabilirsiniz (gulp-watch)
CoffeeScript dosyalarınızı JS olarak derleyebilirsiniz (gulp-coffee)

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.

var gulp = require('gulp');

gulp.task('default',function(){
	console.log('Default task running');
});

var gulp = require('gulp');

gulp.task('default',function(){

console.log('Default task running');

});

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

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

var gulp = require('gulp'),
	uglify = require('gulp-uglify'),
	concat = require('gulp-concat');


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

var gulp = require('gulp'),

uglify = require('gulp-uglify'),

concat = require('gulp-concat');

gulp.task('scripts',function(){

gulp.src('app/js/*.js')

.pipe(uglify())

.pipe(concat('scripts.js'))

.pipe(gulp.dest('dist/js'))

});

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

var gulp = require('gulp'),
	uglify = require('gulp-uglify'),
	minifyCSS = require('gulp-minify-css'),
	concat = require('gulp-concat');


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

gulp.task('styles',function(){
	gulp.src('app/css/*.css')
		.pipe(minifyCSS({keepBreaks : true}))
		.pipe(gulp.dest('dist/css'))
});

var gulp = require('gulp'),

uglify = require('gulp-uglify'),

minifyCSS = require('gulp-minify-css'),

concat = require('gulp-concat');

gulp.task('scripts',function(){

gulp.src('app/js/*.js')

.pipe(uglify())

.pipe(concat('scripts.js'))

.pipe(gulp.dest('dist'))

});

gulp.task('styles',function(){

gulp.src('app/css/*.css')

.pipe(minifyCSS({keepBreaks : true}))

.pipe(gulp.dest('dist/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.

var gulp = require('gulp')
	uglify = require('gulp-uglify'),
	minifyCSS = require('gulp-minify-css'),
	concat = require('gulp-concat');


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

gulp.task('styles',function(){
	gulp.src('app/css/*.css')
		.pipe(minifyCSS({keepBreaks : true}))
		.pipe(gulp.dest('dist/css'))
});

gulp.task('default', ['scripts', 'styles']);

var gulp = require('gulp')

uglify = require('gulp-uglify'),

minifyCSS = require('gulp-minify-css'),

concat = require('gulp-concat');

gulp.task('scripts',function(){

gulp.src('app/js/*.js')

.pipe(uglify())

.pipe(concat('scripts.js'))

.pipe(gulp.dest('dist'))

});

gulp.task('styles',function(){

gulp.src('app/css/*.css')

.pipe(minifyCSS({keepBreaks : true}))

.pipe(gulp.dest('dist/css'))

});

gulp.task('default', ['scripts', 'styles']);

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

var gulp = require('gulp'),
	uglify = require('gulp-uglify'),
	minifyCSS = require('gulp-minify-css'),
	concat = require('gulp-concat');


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

gulp.task('styles',function(){
	gulp.src('app/css/*.css')
		.pipe(minifyCSS({keepBreaks : true}))
		.pipe(gulp.dest('dist/css'))
});


gulp.task('watch',function(){
	gulp.watch('app/js/*.js',['scripts']);
        gulp.watch('app/css/*.css',['styles']);
});


gulp.task('default', ['scripts', 'styles','watch']);

var gulp = require('gulp'),

uglify = require('gulp-uglify'),

minifyCSS = require('gulp-minify-css'),

concat = require('gulp-concat');

gulp.task('scripts',function(){

gulp.src('app/js/*.js')

.pipe(uglify())

.pipe(concat('scripts.js'))

.pipe(gulp.dest('dist'))

});

gulp.task('styles',function(){

gulp.src('app/css/*.css')

.pipe(minifyCSS({keepBreaks : true}))

.pipe(gulp.dest('dist/css'))

});

gulp.task('watch',function(){

gulp.watch('app/js/*.js',['scripts']);

gulp.watch('app/css/*.css',['styles']);

});

gulp.task('default', ['scripts', 'styles','watch']);

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 Comments

Emre dedi ki:

30 Ekim 2015, 16:37

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ı?

Cevapla
1. Emre Köse dedi ki:
  
  30 Ekim 2015, 17:19
  
  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
  
  Cevapla
Devin Vanalphen dedi ki:

11 Ağustos 2016, 15:38

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

Cevapla
Rebecca dedi ki:

18 Kasım 2016, 23:35

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

Cevapla

Devin Vanalphen için bir cevap yazın Cevabı iptal et

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