Generating source maps with gulp - gulp

Question

I just started using gulp to bundle and minify our js and css files. I have the gulpfile.js below set up to consume our bundleconfig.json and it is working good for bundling and minifying js files but I would like to also make it handle generating source maps. I have looked through the sourcemap plugin documentation but haven't had much luck getting it set up. How would I modify my gulpfile.js to handle this? I have also included my bundleconfig.json for reference.
gulpfile.js:
"use strict";
var gulp = require("gulp"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify"),
merge = require("merge-stream"),
del = require("del"),
bundleconfig = require("./bundleconfig.json");
var regex = {
css: /\.css$/,
html: /\.(html|htm)$/,
js: /\.js$/
};
gulp.task("min:js", function () {
var tasks = getBundles(regex.js).map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: "." })
.pipe(concat(bundle.outputFileName))
.pipe(uglify())
.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: "." })
.pipe(concat(bundle.outputFileName))
.pipe(cssmin())
.pipe(gulp.dest("."));
});
return merge(tasks);
});
gulp.task("clean", function () {
var files = bundleconfig.map(function (bundle) {
return bundle.outputFileName;
});
return del(files);
});
gulp.task("watch", function () {
getBundles(regex.js).forEach(function (bundle) {
gulp.watch(bundle.inputFiles, ["min:js"]);
});
getBundles(regex.css).forEach(function (bundle) {
gulp.watch(bundle.inputFiles, ["min:css"]);
});
});
gulp.task("min", gulp.parallel("min:js", "min:css"));
function getBundles(regexPattern) {
return bundleconfig.filter(function (bundle) {
return regexPattern.test(bundle.outputFileName);
});
}
bundleconfig.json:
[
{
"outputFileName": "Scripts/vendor.min.js",
"inputFiles": [
"jsPackages/jquery/jquery.js",
"jsPackages/jquery-validate/jquery.validate.js",
"jsPackages/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js",
"jsPackages/moment.js/moment.js",
"jsPackages/chart.js/dist/Chart.js",
"jsPackages/chartjs-plugin-annotation/chartjs-plugin-annotation.js",
"jsPackages/chartjs-plugin-labels/src/chartjs-plugin-labels.js",
"jsPackages/chart.js/dist/Chart.js",
"jsPackages/leaflet/leaflet.js"
]
}
]

Answer 1

I figured it out after a lot of toiling here is my working solution for anyone who runs into similar issues:
"use strict";
var gulp = require("gulp"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify"),
merge = require("merge-stream"),
sourcemaps = require('gulp-sourcemaps'),
del = require("del"),
bundleconfig = require("./bundleconfig.json"),
replace = require("gulp-replace"),
babel = require("gulp-babel");
var regex = {
css: /\.css$/,
html: /\.(html|htm)$/,
js: /\.js$/
};
gulp.task("min:js", function () {
var tasks = getBundles(regex.js).map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: "." })
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(babel())
.pipe(concat(bundle.outputFileName))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest("."));
});
return merge(tasks);
});
gulp.task('publish:webfonts', function () {
return gulp.src('Scripts/jsPackages/font-awesome/webfonts/*')
.pipe(gulp.dest('Content/webfonts/'));
});
gulp.task('clean:obj', function () {
return del("obj/**", {force: true});
});
gulp.task("min:css", function () {
var tasks = getBundles(regex.css).map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: "." })
.pipe(concat(bundle.outputFileName))
.pipe(cssmin())
.pipe(gulp.dest("."));
});
return merge(tasks);
});
gulp.task("clean:bundles", function () {
var files = bundleconfig.map(function (bundle) {
return bundle.outputFileName;
});
return del(files);
});
gulp.task("watch", function () {
getBundles(regex.js).forEach(function (bundle) {
gulp.watch(bundle.inputFiles, ["min:js"]);
});
getBundles(regex.css).forEach(function (bundle) {
gulp.watch(bundle.inputFiles, ["min:css"]);
});
});
gulp.task("min", gulp.parallel("min:js", "publish:webfonts", "min:css"));
gulp.task("clean", gulp.parallel("clean:bundles", "clean:obj"));
function getBundles(regexPattern) {
return bundleconfig.filter(function (bundle) {
return regexPattern.test(bundle.outputFileName);
});
}