Creating .js, .min.js and .js.map file with gulp?

Question

I am trying to utilize gulp 3.9 to minify my resource files.

I created a two different tasks in my gulpfile that looks like this

var gulp = require("gulp"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
filter = require('gulp-filter'),
sourcemaps = require('gulp-sourcemaps'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify-es').default,
merge = require("merge-stream"),
del = require("del"),
bundleconfig = require("./bundleconfig.json");

gulp.task("min:js", function () {
    var tasks = getBundles(regex.js).map(function (bundle) {

        return gulp.src(bundle.inputFiles, { base: ".", sourcemaps: true })
            .pipe(filter('**/*.js'))
            .pipe(concat(bundle.outputFileName))
            .pipe(sourcemaps.write('../maps')) // shouldn't this create file.js.map file?
            .pipe(gulp.dest("."))
            .pipe(uglify())
            .pipe(rename({ suffix: '.min' }))
            .pipe(sourcemaps.write('../maps')) // shouldn't this create file.min.js.map file?
            .pipe(gulp.dest("."));
    });

    return merge(tasks);
});

gulp.task("min:css", function () {
    var tasks = getBundles(regex.css).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: ".", sourcemaps: true })
            .pipe(filter('**/*.css'))
            .pipe(concat(bundle.outputFileName))
            .pipe(sourcemaps.write('../maps'))
            .pipe(gulp.dest("."))
            .pipe(cssmin())
            .pipe(rename({ suffix: '.min' }))
            .pipe(sourcemaps.write('../maps'))
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

However, the above code seems to only be generating the.min and the regular (non-minified) file but not the source map file.

How can I use Gulp to generate the 3 js,css and sourcemap files every time the "min:js" and "min:css" tasks are executed?

Answer 1

As per the documentation you should init source map:

.pipe(sourcemaps.init())

In generation minified js case:

gulp.src(bundle.inputFiles, { base: ".", sourcemaps: true })
            .pipe(filter('**/*.js'))
            .pipe(sourcemaps.init())
            .pipe(concat(bundle.outputFileName))
            .pipe(sourcemaps.write('../maps'))  
            .pipe(uglify())
            .pipe(rename({ suffix: '.min' }))
            .pipe(gulp.dest(".")) ;

And change your css minification accordingly. Click her for more info about sourcemap