Gulp uglify、重命名和源映射答案

【问题标题】：Gulp uglify, rename and sourcemapsGulp uglify、重命名和源映射
【发布时间】：2019-02-10 00:03:35
【问题描述】：

我正在尝试在 Gulp 中执行以下操作： 1) 将指定文件夹中的 JS 文件压缩到名为“dist”的文件夹中。 2) 将“.min”附加到缩小的文件名。 3) 为缩小的文件提供源地图，并将它们放在名为“地图”的文件夹中。

我正在使用“gulp-uglify”、“gulp-rename”和“gulp-sourcemaps”。

这是我所拥有的：

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');

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

一切都按预期工作，除了地图文件也会附加“.min”。如何将重命名限制为仅在 dist 文件夹中发生？

【问题讨论】：

将此'!src/*.map' 添加到src => gulp.src('src/*.js','!src/*.map')
@matio，“src”、“dist”和“maps”文件夹都在根级别。 'src' 中的 JS 文件被正确地提取到一个 'dist' 文件夹中，并且正在创建 maps 文件夹并添加了 maps 文件。 'src' 文件夹中没有 .map 文件可供我排除。

标签： gulp gulp-uglify gulp-sourcemaps gulp-rename

【解决方案1】：

我做了更多的挖掘并找到了解决方案。我最终将单个任务分成两个不同的任务。一旦文件在 dist 文件夹中，我就会调用“重命名”任务。我还使用 'vinyl-paths' 和 'del' 来删除重命名的文件。这是我所拥有的：

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');
var vinylPaths = require('vinyl-paths');

gulp.task('compress', ['uglify','rename']);

gulp.task('uglify', function() {
    return gulp.src('src/*.js')
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write('../maps'))
    .pipe(gulp.dest('dist'));
});

gulp.task('rename', ['uglify'], function() {
    return gulp.src('dist/*.js')
    .pipe(vinylPaths(del))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('dist'));
});

【讨论】：

【解决方案2】：

通过利用gulp-rename 将函数作为输入的能力，可以将两者组合成一个任务：

gulp.task('prod', function() {
    return gulp.src('src.js'))
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('.'))
        .pipe(rename(function(path) {
            if (!path.extname.endsWith('.map')) {
                path.basename += '.min';
                //gulp-rename with function only concats 'dirname + basename + extname'
            }
        }))
        .pipe(gulp.dest('build/_asset/js'));
});

如果文件扩展名不是 .map，该函数基本上“仅”附加 .min 后缀。输出将是src.min.js 和src.js.map。

【讨论】：