Creating a Gulp plugin using npm

Thinking about creating a private node module containing a Gulp plugin and finding it too tough to achieve? Here’s how I created one 

Creating a node module:

  • I have created a node module named: ‘gulp-package-docs’ since, this Gulp plugin was needed with many other projects. Its a good practice to prefix the plugin name with ‘gulp’.
  • As per the Npm doc, one could also use a local node module & add it to their project’s package.json (i.e in offline mode) without even hitting the server.
  • I used a scaffolding tool to generate the boilerplate code for my Gulp plugin module: A Yeoman generator for gulp plugins. This was quite a help since, it interactively generated the must have files for my plugin. Eg. index.js, package.json, test.js, etc.
  • I now was able to use the node module as a node dependency from my project and started looking forward to using it. Below is the snippet for Gulp plugin:
   module.exports = {
           deployDocs: function(options) {
              return gulp.src(srcFilePath) 
              .pipe(gulp.dest(destFilePath));
          }
   }

This code was placed in my node module’s index.js file.

I named the plugin module as:

{
"name": "gulp-package-docs",
"version": "0.0.0"
}

in the module’s package.json

This is the name that will be passed as an argument to require() in my Gulp task.

Installing Gulp:

Gulp is a task runner like Grunt, it is much simpler to use since it uses the concept of Vinyl files and pipes the output of one task to other thus creating a chain of tasks.

Gulp plugin can be installed using:

npm install --save-dev gulp-plugin-name

This will install all your plugin dependencies and save it in your ‘package.json’ file.

Writing and using the Gulp plugin:

1. Now, I had to write a Gulpfile.js for specifying a task which will require the Gulp module and call the functions exported by it.

2. Simple 3 liner Gulp task:

var gulp = require('gulp');
var utils = require('gulp-util');
var deployer = require('gulp-package-docs');
gulp.task('package-docs', function() {
  deployer.deployDocs();
});

As you can see, I required ‘gulp’ and ‘gulp-utills’ node modules hence, specified the node dependencies in the project specific ‘package.json’ file in the following section:

"devDependencies": {
    "gulp": "^3.9.0",
    "gulp-util": "^3.0.7",
    "gulp-package-docs": "git@bitbucket.org:xxx/gulp-package-docs.git#0.0.1"
}

of course along with the other project specific dependencies.

3. The Gulpfile was placed at a location which I browsed from the terminal and ran the task:

$ gulp package-docs, that’s it. This performed the gulp task it was programmed to.

About CauseCode: We are a technology company specializing in Healthtech related Web and Mobile application development. We collaborate with passionate companies looking to change health and wellness tech for good. If you are a startup, enterprise or generally interested in digital health, we would love to hear from you! Let's connect at bootstrap@causecode.com

Leave a Reply

Your email address will not be published. Required fields are marked *

STAY UPDATED!

Do you want to get articles like these in your inbox?

Email *

Interested groups *
Healthtech
Business
Technical articles

Archives