Eyl.26

Gulp Dersleri – Part 8 – CSS Dosyalarını Minimize Etmek (gulp-minify-css)

CSS minify işlemi de bir önceki konumuzda gördüğümüz HTML minify işlemi ile aynıdır. Command Prompt’tan gulp-minify-css modülünü yükleyelim.

npm install –save-dev gulp-minify-css

Kurulum tamamlanınca, az önce düzenlediğimiz gruntfile.js dosyasını açıp, ek olarak aşağıdaki kodları girelim.

var gulp = require(‘gulp’)
, minifyHTML = require(“gulp-minify-html”)
, minifyCSS = require(“gulp-minify-css”);
gulp.task(‘minify-html’, function () {
gulp.src(‘dev/*.html’)
.pipe(minifyHTML())
.pipe(gulp.dest(‘dist’));
});
gulp.task(‘minify-css’, function () {
gulp.src(‘dev/css/*.css’)
.pipe(minifyCSS())
.pipe(gulp.dest(‘dist/css’));
});

Öncelikle minifyCSS isminde bir değişkene modülümüzü yükledik. Ardından bir önceki konumuzda oluşturduğumuz minify-html Task’ından sonra minify-css isminde yeni bir Task oluşturduk. Kaynak olarak dev/css/ klasörü altındaki tüm .css formatlı dosyaları seçtik. Minify edilmişleri de dist/css/ altında oluştur dedik. dist klasörü altında css klasörü olmadığı halde, klasörü de kendisi oluşturacaktır.

Kodları yazıp kaydettikten sonra tekrar Command Prompt’ta aşağıdaki komutu yazın ve sonucu izleyin.

gulp minify-css

Minify edilmiş index.css dosyası aşağıdaki gibi olacaktır. Bütün TAB, ENTER ve SPACE karakterleri silinmiş.

body{background-color:silver}.sayfa{width:400px;padding:15px;background-color:#fff;border-radius:15px;border-color:1px solid #000;text-align:justify;position:absolute;left:50%;top:10%;margin-left:-200px}#logo{height:100px;width:auto;float:left}.maddeler{list-style-image:url(../images/madde.png)}#tarih{text-align:right;font-size:13px}

Her yeni bir modül eklediğimizde, package.json’da yeni modülün bağımlılığı da devDependencies içine eklenecektir.

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum