How to watch and process (the same way) several files into several outputs with Grunt and/or Gulp?

Question

I am currently using Grunt, and as I was trying Gulp, the same problem I encountered first with Grunt occurred to me.

I am trying to process some js files (concat, uglify and minify them), but I don't want all of them to compile into one big file, I want multiple output files, each from the processing of some input files :

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']

The only way I found (for now) to achieve that with Grunt is with multiple watches and multiple uglify tasks (or one uglify task and a listener on watch change to dynamically modify the uglify task src and 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'

And, as you can imagine, this is just an example, in my case of a big web application, there's a lot more than just three output js files, and I also process a few less files into some css files

My Gruntfile is really huge, and I find it has a lot of duplicate code, is there any way to have this code refactored to have one watch and one uglify task, with an automatically guessed src and dest with some kind of dependency (to know that if the four.js file is modified, it has to process the third output) ?

If you have some way to do it with Gulp I'll take it with great pleasure, as I would like to test it in my usual workflow.

rhodesjason rhodesjason · Accepted Answer · 2014-02-18T15:04:26

Here's how you can do this with 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);

    });

  });

});

Even better if you can use globs to match sets of files so you don't have to write out the path for every single input set. Something like input: ["one/**/*.js, "other/**/*.js"]

How to watch and process (the same way) several files into several outputs with Grunt and/or Gulp?

2 Answers