Gulp ile İşlerinizi Kolaylaştırın

Merhaba arkadaşlar, front-end çalışmalarında gulp kullandığım şu dönemde bilmeyenler için bir makale yazmaya karar verdim. Öncelikle ne nedir bundan başlayalım ve neden kullanmamız gerek anlayalım.

Gulp nedir?

Gulp, geliştirme yaparken iş akışımızı yavaşlatan işlemleri otomatik yapmamızı sağlayan bir araçtır.

Gulp hangi durumlarda kullanılır?

CSS, HTML, JavaScript ya da Resim dosyalarınızla ilgili işlemler için kullanılabilir.

Ben kısaca CSS’de SASS ve LESS dosyalarımı çalıştırdım, minify ettim, tek dosya haline getirdim. Görselleri sıkıştırarak daha küçük boyut haline getirdim. HTML’leri herhangi bir template engine sisteminde otomatik çıkarttım. Javascript’te minify edip tüm js dosyalarını tek bir js dosyasına çevirdim. Ve bunları yaparken gulp dosyamı ayarladıktann sonra hiçbir şey yapmadım ????

Gulp nasıl kurulur?

Gulp, çalışması için node.js ve npm’in kurulu olması gerek. Öncelikle node.js’i sisteminize kurun. Daha sonra şu komutu çalıştırın;

npm install gulp-cli -g
npm install gulp -D

Burada -D aynı zamanda –save-dev değerine eşittir.

Gulp nasıl kullanılır?

Öncelikle dizininizde gulpfile.js adında bir dosya oluşturun. Gulp ile ilgili işlemleri bu dosya içinde yapacağız. Ancak gulp’ı tek başına kullanmak yetmiyor, başka paketlerde indirmeliyiz. Örneğin;

• sass compiler için – gulp-sass
• css minify için – gulp-csso
• dosyaları birleştirmek için – gulp-concat
• css’de tarayıcı versiyonuna göre prefix ekletmek için – gulp-autoprefixer
• resim dosyalarını sıkıştırmak için – gulp-imagemin
• javascript dosyalarını minify etmek için – gulp-uglify
• dosyaları silmek için – del
• html’i sıkıştırmak için – gulp-htmlmin
• belli bir sırayla taskları başlatmak için – run-seqeuence
• anlık olarak değişiklikleri görmek için – browser-sync

Bu paketleri tek tek isimleriyle şu şekilde kurabilirsiniz;

npm install --save-dev paket_adi

Burada --save-dev dememizin sebebi, bu paketlere sadece geliştirirken ihtiyacımız var, production’da ihtiyacımız olmadığından bu şekilde kuruyoruz.

Şimdi paketleri kurmadan önce bir tane package.json dosyası oluşturalım. Bunun için şu komutu çalıştıralım;

npm init

Daha sonra enter – enter diyerek sonuna kadar gidelim ve dosyamız oluşmuş olacak. Dosya oluştuktan sonra şunun gibi bir şe yolacak içeriği;

{
  "name": "erbilen-test",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Şimdi bunu neden oluşturduk birazdan anlayacağız. Dilerseniz artık paketleri kurabilirsiniz. Ya da package.json dosyanızı şu şekilde değiştirip;

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {},
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-csso": "^3.0.1",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^4.1.0",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.1",
    "run-sequence": "^2.2.1"
  }
}

Şu komutu çalıştırırsanız otomatik paketler kurulacaktır;

npm install

Paketlerin kurulması biraz zaman alır, kurulduğunda çalıştığınız dizine node_modules diye bir klasör gelecek. Tüm paketler bunun içinde yer alıyor.

Son olarak çalıştığımız klasör içerisinde dist ve src adında 2 klasör oluşturalım. dist burada projenin son hali, src ise sizin çalıştığınız versiyon olacak. Yani production ürünümüz dist içerisinde yer alacak.

