Pass Parameter to Gulp Task

Question

Normally we can run gulp task from console via something like gulp mytask  Is there anyway that I can pass in parameter to gulp task  If possible  please show example how it can be done

User · Answer

It s a feature programs cannot stay without  You can try yargs   npm install --save-dev yargs   You can use it like this   gulp mytask --production --test 1234   In the code  for example   var argv   require  yargs   argv  var isProduction    argv production     undefined    false   true    For your understanding    gt  gulp watch console log argv production     undefined     lt -- true console log argv test     undefined           lt -- true   gt  gulp watch --production console log argv production     undefined     lt -- false console log argv production                   lt -- true console log argv test     undefined           lt -- true console log argv test                         lt -- undefined   gt  gulp watch --production --test 1234 console log argv production     undefined     lt -- false console log argv production                   lt -- true console log argv test     undefined           lt -- false console log argv test                         lt -- 1234   Hope you can take it from here   There s another plugin that you can use  minimist  There s another post where there s good examples for both yargs and minimist    Is it possible to pass a flag to Gulp to have it run tasks in different ways

User · Answer

I know I am late to answer this question but I would like to add something to answer of  Ethan  the highest voted and accepted answer    We can use yargs to get the command line parameter and with that we can also add our own alias for some parameters like follow   var args   require  yargs        alias  r    release        alias  d    develop        default  release   false       argv    Kindly refer this link for more details  https   github com yargs yargs blob HEAD docs api md   Following is use of alias as per given in documentation of yargs  We can also find more yargs function there and can make the command line passing experience even better       alias key  alias       Set key names as equivalent such that updates to a key will propagate   to aliases and vice-versa       Optionally  alias   can take an object that maps keys to aliases  Each   key of this object should be the canonical version of the option  and   each value should be a string or an array of strings

User · Answer

Passing a parameter to gulp can mean a few things    From the command line to the gulpfile  already exemplified here   From the main body of the gulpfile js script to gulp tasks  From one gulp task to another gulp task      Here s an approach of passing parameters from the main gulpfile to a gulp task  By moving the task that needs the parameter to it s own module and wrapping it in a function  so a parameter can be passed            gulp-tasks my-neat-task js file module exports   function opts      opts gulp task  my-neat-task   function          console log   the value is     opts value                    main gulpfile js file       do some work to figure out a value called val    var val    some value      pass that value as a parameter to the  my-neat-task  gulp task require    gulp-tasks my-neat-task js     gulp  gulp  value  val      This can come in handy if you have a lot of gulp tasks and want to pass them some handy environmental configs  I m not sure if it can work between one task and another

User · Answer

Just load it into a new object on process    process gulp      and have the task look there

User · Answer

If you want to use environment params and other utils as well such as log  you can use gulp-util         npm install gulp-util --save-dev    gulp --varName 123    var util   require  gulp-util    util log util env varName     Update  gulp-util is now deprecated  You can use minimist instead   var argv   require  minimist   process argv slice 2    console dir argv

User · Answer

Here is my sample how I use it  For the css less task  Can be applied for all   var cssTask   function  options      var minifyCSS   require  gulp-minify-css        less   require  gulp-less        src   cssDependencies     src push codePath         less       var run   function          var start   Date now         console log  Start building CSS LESS bundle         gulp src src         pipe gulpif options devBuild  plumber           errorHandler  onError                   pipe concat  main css           pipe less           pipe gulpif options minify  minifyCSS            pipe gulp dest buildPath    css           pipe gulpif options devBuild  browserSync reload  stream true            pipe notify function              console log  END CSS LESS built in      Date now   - start     ms                       run       if  options watch        gulp watch src  run           gulp task  dev   function        var options         devBuild  true      minify  false      watch  false         cssTask  options

User · Answer

There is certainly a shorter notation  but that was my approach  gulp task  check env   function        return new Promise function  resolve  reject           gulp --dev     var env   process argv 3   isDev      if  env          if  env     quot --dev quot             log info  quot Dev Mode on quot            isDev   true          else           log info  quot Dev Mode off quot            isDev   false                else         if  variables settings isDev    true            isDev   true          else           isDev   false                    resolve               If you want to set the env based to the actual Git branch  master develop   gulp task  set env   function  cb      exec  git rev-parse --abbrev-ref HEAD   function  err  stdout  stderr        git  branch   stdout replace    r n  n  r  gm   quot  quot        if  git  branch     quot develop quot           log info  quot  Develop Branch quot          isCompressing   false        else if  git  branch     quot master quot           log info  quot Master Branch quot          isCompressing   true        else           TODO  check for feature-  branch       log warn  quot Unknown  quot    git  branch    quot   maybe feat  quot            isCompressing   variables settings isCompressing            log info stderr       cb err           return      P s  For the log I added the following    var log   require  fancy-log     In Case you need it  thats my default Task  gulp task  default     gulp series  set env   gulp parallel  build scss    minify js    minify ts    minify html    browser sync func    watch        function                Suggestions for optimization are welcome

User · Answer

Ethan s answer would completely work   From my experience  the more node way is to use environment variables   It s a standard way to configure programs deployed on hosting platforms  e g  Heroku or Dokku    To pass the parameter from the command line  do it like this   Development  gulp dev   Production  NODE ENV production gulp dev  The syntax is different  but very Unix  and it s compatible with Heroku  Dokku  etc   You can access the variable in your code at process env NODE ENV  MYAPP something else gulp dev  would set  process env MYAPP      something else   This answer might give you some other ideas

User · Answer

There s an official gulp recipe for this using minimist   https   github com gulpjs gulp blob master docs recipes pass-arguments-from-cli md  The basics are using minimist to separate the cli arguments and combine them with known options   var options   minimist process argv slice 2   knownOptions     Which would parse something like    gulp scripts --env development   More complete info in the recipe

User · Answer

If you use gulp with yargs  notice the following    If you have a task  customer  and wan t to use yargs build in Parameter checking for required commands     command  customer  lt place gt   language    Create a customer directory   call it with   gulp customer --customer Bob --place Chicago --language english   yargs will allway throw an error  that there are not enough commands was assigned to the call  even if you have           Give it a try and add only a digit to the command  to make it not equal to the gulp-task name     and it will work    command  customer1  lt place gt   language    Create a customer directory    This is cause of gulp seems to trigger the task  before yargs is able to check for this required Parameter  It cost me surveral hours to figure this out    Hope this helps you

User · Answer

If you want to avoid adding extra dependencies  I found node s process argv to be useful   gulp task  mytask   function         console log process argv         So the following   gulp mytask --option 123   should display      node    path to gulp js    mytask    --option    123     If you are sure that the desired parameter is in the right position  then the flags aren t needed    Just use  in this case    var option   process argv 4     set to  123    BUT  as the option may not be set  or may be in a different position  I feel that a better idea would be something like   var option  i   process argv indexOf  --option    if i gt -1        option   process argv i 1       That way  you can handle variations in multiple options  like     task should still find  option  variable in all cases gulp mytask --newoption somestuff --option 123 gulp mytask --option 123 --newoption somestuff gulp mytask --flag --option 123      Edit  true for node scripts  but gulp interprets anything without a leading  --  as another task name  So using gulp mytask 123 will fail because gulp can t find a task called  123

User · Answer

Here is another way without extra modules   I needed to guess the environment from the task name  I have a  dev  task and a  prod  task   When I run gulp prod it should be set to prod environment  When I run gulp dev or anything else it should be set to dev environment   For that I just check the running task name   devEnv   process argv process argv length-1       prod

[gulp] Pass Parameter to Gulp Task

Examples related to gulp