Gulp ile front-end derleme hattı kurmak

Bir süre CSS’i elle yazıp doğrudan HTML’e bağlıyordum, JavaScript dosyalarını da tek tek <script> etiketleriyle sayfaya ekliyordum. Sonra Sass’ı öğrendim ve derleme adımı gerekli hale geldi. Ardından JS dosyalarını birleştirmek, küçültmek (minify) gibi ihtiyaçlar ortaya çıktı. Her değişiklikte birkaç komutu elle çalıştırmak can sıkıcı hale gelince Gulp ile bu işleri otomatikleştirmeye karar verdim.

Gulp, Node.js üzerine kurulu bir görev çalıştırıcısıdır (task runner). Yaptığınız işi kod ile tanımlıyorsunuz; Gulp dosya değişikliklerini izleyip tanımladığınız görevleri otomatik çalıştırıyor.

Kurulum

Node.js ve npm kurulu olmalı. Sonra:

npm install -g gulp

Proje klasöründe:

npm init
npm install --save-dev gulp gulp-sass gulp-concat gulp-uglify browser-sync

Bu komutlar package.json dosyası oluşturuyor ve geliştirme bağımlılıklarını (devDependencies) kuruyor.

Gulpfile.js

Tüm görev tanımları proje kökündeki gulpfile.js içinde yazılıyor:

var gulp        = require('gulp');
var sass        = require('gulp-sass');
var concat      = require('gulp-concat');
var uglify      = require('gulp-uglify');
var browserSync = require('browser-sync').create();

// Kaynak ve hedef yolları
var paths = {
    scss:   'resources/sass/**/*.scss',
    js:     'resources/js/**/*.js',
    cssDst: 'public/css',
    jsDst:  'public/js'
};

// Sass derleme görevi
gulp.task('sass', function() {
    return gulp.src('resources/sass/app.scss')
        .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
        .pipe(gulp.dest(paths.cssDst))
        .pipe(browserSync.stream());
});

// JavaScript birleştirme ve küçültme görevi
gulp.task('scripts', function() {
    return gulp.src(paths.js)
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(gulp.dest(paths.jsDst));
});

// Tarayıcı eşitleme ve izleme görevi
gulp.task('watch', ['sass', 'scripts'], function() {
    browserSync.init({
        proxy: 'proje.app'
    });

    gulp.watch(paths.scss, ['sass']);
    gulp.watch(paths.js,   ['scripts']).on('change', browserSync.reload);
    gulp.watch('resources/views/**/*.blade.php').on('change', browserSync.reload);
});

// Varsayılan görev
gulp.task('default', ['watch']);

Bu dosyayı kaydetip terminalde gulp yazdığınızda şunlar oluyor:

1. sass ve scripts görevleri bir kez çalışıyor
2. BrowserSync başlıyor ve proje.app’i proxy olarak açıyor
3. Dosya izleme başlıyor — .scss değiştiğinde CSS derleniyor ve tarayıcı CSS’i yeniden yüklüyor, .js ya da .blade.php değiştiğinde sayfa yenileniyor

Görevleri tek tek çalıştırmak

Sadece Sass derlemek için:

gulp sass

Tüm varlıkları derlemek için (üretim ortamı için):

gulp sass scripts

watch olmadan sadece derleme yapılır ve Gulp kapanır.

BrowserSync ne sağlıyor?

BrowserSync, arka planda küçük bir sunucu başlatıyor ve sayfayı değiştirdiğinizde tarayıcıyı yeniliyor ya da yalnızca CSS değiştiyse sayfayı yenilemeden stilleri güncelliyor. Ayrıca birden fazla cihazı aynı anda eşitleyebiliyorsunuz — bir tablette ve telefonda sayfayı aynı anda görüntüleyebilir, birindeki kaydırma diğerinde de gerçekleşiyor.

Bu özellik responsive tasarım çalışırken gerçekten değerli. Tarayıcı penceresini küçültüp büyütmek yerine gerçek bir telefon ile masaüstü tarayıcısını yan yana açıp ikisini aynı anda görmek, kırılma noktalarını bulmayı hızlandırıyor.

Neden Grunt değil de Gulp?

O dönemde iki popüler task runner var: Grunt ve Gulp. Grunt yapılandırma tabanlı, Gulp kod tabanlı çalışıyor. Gulp’un pipe (boru) modeli bana daha doğal geldi — bir adımın çıktısı bir sonraki adımın girdisi oluyor, aradaki geçici dosya yazmıyor. Bu, özellikle birden fazla işlemi zincirlerken hız farkı oluşturuyor.

Ayrıca Gulpfile JavaScript kodu olduğu için koşullar, döngüler, değişkenler kullanabiliyorsunuz. Grunt’un YAML benzeri yapılandırması karmaşıklaştığında yönetmesi güç.

Bir tuzağa da denk geldim: gulp-uglify bazı ES6 sözdizimini bozuyordu çünkü eski bir JavaScript motoru kullanıyordu. Transpile adımı olmadan doğrudan küçültme yapmak, eski tarayıcılar için güvenli ama modern sözdizimi kullandığınızda dikkat gerekiyor. Bu sorunu Babel entegre ederek çözdüm ama Gulpfile büyümeye başladı — bu nokta, zamanla Webpack’e geçişin fitilini ateşledi.

Pratik bir ipucu

package.json’daki scripts bölümüne görev eklemek, komut hatırlamayı kolaylaştırıyor:

{
  "scripts": {
    "dev":   "gulp watch",
    "build": "gulp sass scripts"
  }
}

npm run dev ya da npm run build ile çalıştırabiliyorsunuz. Bu sayede Gulp’u global kurmayan biri de npm run ile görevleri kullanabiliyor.

Gulp’u bir kez yapılandırdıktan sonra dosyayı kaydeder kaydetmez tarayıcının güncellendiğini görmek, çalışma ritmine alışıyor. Zihninizi derleme adımından çıkarıp koda veriyorsunuz.