Artık gulp’ı ve diğer paketleri beraberinde kullanmaya hazırız. Öncelikle kullanacağımız paketleri sayfamıza dahil edelim. gulpfile.js dosyamız şu şekilde olacak;

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const minifyCSS = require('gulp-csso');
const minifyImg = require('gulp-imagemin');
const minifyJS = require('gulp-uglify');
const minifyHTML = require('gulp-htmlmin');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const del = require('del');
const runSequence = require('run-sequence');

Ve artık tasklarımızı yazmaya başlayalım. Gulp’ta bir task oluşturmanın yolu şudur;

gulp.task('task_adi', () => {
    // işlemler
});

Bunu baz alarak browser-sync için ilk taskımızı oluşturalım.

gulp.task('browser-sync', () => {
    browserSync.init({
        server: {
            baseDir: "dist"
        }
    });
});

Burada baseDir yolunu dist olarak belirledik. Çünkü projemizin son hali orada yer alacak. Ve browser-sync bu klasörü bize serve ederek src altında herhangi bir html’de değişiklik olduğunda sayfayı reload edecek. Burada dikkat etmemiz gereken şey src/*.html yerine src/**/*.html yazmış olmamız. Bu src altındaki .html ile biten ve src altında herhangi bir klasör içinde .html ile biten tüm html dosyaları için geçerli olsun demek.

Şimdide CSS için taskımızı oluşturalım;

