使用Gulp压缩JS文件，仅保留压缩版不保留原文件的实现方法

嘿，我来帮你搞定这个Gulp的问题！你说得没错，默认情况下gulp-minify会同时输出原文件和压缩后的文件副本，要实现目标目录只保留压缩后的版本，有两种简单的方法，一种是用gulp-minify自带的配置项，另一种是结合gulp-rename来控制文件名，我都给你详细讲讲：

方法一：直接用gulp-minify的内置配置（推荐） #

这种方法不需要额外安装包，通过配置gulp-minify的参数就能实现需求：

首先，确保你已经安装了依赖：

npm install gulp gulp-minify --save-dev

然后修改你的Gulp任务代码：

var gulp = require('gulp');
var minify = require('gulp-minify');

// 定义压缩JS的任务
gulp.task('minify-js', function() {
  return gulp.src('src/js/*.js') // 这里替换成你的源JS文件路径
    .pipe(minify({
      noSource: true, // 核心配置：禁止输出未压缩的原文件副本
      ext: {
        min: '.js' // 压缩后的文件后缀设置为.js，直接覆盖原文件名（在目标目录）
        // 如果想要生成带.min后缀的文件，比如xxx.min.js，就改成 '.min.js'
      }
    }))
    .pipe(gulp.dest('dist/js')); // 替换成你的目标目录
});

运行gulp minify-js后，目标目录里就只有压缩后的JS文件啦，不会再有原文件的副本。

方法二：结合gulp-rename自定义文件名 #

如果你确实想用gulp-rename来更灵活地控制文件名，也可以这么做：

首先安装gulp-rename依赖：

npm install gulp-rename --save-dev

然后修改任务代码：

var gulp = require('gulp');
var minify = require('gulp-minify');
var rename = require('gulp-rename');

gulp.task('minify-js', function() {
  return gulp.src('src/js/*.js')
    .pipe(minify({
      noSource: true // 同样先禁止输出原文件副本
    }))
    // 用rename修改文件名，这里默认压缩后的文件是xxx-min.js，我们可以调整成想要的格式
    .pipe(rename(function(path) {
      // path.basename就是当前文件的主文件名（不含后缀），比如xxx-min
      path.basename = path.basename.replace('-min', ''); // 去掉-min后缀，变成xxx.js
      // 如果想要改成xxx.min.js，就改成：path.basename += '.min';
    }))
    .pipe(gulp.dest('dist/js'));
});

这里的rename函数会接收每个文件的path对象，你可以直接修改path.basename或path.extname来调整文件名，完全不需要额外变量保存文件名，非常方便。

额外小提示 #

• 如果需要跳过某些不需要压缩的JS文件，可以在gulp.src里用排除模式，比如：

  gulp.src(['src/js/*.js', '!src/js/vendor/*.js']) // 排除vendor目录下的所有JS文件
  

• 测试任务时，记得先清空目标目录，避免残留旧文件哦。

内容的提问来源于stack exchange，提问作者Robin Andrews