Injecting options into your Gulp tasks

This is a quick techie post for adding some extra utility to your Grunt or Gulp tasks. Like most javascript, or any code in fact, DRY code is good code. So when it came to writing out SASS compile, watch and serve tasks for multiple projects that used a similar structure, it made a lot more sense to write as abstractly as possible.

Now if I have 3 projects and I’m just watching every scss file in the entire repo, things are going to get pretty slow, not to mention all the memory usage and disk writes. So my solution was to inject a parameter into my Gulp task so that I have a choice of running the task for a specific project.

This injection is part of Node.js and not Gulp, so it will work on your Grunt tasks too, though my code example is a Gulp task going forward. Now if you’re a Node.js developer you probably already know how to do this so you’re not going get much value from here on out, but if you’re not, here is the magic argument:

process.argv;

This will return an array of EVERYTHING you typed into your command line broken by the space character. Meaning that if you append options after your task call, you can use it to affect the task. Logging process.argv to console might reveal:

$,gulp,styles,--myOption

So like in my example, I want to compile SASS files for a particular project I can use:

$ gulp style --project-two

Now in my gulpfile.js I can target the third array block to get my passed in option process.argv[3]. Then use the passed in parameter as a key to set a bunch of variables. In my case the pathways to that specific project folder, so first create those objects:

var projectOne = {
    projectName: ”My Project One”,
    sassFiles: “path/to/sass/**/*.scss”,
    cssFolder:”path/to/css”,
    autoprefixerConfig: ”latest 4 version”
};
var projectTwo = {
  projectName: ”My Project Two”,
  sassFiles: “path/to/sass/**/*.scss”,
  cssFolder:”path/to/css”,
  autoprefixerConfig: ”latest 4 version”
};
var currentProjectVars;

Then in the style task set the dynamic variable (currentProjectVars) to one of the static ones depending on the options entered in:

gulp.task(‘style’, function() {
  switch(process.argv[3]) {
  case “--project-one”: currentProjectVars = projectOne;
  break;
  case “--project-two”: currentProjectVars = projectTwo;
  break;
  default: console.log(“Please specify a project by appending --[PROJECT NAME]”);
};

return sass(currentProjectVars.sassFiles, { style: ‘expanded’ })
  .pipe(autoprefixer({browsers:[currentProjectVars.autoprefixerConfig]}))
  .pipe(gulp.dest(‘currentProjectVars.cssFolder’))
  .pipe(notify({ message: ‘Sass generated for’+ currentProjectVars.projectName }));
});

Now apply the same logic across the multiple tasks you have or better yet register a task to handle it specifically and get the options globally for the session. You can even take it a step further by customizing your own compiles to output to a specific directory or piping though a specific chain, one for development and another for production.

As the internet has taught me, there are probably better, more efficient ways to do this. But this method does work and is easy enough to implement for anyone who is familiar with javascript but does not have a background in computer science.