gulp.task('css', () => {
    return gulp.src('src/scss/**/*.scss')
        .pipe(sass({
            outputStyle: 'nested',
            precision: 10,
            includePaths: ['.']
        }).on('error', sass.logError))
        .pipe(minifyCSS())
        .pipe(autoprefixer())
        .pipe(concat('app.min.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
});

Bu taskta sass’ı kullandık, minify ettik, prefixleri eklettik, concat ile tek dosyada birleştirip adını app.min.css koyduk, dest kısmına dist içindeki css klasörüne eklenecek dedik ve son olarak browser-sync kullandık. Bunuda watch ile işlem yaptığımızda anlayacaksınız.

Şimdide JS için taskımızı oluşturalım;

gulp.task('js', () => {
    return gulp.src('src/js/**/*.js')
        .pipe(concat('app.min.js'))
        .pipe(minifyJS())
        .pipe(gulp.dest('dist/js'))
        .pipe(browserSync.stream());
});

Bu taskta yine javascript dosyalarının yolunu belirttikten sonra concat ile tek dosya haline getirdik, uglify ile minift ettik ve dist içindeki js klasörüne çıkarttık. CSS’te olduğu gibi bunda da browser-sync işlemi yaptık.

Şimdide HTML için taskımızı oluşturalım;

gulp.task('html', () => {
    gulp.src('src/**/*.html')
        .pipe(minifyHTML({
            collapseWhitespace: true,
            removeComments: true
        }))
        .pipe(gulp.dest('dist'))
        .pipe(browserSync.stream());
});

Bu taskta da yine html dosyalarının yolunu belirttik, minify ettik ve dist içerisine çıkarttık. HTML’i minify etmek zorunda değilsiniz tabi, ben öyle can sıkıntısına ettim o ayrı ????

Şimdide resimler için taskımızı oluşturalım;

gulp.task('img', () => {
    gulp.src('src/img/**/*')
        .pipe(minifyImg())
        .pipe(gulp.dest('dist/img'));
});

Bu taskta da yine resimlerin yolunu belirttik, minify ettik ve dist içindeki img klasörüne çıkarttık.

Şimdi ne olacak?

Şimdi tasklarımızı oluşturduk. Son 3 taskımız kaldı, bunlardan ilki gulp çalıştığında dist altındaki ilgili dosyaları silmesi için. İkincisi watch ile dosyaları izleyip bir değişiklik olduğunda ilgili taskları yeniden çalıştırmak için, ve son olarak runSequence kullanarak tasklarımızı sırayla çalıştırmak için;

gulp.task('delete', () => del(['dist/css', 'dist/js', 'dist/img', 'dist/**/*.html']));

gulp.task('watch', () => {
    gulp.watch("src/scss/**/*.scss", ['css']);
    gulp.watch("src/js/**/*.js", ['js']);
    gulp.watch("src/img/**/*", ['img']);
    gulp.watch("src/**/*.html", ['html']);
});

gulp.task('default', () => {
    runSequence(
        'delete',
        'html',
        'css',
        'js',
        'img',
        'browser-sync',
        'watch'
    );
});

İlk taskta css, js, img ve .html dosyalarını sildik. Burada ben özellikle belirttim hangileri olacağını, bazen font dosyası vs. atıyoruz dist içine oda silinmesin diye.

İkinci taskta gulp’ın watch özelliğini kullandık. Buda ilgili dosyaları izleyip bir değişiklik olduğunda belirlediğimiz taskları çalıştırmamızı sağlıyor. Hatırlarsanız css, js tasklarında browser-sync ile ilgili bir kod yazmıştık. İşte burada watch ile izlenip değişiklik olduğunda o task çalıştığında browser-sync’de sayfayı otomatik yenileyip değişiklikleri görmemizi sağlayacak.

Son taskımızın adı default, normalde gulp’ı çalıştırırken task adı belirtilmez ise otomatik olarak default taskı çalıştırılır. Bu yüzden adını bu şekilde koyduk. Bu taskta ise sırasıyla tasklarımız çalıştırıyoruz, yani önce delete taskı çalışıp dist içindeki herşeyi silecek, sonra html taskı çalışıp dist içine html dosyalarını atacak, daha sonra css, js, img. Ondan sonra browser-sync bize bir sunucu oluşturup dosyaları canlı olarak izlememize olanacak sağlayacak. Ve son olarak watch taskıda değişiklikleri takip edecek. Artık gulp’ı çalıştırmak için şunu yazmamız yeterli;

gulp

Sonuç şöyle olacak;

MacBooks-MacBook-Pro-2:frontend tayfunerbilen$ gulp
[00:18:12] Using gulpfile /Applications/MAMP/htdocs/frontend/gulpfile.js
[00:18:12] Starting 'default'...
[00:18:12] Starting 'delete'...
[00:18:12] Finished 'default' after 7.77 ms
[00:18:12] Finished 'delete' after 37 ms
[00:18:12] Starting 'html'...
[00:18:12] Finished 'html' after 16 ms
[00:18:12] Starting 'css'...
[00:18:12] Finished 'css' after 451 ms
[00:18:12] Starting 'js'...
[00:18:13] Finished 'js' after 1.4 s
[00:18:13] Starting 'img'...
[00:18:13] Finished 'img' after 1.55 ms
[00:18:13] Starting 'browser-sync'...
[00:18:14] Finished 'browser-sync' after 41 ms
[00:18:14] Starting 'watch'...
[00:18:14] Finished 'watch' after 178 ms
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.21:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Serving files from: ./dist/
[00:18:44] gulp-imagemin: Minified 65 images (saved 200 kB - 5.9%)

Şimdi gördüğünüz gibi http://localhost:3000 üzerinden artık projemize ulaşabiliriz. Hatta http://192.168.1.21:3000 üzerinden aynı wifi’ye bağlı diğer cihazlardanda ulaşabiliriz. Böylece bir değişiklik olduğunda tüm cihazlardan aynı anda görebileceğiz.

Son hali

Yazdığım kodların son halini github sayfamda paylaştım. Eğer git kurulu ise;

git clone https://github.com/tayfunerbilen/frontend-gulp.git

diyerek indirebilirsiniz. Ya da şu linkten;
https://github.com/tayfunerbilen/frontend-gulp indirebilirsiniz.

İndirdikten sonra;

npm install
gulp

şeklinde kurup çalıştırabilirsiniz. Hepsi bu kadar ???? Kolaylıklar dilerim.