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)

###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.

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 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');
});

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'))
});

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'))
});

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']);

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']);

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.Bir başka yazıda görüşmek dileğiyle. Kalın sağlıcakla…

  • Emre Köse

  • Front-end Developer at Rex Yazılım
Beğendiniz mi? O halde paylaşın: