Use Gulp in NodeJS application

Gulp JS is Javascript based task runner. There are other task runners also written in Javascript like Grunt. My current personal favorite is Gulp.

Gulp JS can be configured and use with Text Editor and make that text editor work as a powerful IDE.

I normally use Sublime Text 3 and Atom as my IDEs.Latter became my favorite recently with Nuclide.

For example, if you use the following command to start your ExpressJS app,

node index.js

You may notice that if the app throws the error your node process app will get crashed. Later If you modified the code of running app it won’t be reflected until you restart the process (kill the process and start again). So to overcome this scenario I have use gulp and nodemon as a solution.

Let’s start from the beginning.

If you have initialized your project with npm move to next step. Otherwise, type following on your terminal.(Don’t forget, on your working directory!).

npm init

Enter your project details and this will create a package.json for you.

Let install dependencies for the demo express application.

npm i -S express

Let create an index.js to serve ‘Welcome to Demo API’ to index route.

// Author : Chathu Vishwajith
// Licence : MIT License
// http://opensource.org/licenses/MIT

'use strict';

const express = require('express');

const app = express();

app.get('/', function(req, res) {
  res.send('Welcome to Demo API');
});

app.set('port', process.env.PORT || 9090);
app.set('ip', process.env.NODEJS_IP || '127.0.0.1');

app.listen(app.get('port'), function() {
  console.log('%s: Node server started on %s ...', Date(Date.now()), app.get('port'));
});

Setting up Gulp

Now It’s time to setup Gulp. We will install these dependencies as dev dependencies.

npm i -D gulp gulp-nodemon

Apart from that you need to install gulp globally

npm i -g gulp-cli

Let’s create a file called gulpfile.js for configure Gulp

// Author : Chathu Vishwajith
// Licence : MIT License
// http://opensource.org/licenses/MIT

'use strict';

const gulp = require('gulp');
const nodemon = require('gulp-nodemon');

gulp.task('serve', function() {
  nodemon({
    script: 'index.js',
    ext: 'js',
    env: {
      NODE_ENV: 'dev',
      PORT: 9080
    },
    ignore: ['./node_modules/**']
  });
});

I have set starting script to index.js in script object.

We can set your environment variables which are needed for application in env object. I have set ext to js. So it only listens to js file changes in the project. If you have other files like CSS and HTML please update the ext variable accordingly.

I have added node_modules folder to ignore.

So this is the small tutorial of using gulp in your workflow. If you have any update to add to this please be kind enough leave a comment or a tweet.

---

Note:

I drafted this blog post end of 2016 and recently I saw it in my drafts and updated it to support new versions.It seems I didn’t update my blog in a long time. I’m now working on a cool project and will give more articles of my recent experiences.

By the way, there is cool a Hexo plugin done by me, called Tweetable quotes. Please have look on it if you blogging using Hexo. I will write an article about this soon.