CODEWITHSUNDEEP
gulp
Roy
Roy

Reputation: 1518

Creating multiple output files from a gulp task

I'm learning the gulp way of doing things after using grunt exclusively in the past. I'm struggling to understand how to pass multiple inputs to get multiple outputs w/gulp.

Let's say I have a large project that has specialized js on a per page basis:

The Grunt Way:

grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/everypage.min.js': ['src/jquery.js', 'src/navigation.js'],
        'dest/special-page.min.js': ['src/vendor/handlebars.js', 'src/something-else.js']
      }
    }
  }
});

This may be a poor example as it violates the "do only one thing" principle since grunt-uglify is concatenating and uglifying. In any event I'm interested in learning how to accomplish the same thing using gulp.

Upvotes: 2

Views: 2900

Answers (1)

Roy
Roy

Reputation: 1518

Thanks to @AnilNatha I'm starting to think with more of a Gulp mindset.

For my case I have a load of files that need to be concatenated. I offloaded these to a config object that my concat task iterates over:

// Could be moved to another file and `required` in.
var files = { 
  'polyfills.js': ['js/vendor/picturefill.js', 'js/vendor/augment.js'],
  'map.js': [
    'js/vendor/leaflet.js',
    'js/vendor/leaflet.markercluster.min.js',
    'js/vendor/jquery.easyModal.js',
    'js/vendor/jquery-autocomplete.min.js',
    'js/vendor/underscore.1.8.3.js',
    'js/map.js'
  ],
  ...
};
var output = './build/js';

// Using underscore.js pass the key/value pair to custom concat function
gulp.task('concat', function (done) {
  _.each(files, concat);
  // bs.reload(); if you're using browsersync
  done(); // tell gulp this asynchronous process is complete

});

// Custom concat function
function concat(files, dest) {
  return gulp.src(files)
    .pipe($.concat(dest))
    .pipe(gulp.dest(output));
}

Upvotes: 4

Related Questions