Question

我目前正在使用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实现这一目标的唯一方法是使用多个监视和多个uglify任务（或者一个uglify任务和一个监听器改变动态修改uglify任务src和dest）：

module.exports = (grunt) ->
    grunt.loadNpmTasks 'grunt-contrib-watch'
    grunt.loadNpmTasks 'grunt-contrib-uglify'

    grunt.initConfig
         watch:
             firstOutput:
                 files: scripts.firstOutput.inputFiles
                 tasks: ['uglify:firstOutput']
                 options :
                     spawn : false

             secondOutput:
                 files: scripts.secondOutput.inputFiles
                 tasks: ['uglify:secondOutput']
                 options :
                     spawn : false

             thirdOutput:
                 files: scripts.thirdOutput.inputFiles
                 tasks: ['uglify:thirdOutput']
                 options :
                     spawn : false

         uglify:
             firstOutput:
                 files: scripts.firstOutput.inputFiles
                 dest: scripts.firstOutput.outputFilename

             secondOutput:
                 files: scripts.secondOutput.inputFiles
                 dest: scripts.secondOutput.outputFilename

             thirdOutput:
                 files: scripts.thirdOutput.inputFiles
                 dest: scripts.thirdOutput.outputFilename

    grunt.registerTask 'default', 'watch'

而且，正如您可以想象的那样，这只是一个示例，在我的大型Web应用程序的情况下，不仅仅有三个输出js文件，而且我还将少量文件处理成一些css文件

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

如果你有办法用Gulp做的话，我会非常愉快地接受它，因为我想在我平常的工作流程中测试它。

Answer 1

以下是使用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集写出路径。像input: ["one/**/*.js, "other/**/*.js"]

这样的东西

Answer 2

“我正在尝试处理一些js文件（concat，uglify和minify 他们），但我不希望他们所有人都编译成一个大文件“

我可以问为什么？一个较大文件的好处是您节省了HTTP请求，您加载的每个资源都会导致您的网站速度有所降低。我可以建议使用RequireJS进行适当的依赖管理吗？这样，优化器就可以遍历您的依赖图并为您输出优化文件。

http://requirejs.org/

这也是一项艰巨的任务：

https://github.com/gruntjs/grunt-contrib-requirejs

如何使用Grunt和/或Gulp以多种方式观看和处理（以相同方式）多个文件？

2 个答案: