← Previous

Gulp is such an amazing workflow tool, it can automate aspects of the most complex workflows so you can focus more on programming your project and less on managing it. It called “The streaming build system” by its developers. Is has similar capabilities as Grunt, however, for anyone who uses Grunt currently, I strongly suggest looking into making the switch. But that is another discussion.

Gulp is written using the node.js framework and its managed by the powerful node package manager (npm). For those who are not familiar with node.js, in a nutshell I like to think of it as server side, real time, javascript. Although that description alone is not enough to fully quantify all that its capable of.

What this means is when your developing your Gulp-based work flow, you have not just the thousands of Gulp plugins available, but you can also leverage the power of the thousands of plugins available for node.js through npm.

Every now and then, however, you need a capability that isn’t available in either of these repositories. For me, I wanted a simple command line tool that allows me to change the semantic version in my cordova projects. I saw that there were plugins that did this for gulp and node.js files but I couldn’t find this capability for cordova projects.

So it was time to write my new gulp plugin, where to start?

Well it turns out writing a gulp plugin is the same as writing a node.js plugin and its extremely easy and fast.

There are only two requirements for the simplest node.js plugin. This includes an index.js file that contains an module.exports function and a package.json file that provides metadata for the plugin.

Module.exports takes the following form:

module.exports = function() {
	//do something
}

And that’s it! Now create a package.json file and add this at the minimum:

{
  "name": "gulp-my-plugin",
  "version": "1.0.1",
  "description": "The thing that my plugin does",
  "main": "index.js"
}

Place these two files in in a folder called “gulp-my-plugin” and then place that folder in the node_modules that is in your project. (if its not in your project then create it)

Lastly go into your gulpfile.js and add the line.

var myplugin = require(‘gulp-my-plugin’);

Now you can call your plugin function anywhere in your gulp file using:

myplugin(); //this call the function that was assigned to module.exports

Yay! We just created our first gulp plugin. Pat yourself on the back. As long as those components are present. You can make your plugin as simple or complex as you need.

However in my case I wanted to call my plugin from within a gulp task. A gulp task is a named task that can be called from the command prompt as

$ gulp your-task-name

gulp tasks are defined in gulpfile.js and take the form

gulp.task(‘your-task-name’, function() {
	//do something
});

They are very useful and can be used to create very quick workflow based command line utilities.
To my knowledge however, you can not define a task from inside a plugin. If you can, then please tell me because I have tried everything.

Traditionally you can call your plugin through a task by using

var myplugin = require(‘gulp-my-plugin’);
gulp.task(‘your-task-name’, function() {
	myplugin();
});

However, I like to write as minimum of code as possible and I discovered that this form accomplishes the same thing in a single line in gulpfile.js:

gulp.task(‘your-task-name’, require(‘gulp-my-plugin’)());

Go ahead, test it out. You can now call your plugin from the command line:

$ gulp your-task-name