Gulp pass in files to process

Question

I have a gulp file with 2 tasks in that perform exactly the same actions on a set of files, the only difference between then is the input files and the output name and destination. Is there a way I can use the same task to process 2 batches of files and not duplicate the code? I guess like a function of some sorts. Ive tried passing in parameters and looking on google but can find any examples of what im trying to achieve.

var outPutFolder = '../';

//Array of all the JS files to compile for scripts.min.js
var js = [
    'js/library/_helpers.js',
    'js/library/_form-validation.js',
    'js/page/_global.js',
    'js/library/_ga_event_tracking.js',
    'js/library/_postcode-anywhere.js',
    'js/library/_count-down-timer.js',
    'js/page/_home-page.js',
    'js/page/_main_navigation.js',
    'js/page/_myaccount.js',
];

//Array of all the JS files to compile for scripts-external.min.js
var externalJs = [
    'js/external/_bootstrap.min.js',
    'js/external/_bootstrap-select.js',
    'js/external/_bootbox.min.js',
    'js/external/_jquery.lazyload.js',
    'js/external/_jquery.bxslider.js',
];

//JS Task to check files for errors, compile and then minify
gulp.task('scripts', function() {
  return gulp.src(js)
      .pipe(eslint())
      .pipe(eslint.format())
      .pipe(concat('scripts.min.js'))
      .pipe(gulp.dest(outPutFolder + 'js'))
      .pipe(notify({ title:"scripts.min.js",message: "Successfully Compiled", onLast: true }))
      .on('end', function () { gutil.log('scripts.min.js compiled successfully!'); });
});

//JS Task to check files for errors, compile and then minify
gulp.task('scriptsExternal', function() {
  return gulp.src(externalJs)
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(concat('scripts-external.min.js'))
    .pipe(gulp.dest(outPutFolder + 'js'))
    .pipe(notify({ title: "scripts-external.min.js", message: "Successfully Compiled", onLast: true }))
    .on('end', function () { gutil.log('scripts-external.min.js compiled successfully!'); });
});

score 0 · Accepted Answer · edited May 23 '17 at 12:22

Variant 1:

A gulpfile is pure JavaScript, so you can use a function. But you must return the filestream if you are using this task in a sequence. Try this:

var outPutFolder = '../';

//Array of all the JS files to compile for scripts.min.js
var js = [ … ];

//Array of all the JS files to compile for scripts-external.min.js
var externalJs = [ … ];

function doStuff(in, out) {
  return gulp.src(in)
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(concat(out))
    .pipe(gulp.dest(outPutFolder + 'js'))
    .pipe(notify({ title: out,message: "Successfully Compiled", onLast: true }))
    .on('end', function () { gutil.log(out + ' compiled successfully!'); });
}

//JS Task to check files for errors, compile and then minify
gulp.task('scripts', function() {
  return doStuff(js, 'scripts.min.js');
});

//JS Task to check files for errors, compile and then minify
gulp.task('scriptsExternal', function() {
  return doStuff(externalJs, 'scripts-external.min.js');
});

Variant 2:

Or you can trigger this by using of environment variables:

var outPutFolder = '../';

//Array of all the JS files to compile for scripts.min.js
var js = [ … ];

//Array of all the JS files to compile for scripts-external.min.js
var externalJs = [ … ];

var in = gutil.env.external ? externalJs : js;
var out = gutil.env.external ? 'scripts-external.min.js' : 'scripts.min.js';

//JS Task to check files for errors, compile and then minify
gulp.task('scripts', function() {
  return gulp.src(in)
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(concat(out))
    .pipe(gulp.dest(outPutFolder + 'js'))
    .pipe(notify({ title: out,message: "Successfully Compiled", onLast: true }))
    .on('end', function () { gutil.log('scripts.min.js compiled successfully!'); });
});

And run the task with

gulp scripts --external

Gulp pass in files to process

1 Answers1