Gulp: How to use gulp tasks with parameters

Created on 1 Sep 2015  路  10Comments  路  Source: gulpjs/gulp

I want to accomplish something simple using gulp. I want to write a generic method to move files to an output directory from a particular source directory.

pretend we have something like so

var args = require('yargs');
function transform-move-jsx-Development() 
{
  gulp.src(config.sourceJSX)
  .pipe(react, browserify, etc....)
  .pipe(gulp.dest(config.output_development));
};

function transform-move-jsx-Production() 
{
  gulp.src(config.sourceJSX)
  .pipe(react, browserify, etc....)
  .pipe(gulp.dest(config.output_production));
};

gulp.task('transform-move-jsx-Development', transform-move-jsx-Development);
gulp.task('transform-move-jsx-Production', transform-move-jsx-Production);

gulp.task('prod', [transform-move-jsx-Production]);
gulp.task('dev', ['transform-move-jsx-Development']);

The two tasks: transform-move-jsx-Production and transform-move-jsx-Development are identical except for the output directory. I want to make it more DRY (Don't Repeat Yourself). I should be able to make a single method that can use a yarg parameter or something right? In this next example I pretend I can pass the path as an arg

So I try something like this using yargs

var args = require('yargs');

function transform-move-jsx() 
{ 
    return gulp.src(config.sourceJSX)
    .pipe(gulp.dest(args.outputDirectory));
};

gulp.task('dev', ['transform-move-jsx']);

However this now requires me to add arguments to the gulp call at the command line

gulp dev --"path to output, etc."

That is obviously less maintainable as we call more and more gulp tasks from inside of the dev gulp task. And would be messy anyways as we shouldn't need to know an implementation detail like what the output directory structure is when we run gulp dev

I could instead do something like this:

function transform-move-jsx(destination) 
{ 
    return gulp.src(config.sourceJSX)
    .pipe(gulp.dest(destination));
};

function transform-move-jsx-Development() 
{
    transform-move-jsx("./output/development/");
};

function transform-move-jsx-Production() 
{
    transform-move-jsx("./output/production/");
};

gulp.task('transform-move-jsx-Development',transform-move-jsx-Development);
gulp.task('transform-move-jsx-Production', transform-move-jsx-Production);

gulp.task('prod',  transform-move-jsx-Production);
gulp.task('dev',  transform-move-jsx-Development);

This seems better in that it is more flexible, however now my gulpfile is littered with several unnecessary functions.

Is there a better way ?

All 10 comments

Why would you want to do that? It's shorter with the tiny example you specified, but a lot trickier with more complicated tasks

DRY (Don't Repeat Yourself)

In the above example, I would need to copy and paste move-transform-x-x functions every time I had a new file type I wanted to move.

Unless you're running the same tasks on your HTML and JS (which would be weird), you're not.

function move(src, dest) {
  gulp.src(src)
  .pipe(gulp.dest(dest));
}
function moveViews() 
{
  move(config.sourceHtml, output_development);
};

function moveJs() 
{
  move(config.sourceJs, output_development);
};

gulp.task('move-views', moveViews);
gulp.task('move-js', moveJs);

Really wouldn't recommend it though, it's not that much DRYer and will fall apart with more complicated examples.

Just use yargs

You can't do that. Call yargs inside the task

:confused:

var argv = require('yargs').argv;

function move(src, dest) {
  console.log(argv.ships);
  gulp.src(src)
  .pipe(gulp.dest(dest));
}
function moveViews() 
{
  console.log(argv.source);
  move(config.sourceHtml, output_development);
};

function moveJs() 
{
  move(config.sourceJs, output_development);
};

gulp.task('move-views', moveViews);
gulp.task('move-js', moveJs);

I think we are still missing each other. please reread my now heavily edited question

Please direct support questions to Stack Overflow. Thank you.

Was this page helpful?
0 / 5 - 0 ratings