How to include source map for CSS minification scritpt created by gulp task?

Question

I am working on minification of CSS using gulp.

Problem is when I need to debug CSS, I see all css are in knx.dev.css, but I need to build a solution when do inspect element it can lead to original file from where it has been generated

package.json

{
    "main": "index.js",
    "dependencies": {
      "gulp": "^3.9.1"
    },
    "devDependencies": {
          "gulp-bundle-files": "^1.9.5110",
          "gulp-concat": "^2.6.1",
          "gulp-cssmin": "^0.2.0",
          "gulp-rename": "^1.2.2"
    },
    "scripts": {
          "build": "gulp",
          "start": "gulp dev_css"
    }
}

Gulp task

var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var css_file_list = [
  //List of files];

gulp.task('default', function () {
    gulp.src(css_file_list)
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(concat('knx.min.css'))
        .pipe(gulp.dest('./'));
});
gulp.task('dev_css', function () {
    gulp.src(css_file_list)
        .pipe(concat('knx.dev.css'))
        .pipe(gulp.dest('./'));
});

Answer 1

@muneer-alam your idea works but I have found another way using gulp-sourcemaps

so for knx.dev.css gulp build I have changed gulp build as below

var sourcemaps = require('gulp-sourcemaps');
.
.
.
gulp.task('dev_css',function () {
  return gulp.src(css_file_list)
    .pipe(sourcemaps.init())
    .pipe(concat('knx.dev.css'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./'));
});

It give me a source map i.e. going to proper file when I do inspect element.