Gulp.js nedir? Nasıl Kullanılır? Kurulumu nasıl yapılır?
Arkadaşlar merhaba, bu yazımda ‘Gulp.js’ hakkında bilgiler vereceğim. Yazının sonunda gulp.js’i kurmuş olacağız, hayat kurtarıcı kodları öğrenmiş olacağız ve yapacağımız basit Single Page Application’ı gulp.js üzerinden çalıştıracağız.
Gulp.js Nedir?
Gulp.js Front-End yazılımcıları için biçilmiş bir kaftandır. İş akışını otomatikleştiren Node.js tabanlı javascript aracıdır. Uzun uğraş gerektiren işlemleri Gulp.js yardımı ile otomatikleştirebiliriz. Gulp.js’e alternatif olarak Grunt’da kullanılmaktadır ama NPM’in sitesinden haftalık indirmelerini karşılaştırdığımızda Gulp.js’in daha çok tercih edildiğini açıkca görebiliriz.
Bize sağladığı yararlar nelerdir?
Gulp.js bize birçok yarar sağlamaktadır fakat başlıcaları şunlardır;
- CSS ve JavaScript dosyalarını minify edebilir ve JavaScript dosyalarını Uglify edebiliriz.
- Projemizde ayrı ayrı yer alan CSS ve JavaScript dosyalarını birleştirebiliriz(Bundling).
- SASS, LESS ve Stylus dosyalarını hızlı şekilde CSS dosyasına render edebiliriz.
- Watcher kurarak geliştirme anında yaptığımız değişiklikleri anında görmek adına Reload kurabiliriz.
- HTTP Web Sunucu ortamı oluşturabiliriz ve projemizi sunucuda run’layabiliriz.
Bunun gibi birçok noktada geliştiricinin yaşam döngüsüne katkılar sağlamaktadır.
Gulp.js Nasıl Kurulur?
Öncelikle Node.js’in ve paket yöneticisi olan NPM’in sistemimizde kurulu olması gerekmektedir. Eğer Node.js kurulu değilse buradan sisteminize uygun olan kurulum dosyasını indirip kurabilirsiniz. NPM ise Node.js ile birlikte sisteminize kurulacaktır. Kurulumların başarılı olup olmadığını Command Prompt(CMD) üzerinden aşağıdaki komutları çalıştırarak bakabilirsiniz.
node -vnpm -v
Eğer CMD ekranında programların versiyon numaralarını gördüyseniz kurulumunuz başarılı demektir.
Single Page Application Ortamı Nasıl oluşturulur?
Yazımın başında belirttiğim gibi basit bir SPA oluşturup gulp.js’i bu projeye dahil edip kodlarımızı SPA ortamında derleyeceğiz. Ben IDE olarak WebStorm kullanacağım. Dilerseniz siz farklı IDE’ler de kullanabilirsiniz. WebStorm’u buradan indirip kurabilirsiniz.
Bilgisayarımızın herhangi bir yerine aşağıdaki dosya yapısını ve içerisindeki bileşenleri oluşturalım. Yapacağımız SPA projesine buradan GitHub Repositories’imden ulaşabilirsiniz.
Oluşturduğumuz yapıda dosyaların görevleri şu şekilde olacak;
myApp: Projemizin root folder’ı.
build: Gulp.js yardımı ile bundle’ladığımızi minify ne uglify’ladığımız js ve css dosyalarımızın bulundu folder.
js: Projemizin sayfalarının JavaScript dosyalarını barındıran folder.
pages: Projemizin master page’inde görünecek sayfalarımız.
scss: Projemizin sayfalarının style dosyalarını(.scss) barındıran folder.
index.html: Projemizin ana iskeleti(Main Skeleton).
index.js: Projemizin ana iskeleti için ve başka sayfalarda da kullanılması muhtemel olan JavaScript kodlarını barındıran dosya.
index.css: Projemizin ana iskeleti için ve projemizin başka sayfalarında da kullanılması muhtemel olan Style kodlarını barındıran dosya.
Şimdi projemizi run’layabilmemiz için HTTP Web Sunucu ortamını oluşturacağız. İlk başta projemize package.json dosyamızı projemize dahil etmemiz gerekiyor. Bunun için aşağıdaki komutu terminalde çalıştırabiliriz.
npm initTerminalde package.json dosyasını oluştururken birkaç alanı doldurmanızı isteyecektir. Bunların şuan için doldurulup doldurulmaması önemli değil ‘Enter’ a basarak bu adımları geçebilirsiniz.
Daha sonra Gulp.js’i global olarak bilgisayarımıza yüklememiz gerekmektedir. Bunun için aşağıdaki komutu kullanacağız.
npm install --global gulp-cliBu komut sayesinde Gulp.js’in cli(Command Line Interface)’sini bilgisayarımıza yüklemiş olacağız. Bu da bize terminal üzerinden gulp keyword’ü ile Gulp.js için yapacağımız işlemleri çağırmamızı sağlacaktır.
Şimdi ise Gulp.js’i projemize dahil edelim. Bunun için aşağıdaki komutu kullanacağız.
npm install --save-dev gulpBu adımdan sonra package.json dosyasındaki değişikliği görebilirsiniz. Bu durum projemize esneklik sağlamaktadır. Mesela ilerliyen zamanlarda geliştirmekte olduğunuz projenize yeni bir geliştirici katıldı ve projeyi onada vermeniz gerekiyor. Projenin büyük oranda yer kaplayan ‘Dependencies’lerini dosya olarak atmak yerine projeyle birlikte package.json dosyasını vereceksiniz ve aşağıdaki komut yardımı ile gerekli olan dosyalar NPM üzerinden projeye dahil edilmiş olacak.
npm installGulp.js’i projemize dahil ettiğimize göre şimdi HTTP Web Sunucu ortamı için gulp-connect eklentisini projemize dahil edeceğiz. Bunun gibi birçok eklentiyi buradan bulabilirsiniz. Aşağıdaki komut yardımı ile connect’i projemize dahil edebiliriz.
npm install --save-dev gulp-connectŞimdi ise package.json dosyasının bulunduğu dizine Gulp.js’e işlemler yaptıracağımız gulpfile.js’i oluşturmamız gerekmektedir. Gulp’un yapacağı işlemlere task adı verilmektedir. Projemize dahil ettiğimiz gulp-connect eklentisini en basit şekliyle gulpfile.js içerisinde aşağıdaki gibi kullanabilirsiniz.
var gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('connect', function() {
connect.server({
root: './',
port: 8080
});
});
gulp.task('run', ['connect']);NOT: Eğer gulp-connect çalışmazsa gulpfile.js içerisinde gulp versiyonunu “^3.9.1” olarak değiştirmeniz gerekmektedir.
Artık aşağıdaki komutu terminalde çalıştırarak projemizi localhostta run’layabiliriz. Browser’a localhost:8080 yazarak projemizi görebiliriz.
gulp runYukarıda bahsettiğim Gulp.js tasklarını sırasıyla yazmaya başlayalım. Task’ları gulpfile.js üzerine ekleyerek paylaşacağım. Böylelikle yazının sonunda bahsettiğim tüm tasklardan oluşan bir gulpfile.js elde etmiş olacağız.
1- gulp-sass ve gulp-concat
gulp-sass: Tüm .scss style dosyalarını .css style dosyasına çevirir.
gulp-concat: JS ve style dosyalarını birleştirir.
npm install --save-dev gulp-sassnpm install --save-dev gulp-concat
Kullanımı;
var gulp = require('gulp'),
connect = require('gulp-connect'),
sass = require('gulp-sass'),
concat = require('gulp-concat');
gulp.task('connect', function() {
connect.server({
root: './',
port: 8080
});
});
gulp.task('scss-concat', function () {
return gulp.src('./scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(concat('bundle-index.css'))
.pipe(gulp.dest('./build'));
});
gulp.task('run', ['connect', 'scss-concat']);2- gulp-clean-css ve gulp-uglify
gulp-minify-css: .css dosyalarını minimize eder.
gulp-uglify: .js dosyalarını minimize eder ve “çirkinleştirir” :)
npm install — save-dev gulp-clean-cssnpm install --save-dev gulp-uglify
Kullanımı;
var gulp = require('gulp'),
connect = require('gulp-connect'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
cleanCSS = require('gulp-clean-css'),
uglify = require('gulp-uglify');
gulp.task('connect', function() {
connect.server({
root: './',
port: 8080
});
});
gulp.task('scss-concat', function () {
return gulp.src('./scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(concat('bundle-index.css'))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('./build'));
});
gulp.task('js-concat', function () {
return gulp.src('./js/*.js')
.pipe(concat('bundle-index.js'))
.pipe(uglify())
.pipe(gulp.dest('./build'));
});
gulp.task('run', ['connect', 'scss-concat', 'js-concat']);3- Watch
Gulp.js içerisinde hazır olarak gelen bir eklentidir. Tanımlanan dosyaları dinler ve bir değişiklik olduğunda tetiklenir. Tetiklenme anında üzerine tanımlı görevi yerine getirir. Ben aşağıdaki örnekte *.html dosyasında bir değişiklik yapıldığında *.html dosyası üzerinden sayfanın yenilenmesini sağladım.
NOT: connect’in parametrelerinden “livereload” parametresini “true” yapmayı unutmayın ;)
var gulp = require('gulp'),
connect = require('gulp-connect'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
cleanCSS = require('gulp-clean-css'),
uglify = require('gulp-uglify');
gulp.task('connect', function() {
connect.server({
root: './',
port: 8080,
livereload: true
});
});
gulp.task('scss-concat', function () {
return gulp.src('./scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(concat('bundle-index.css'))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('./build'));
});
gulp.task('js-concat', function () {
return gulp.src('./js/*.js')
.pipe(concat('bundle-index.js'))
.pipe(uglify())
.pipe(gulp.dest('./build'));
});
gulp.task('reload-html', function () {
gulp.src('./*.html')
.pipe(connect.reload());
});
gulp.task('watch', function () {
gulp.watch(['./*.html'], ['reload-html']);
});
gulp.task('run', ['connect', 'scss-concat', 'js-concat', 'watch']);Böylelikle yazının sonuna geldik arkadaşlar. Projeyi buradan indirebilirsiniz. Projeyi run’lamadan önce npm install yapmayı unutmayın ;).
Görüşmek üzere Kod ile kalın :)
