Javascript 如何通过Grunt和/或Gulp查看和处理（以相同的方式）多个文件并将其转换为多个输出？

我目前正在使用Grunt，当我尝试Gulp时，我遇到了与Grunt相同的问题

我正在尝试处理一些js文件（concat、uglify和minify），但我不希望所有这些文件都编译成一个大文件，我需要多个输出文件，每个文件都来自一些输入文件的处理：

scripts =
    firstOutput:
        outputFilename: 'first.min.js',
        inputFiles: ['one.js', 'two.js']

    secondOutput:
        outputFilename: 'second.min.js',
        inputFiles: ['three.js']

    thirdOutput:
        outputFilename: 'third.min.js',
        inputFiles: ['four.js', 'five.js']

我发现（目前）使用Grunt实现这一点的唯一方法是使用多个手表和多个丑陋任务（或者一个丑陋任务和一个监听器在手表上更改以动态修改丑陋任务src和dest）：

正如你所想象的，这只是一个例子，在我的大型web应用程序中，有很多不仅仅是三个输出js文件，我还将一些较少的文件处理成一些css文件

我的Gruntfile非常大，我发现它有很多重复的代码，有没有办法让这些代码重构成一个watch和一个丑陋的任务，自动猜测src和dest，并具有某种依赖性（要知道如果修改了four.js文件，它必须处理第三个输出）

如果你有什么方法可以用Gulp来做，我会非常乐意，因为我想在我通常的工作流程中测试它

“我正在尝试处理一些js文件（concat、uglify和minify） 但是我不想把它们都编译成一个大文件“

我能问一下为什么吗？一个更大的文件的好处是，您可以在HTTP请求上进行保存，您加载的每一个资源都会导致您的网站速度减慢。我可以建议对RequireJS使用适当的依赖关系管理吗？这样，Optimizer可以遍历依赖关系图并为您输出优化文件

这方面也有一项艰巨的任务：

---

以下是使用gulp+vanilla javascript的方法：

var _ = require("underscore")
  , gulp = require("gulp")
  , uglify = require("gulp-uglify")

var scripts = [
  {
    output: 'first.min.js',
    input: ['one.js', 'two.js']
  }
  , {
    output: 'second.min.js',
    input: ['three.js']
  }
  , {
    output: 'third.min.js',
    input: ['four.js', 'five.js']
  }
];

function build(files, dest) {

  return gulp.src(files)
    .pipe(uglify())
    .pipe(gulp.dest(dest));

}

gulp.task("watch", function () {

  _.each(scripts, function (script, i) {

    gulp.watch(script.input, function () {

      build(script.input, script.output);

    });

  });

});

---

如果您可以使用globs来匹配文件集，那么就更好了，这样您就不必为每个

输入

集写出路径。类似于

input:[“one/***/.js，“other/***/.js”]

由于WebApp非常大，我已经在请求获取内容或加载功能，我想我也可以在同一时间获取javascript，而不是第一次加载非常大的JS。谢谢你，先生，这很管用！我不知道我可以循环声明手表。@rhodesjason:可能是这样吗lved不同？例如：观察所有的js文件，然后当例如common.js的更改解决了它的依赖关系后，第一个.min.js、第二个.min.js和第三个.min.js被重新编译？@rhodesjason:还应该注意，在编辑文件时，您的其他优秀解决方案不会向控制台输出任何内容。

var _ = require("underscore")
  , gulp = require("gulp")
  , uglify = require("gulp-uglify")

var scripts = [
  {
    output: 'first.min.js',
    input: ['one.js', 'two.js']
  }
  , {
    output: 'second.min.js',
    input: ['three.js']
  }
  , {
    output: 'third.min.js',
    input: ['four.js', 'five.js']
  }
];

function build(files, dest) {

  return gulp.src(files)
    .pipe(uglify())
    .pipe(gulp.dest(dest));

}

gulp.task("watch", function () {

  _.each(scripts, function (script, i) {

    gulp.watch(script.input, function () {

      build(script.input, script.output);

    });

  });

});