使用 gulp 生成源映射

Posted

技术标签:

【中文标题】使用 gulp 生成源映射【英文标题】:Generating source maps with gulp 【发布时间】:2019-10-02 22:43:54 【问题描述】:

我刚开始使用 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"
    ]
  
]

【问题讨论】:

【参考方案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);
    );

【讨论】:

以上是关于使用 gulp 生成源映射的主要内容,如果未能解决你的问题,请参考以下文章

禁用指南针/scss 源地图

Gulp:为缩小和非缩小脚本生成源图

在 Angular 中使用源映射生成生产版本 - CLI

Webpack-dev-server 不生成源映射

webpack 4 sass-loader 不生成 scss 源映射

gulp常用插件之gulp-sourcemaps使用