Gulp ile CSS Minify İşlemi

Sezai AlkanFrontend Developer

Node.js #gulp #css #minify

Gulp üzerinde css minify işlemi, css dosyalarının boyutunu küçültmek için kullanılır. Eklentinin desteklediği takdir de bir den fazla css dosyasını birleştirebilir ve sıkıştırma işlemide sağlayabilirsiniz.
 

Gulp ile css minify işlemi nasıl yapılır ?

Bu makale içerisindeki örneklerde gulp-css-minify npm paketini kullanılmaktadır. Bu paketin kullanımı sağlayabilmemiz için öncelikle yüklememiz gerekmektedir. Çalışma ana dizininiz üzerinde terminalde aşağıdaki komutu çalıştırarak yükleme işlemini sağlayabilirsiniz.

npm install gulp-css-minify --save-dev

gulpfile.js dosyasını düzenleme

Ana dizin üzerindeki gulpfile.js dosyanız üzerinde aşağıdaki düzenlemeleri sağlamanız gerekmektedir.

const gulp = require('gulp');
const cssmin = require('gulp-css-minify');

gulp.task('minify-css', function () {
    return gulp.src('src/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'))
});

Yukarıdaki kod bloğu, Gulp ve gulp-css-minify eklentilerinin projenize dahil olmasını sağlar. Yukarıdaki tanımlada css dosyalarınızın okunacağı dizin “src/css” içerisinde tanımlanmaktadır. Bu alanı kullanımınıza göre özelleştirebilmektesiniz. Okuma işlemi sonrası minify edilen dosyalar ise “dist/css” klasörüne kaydedecektir.
 

Gulp çalıştırma 

İşlemler sonrasında dosyalarının minify edilmesi için terminalde aşağıdaki komutu çalıştırmanız yeterli olacaktır. 

gulp minify-css

Bu işlem dosyalarınız üzerinde tek seferlik minify işlemi sağlayacak ve duracaktır. Eğer minify işleminin dosyalarınız üzerinde her düzenleme işlemi sonrası sağlamak istiyor iseniz watch kullanımı ile dosyalarınızı izleyebilirsiniz.