如何创建一个Gulp任务来正确地缩小.min文件并将源映射到该文件

我正在尝试创建一个gulp任务，以同时压缩和创建一个源地图。压缩和源代码映射创建工作正常，但我似乎不知道如何在使用

gulprename

插件时获得正确的输出名称

为了简化：我在

/src

文件夹中有一个

source.js

文件，我想在

/dist

文件夹中创建

.min.js

和

.js.map

文件

以下是我所拥有的：

gulp.task('scripts', function () {

// compressed
gulp.src(['src/*.js'])
    .pipe(sourcemaps.init({ includeContent: false, sourceRoot: './' }))        
    .pipe(uglify())        
    .pipe(sourcemaps.write('./', {
        sourceMappingURL: function(file) {
            return file.relative + '.map';
        }
    }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('./dist'));
});

其工作原理是在

/dist

中创建以下内容：

• jquery resizeable.min.js

  （都很好-压缩，映射参考和正确的名称）

• jquery resizeable.js.min.map

  （地图在那里，但名称不正确-应该是jquery resizeable.js.map）

我尝试了很多变体，但我不知道如何获得映射和压缩来构建和获得正确的文件名

我还尝试在单独的步骤中重命名这些文件，但由于gulp的异步性质，这无法可靠地工作-有时可以工作，有时不行，因此这似乎也不是一个选项

我错过了什么

我不喜欢用这种方式创建sourcemaps，但正确的方法是什么？我看到的所有示例似乎都与我上面所做的一样，除了它们没有将输出文件重命名为min.js，这似乎是该过程的一个重要部分。

我建议在重命名期间使用从管道中删除

.map

文件

var jsFilter = require('gulp-filter')([ '*.js', ], { restore: true, });
gulp.src(['src/*.js'])
    .pipe(sourcemaps.init({ includeContent: false, sourceRoot: './' }))        
    .pipe(uglify())        
    .pipe(sourcemaps.write('./', {
        sourceMappingURL: function(file) {
            return file.relative + '.map';
        }
    }))
    .pipe(jsFilter)
    .pipe(rename({ suffix: '.min' }))
    .pipe(jsFilter.restore)
    .pipe(gulp.dest('./dist'));

也就是说，我们的工作流在源映射之前进行重命名，并正确生成映射

gulp.src(['src/*.js'])
    .pipe(sourcemaps.init())        
    .pipe(uglify())        
    .pipe(rename({ suffix: '.min', }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist'));

---

@bdukes的回答基本上解决了我的问题，并引导我找到了正确的解决方案。我现在发布的是在我上面提到的基于他的答案的具体案例中对我有效的实际解决方案

我的问题之一是无法生成原始源文件以及压缩和映射文件。我可以通过一个额外的步骤将文件显式地移动到一个单独的

管道（gulp.dest（'./dist'））

操作：

gulp.task('scripts', function () {

    // compress and source map
    gulp.src(['src/*.js'])
        .pipe(sourcemaps.init({ includeContent: false, sourceRoot: './' }))
        .pipe(uglify())   
        .pipe(sourcemaps.write('.', {
            sourceMappingURL: function(file) {
                return file.relative + '.map';
            }
        }))        
        .pipe(jsFilter)
        .pipe(rename({ suffix: '.min' }))
        .pipe(jsFilter.restore)
        .pipe(gulp.dest('./'));

    // also copy source files
    gulp.src(['src/*.js'])
        .pipe(gulp.dest('./dist'));
});

---

这个故事的寓意——不要想得太多——我试图让它在一次操作中全部工作。

正确的文件名是什么

jquery resizeable.js.map

？是。更新问题以澄清您是否尝试在源地图之前重命名？是-结果相同。问题一旦被重新命名，它就适用于链中的所有内容。我不想一步到位，但如果你把工作分给另一个单独的步骤或任务，异步会把你难住。谢谢@bdukes。第一个使用jsfilter的示例是可行的，但并不特别高兴它需要额外的插件和这种不可读的语法来完成这种常见的简单工作。不过谢谢-这至少会起作用并删除我额外的

fix

任务。第二个示例对我不起作用-它仍然为我生成

jqueryresizeable.min.js.map

。我在gulp rename的一些线程中看到，它应该知道源地图插件，但它似乎没有做正确的事情。无论哪种方式-都应该有一种更简单、更自然的表达方式来完成这项工作。在我的第二个示例中，它生成了名为

.min

的

.map

文件，但它与

.min.js

文件中的声明相匹配，所以它都可以工作。你关心命名是因为它不起作用，还是出于美学的原因？也可以考虑运行<代码> NPM过时的<代码>，看看是否需要更新一些插件。