Getting Source Maps to work with Gulp

Question

Any help getting sourcemaps working with Gulp? This is my first project using Gulp and SASS together that I've setup and I'm find it impossible to debug with Developer tools with the minified css.

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var header = require('gulp-header');
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var pkg = require('./package.json');
var sourcemaps = require('source-map');

// Compiles SCSS files from /scss into /css
gulp.task('sass', function() {
  return gulp.src('scss/creative.scss')
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(header(banner, {
      pkg: pkg
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});