使用一系列插件获取 gulp-sourcemaps 以正确映射

Question

我有一个包含多个插件的 git 存储库（1 个主要插件和几个仅用于与主要插件一起使用的插件）。我正在使用 this approach 进行分发，因为 Bower 没有提供一种方法让每个 git 存储库拥有多个插件。

所以，我需要缩小每个插件，为每个插件创建源映射，并将每个插件放入与 git 子模块相对应的单独分发文件夹中，按照惯例，我将其命名为使它变得简单的插件。我提出了以下 Gulp 脚本，它一步完成所有这些，主要基于我找到的答案 here.

return gulp.src(['./jquery.dirtyforms.js', './helpers/*.js', './dialogs/*.js'], { base: './' })
    .pipe(jshint())
    .pipe(jshint.reporter(stylish))
    .pipe(rename(function (path) {
        var baseName = path.basename;
        var dirName = path.dirname;
        if (dirName == 'helpers' || dirName == 'dialogs') {
            path.basename = 'jquery.dirtyforms.' + dirName + '.' + baseName;
            console.log(path.basename);
        }
        path.dirname = path.basename;
    }))
    .pipe(gulp.dest(distributionFolder))
    .pipe(sourcemaps.init())
    .pipe(rename(function (path) {
        var baseName = path.basename;
        var dirName = path.dirname;
        if (dirName == 'helpers' || dirName == 'dialogs') {
            path.basename = 'jquery.dirtyforms.' + dirName + '.' + baseName;
            console.log(path.basename);
        }
        path.dirname = path.basename;
        path.extname = '.min.js';
    }))
    .pipe(uglify({
        outSourceMap: true,
        sourceRoot: '/'
    }))
    .pipe(gulp.dest(distributionFolder))
    .pipe(sourcemaps.write('.', {
        includeContent: true,
        sourceRoot: '/'
    }))
    .pipe(gulp.dest(distributionFolder));

除了一件事，它完全符合我的要求。为每个插件生成的 sourcemap 文件包括路径中的子目录。由于插件的最终目标不会包含此路径，因此这是无效的。

在 jquery.dirtyforms.min.js.map 文件中：

{"version":3,"sources":["jquery.dirtyforms/jquery.dirtyforms.min.js"]...

应该是

{"version":3,"sources":["jquery.dirtyforms.min.js"]...

并且在 jquery.dirtyforms.min.js 文件中：

//# sourceMappingURL=../jquery.dirtyforms/jquery.dirtyforms.min.js.map

应该是

//# sourceMappingURL=jquery.dirtyforms.min.js.map

我翻遍了 gulp-sourcemaps 的源代码，试图找到一个选项来覆盖文件名，但似乎没有。

我为此想到的两个可能的解决方案是：

使用正则表达式在每个文件中进行替换
生成distributionFolder中的文件，生成后移动到正确的子文件夹

但这两个看起来都像是 hack。如果流首先正确创建它们会更好。有没有办法做到这一点？

Answer 1

我最终选择了我提到的第二个选项——即在 distributionFolder（现在是 settings.dest）中生成缩小文件，然后使用单独的复制和删除任务移动它们。

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    jshint = require('gulp-jshint'),
    stylish = require('jshint-stylish'),
    rename = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps'),
    del = require('del');

var settings = {
    baseProject: 'jquery.dirtyforms',
    src: ['./jquery.dirtyforms.js', './helpers/*.js', './dialogs/*.js'],
    dest: './dist/'
};

// Moves the .js files to the distribution folders and creates a minified version and sourcemap
gulp.task('build', ['copy-minified'], function (cb) {
    del([settings.dest + '*.js', settings.dest + '*.map'], cb);
});

gulp.task('copy-minified', ['uglify'], function () {
    return gulp.src([settings.dest + '*.js', settings.dest + '*.map'], { base: './' })
        .pipe(rename(function (path) {
            console.log('moving: ' + path.basename)
            path.dirname = path.basename.replace(/\.min(?:\.js)?/g, '');
        }))
        .pipe(gulp.dest(settings.dest));
});

gulp.task('uglify', ['clean', 'test'], function () {
    return gulp.src(settings.src, { base: './' })
        .pipe(rename(function (path) {
            var baseName = path.basename;
            var dirName = path.dirname;
            if (dirName == 'helpers' || dirName == 'dialogs') {
                path.basename = settings.baseProject + '.' + dirName + '.' + baseName;
            }
            path.dirname = path.basename;
        }))
        .pipe(gulp.dest(settings.dest))
        .pipe(sourcemaps.init())
        .pipe(rename(function (path) {
            path.dirname = '';
            path.extname = '.min.js';
        }))
        .pipe(uglify({
            outSourceMap: true,
            sourceRoot: '/'
        }))
        .pipe(gulp.dest(settings.dest))
        .pipe(sourcemaps.write('.', {
            includeContent: true,
            sourceRoot: '/'
        }))
        .pipe(gulp.dest(settings.dest));
});

// Tests the source files (smoke test)
gulp.task('test', function () {
    return gulp.src(settings.src, { base: './' })
        .pipe(jshint())
        .pipe(jshint.reporter(stylish));
});

也许有更好的替代方案，但它对我有用。

使用一系列插件获取 gulp-sourcemaps 以正确映射

Getting gulp-sourcemaps to map correctly with a series of plugins

gulp

gulp-uglify

gulp-sourcemaps