# Gulp ile front-end derleme hattı kurmak

> Gulp ile Sass derleme, JavaScript birleştirme ve tarayıcı yenilemeyi otomatikleştiren bir front-end iş akışı kurdum.

- Yayın: 2015-08-02
- Kategori: Araçlar & Teknolojiler
- Etiketler: JavaScript, Gulp
- Okuma süresi: 3 dk okuma
- Kaynak: https://www.muhammetsafak.com.tr/blog/gulp-ile-front-end-derleme-hatti-kurmak/
- Dil: tr-TR
- Yazar: Muhammet Şafak

---
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:

```bash
npm install -g gulp
```

Proje klasöründe:

```bash
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:

```javascript
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:

```bash
gulp sass
```

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

```bash
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](/blog/es6-ile-tanisma-let-const-ve-ok-fonksiyonlari) 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:

```json
{
  "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.