Sourcemaps

npmjs · github

CSS ve Javascript kodlarının tam olarak hangi klasörden geldiğini belirtir.

Kurulum

Aşağıdaki komut ile kurulum işlemini gerçekleştirebilirsiniz.

npm i gulp-sourcemaps

Kullanımı

var gulp            = require('gulp'),
    sourcemaps      = require('gulp-sourcemaps');
    
gulp.task('css', function() {
  gulp.src('src/*.scss')
    .pipe(sourcemaps.init())
      .pipe(plugin1())
      .pipe(plugin2())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

Yukarıdaki kod, src klasörünün içerisindeki tüm .scss uzantılı dosyaları alıp çeşitli pluginleri (sass, minify, autoprefixer vb) kullandıktan sonra dist klasörüne atar. Normalde tek bir css dosyası çıktısı olacağı için (özellikle büyük projelerde) hangi kodun tam olarak hangi dosyadan geldiğini anlamayabilirsiniz. sourcemaps eklentisi size o kodun kaynak dosyasını gösterecektir.

Sıradaki Eklenti: Uglify