Генерация исходных карт с gulp

Question

Я только начал использовать gulp для объединения и минимизации наших файлов js и css. У меня есть gulpfile.js ниже, настроенный для использования нашего bundleconfig.json, и он хорошо работает для объединения и минимизации js-файлов, но я также хотел бы заставить его обрабатывать генерацию исходных карт. Я просмотрел документацию по плагину sourcemap, но мне не очень повезло с его настройкой. Как бы я изменил свой gulpfile.js, чтобы справиться с этим? Я также включил свой bundleconfig.json для справки.

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

Я понял это после большого труда, вот мое рабочее решение для тех, кто сталкивается с подобными проблемами:

"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);
    });
}