Gulp with full stack Node.js for CI/CD – Part 1

In some posts I have written about Continuous Integration and Continuous Delivery. For that adventure, we decided to go all out and really look into how a professional tool would work for an enterprise. We even singled out Atlassian Bamboo to try. We looked at its features and how to use it. In this post, we are going to step away from these feature rich tools and see what we can do on our own with something extremely light weight. The simplest way to “automate”, would be to create some scripts to run. It will be like switching from driving a Tesla, to driving around in a little MINI Cooper. One car has a whole lot of instrumentation on its dashboard along with incredible acceleration. But in the end, both cars take you to your destination.

Let’s step back and imagine that we have no CI/CD or deployment tools at all. If we walk through the process, step by step, or manually typing in command at a command prompt, we will then know what it is we need to script. Keep a file where you copy each commands you run in order to build locally, test locally, deploy to staging, run staging tests and then deploy to production. We will not be using a traditional shell script, but will take those commands and implement them in more of a build framework tool that is conceptually just like setting up a series of commands in a script. The framework we will use is called Gulp.

Introducing Gulp

As was stated, Gulp is really just a glorified mechanism to run commands like you would in a shell script! It just happens to do that in a way that is a step above your normal scripting language.

Gulp very similar to Node.js, so I classify it as a framework. I might as well state that a bit stronger. Gulp is actually more than just similar to Node, it is actually built on top of Node. Gulp however takes a more limited view of what you would want to write as an application. Whereas Node.js was conceived as a way of creating backend web server, Gulp was designed specifically for the purpose of performing build type tasks.

You don’t use Gulp by launching Node. Gulp has its own script command file that you run and it launches Node from there.

Gulp then has two parts to it that you need to install – the CLI and the module. Both are installed using npm. As with Node, Gulp modules are exposed in a JavaScript file buy using a require() statement. The main module that Gulp exposes is an object that has four functions. You launch Gulp and give is a JavaScript file that makes use of the four functions.

The main function that you would be using is the task() function. Just like with Node, Gulp allows other modules to be brought in that then give it tons of functionality. These Gulp add-on modules are specifically made for gulp. For example, as Node can make use of the “mocha” module, Gulp has an equivalent module named “gulp-mocha”. Gulp documentation refers to these modules as “plugins”.

Note: In case you have not heard, there is also something called Grunt that is a tool very similar in purpose to Grunt. It would be a fine choice to use also. Grunt took the approach of using configuration files, instead of allowing coding files like Gulp did. I like to have the convenience of the code flow logic that Gulp gives you. For the Node.js JavaScript developer, I am just saying that Gulp feels more comfortable.

Getting set up

Let’s get started. Go to your project directory and do these npm installs:
npm install –global gulp-cli
npm install –save-dev gulp

Now create a file named gulpfile.js in the root folder of your application and place this in it:

var gulp = require('gulp');

gulp.task('hello-gulp', function(){
console.log('hello gulp');
});

At the command prompt in the directory where gulpfile.js is, you can run your task as follows:

gulp hello-gulp

You can see from the code above that it looks like your typical Node code. You include modules at the top and then use them. The module that Gulp is based on is ‘gulp’. The task() function you see here is the one we use over and over to expose individual tasks to be executed. You don’t write really long monstrous tasks, but take the approach of making smaller ones that you can piece together. The first parameter to task() is the name you want to identify that task by. Each task can be run individually from the command line by specifying its name as we did.

Gulp tasks can really be anything, such as executing any command your computer could normally run at a command prompt. In this way, you can use Gulp for your build purposes and do things like run lint, bundle files together, minify code, run tests and even interact with your source code control system. This makes it a great tool to carry out all of your CI/CD tasks.

The Four Gulp Functions

Here is some code that now shows all four of the Gulp functions at once and also adds more of the syntax available with the task() function. You can run this series of tasks from the command line by typing “gulp one”.

var gulp = require('gulp');
var concat = require('gulp-concat');

gulp.task('jsconcat', function() {
return gulp.src('./src/js/*.js')
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/js/'))
});

gulp.task('two', ['jsconcat'], function(cb){
setTimeout(function () {
console.log('hello from two');
cb()
}, 3000);
});

gulp.task('one', ['two'], function(){
console.log('hello from one');
});

gulp.watch('./src/js/*.js ', ['jsconcat']);

The src() function is a way to specify files that you want gulp to read in and then do some processing on. This could be a single file, or multiple files that meet some matching criteria on their name and location.

Here is also where another concept of Gulp comes in. Gulp implements the Stream interface of Node.js and thus, you can take the results from the src() function and use the pipe() function to stream the results for further processing. This in turn can be piped into yet another stage of processing.

Thus, we have the src() function collecting all of the JavaScript files and then piping that into function that does a concat() that concatenates all the files into one file and names it app.js. That result then gets piped again and makes use of another Gulp function called dest() that deposits the file in a directory.

Notice the task named ‘two’. This has the added syntax of the task() function that specifies a prerequisite task. You name the function and then follow it by one or more tasks that tells Gulp to run those in that order before running this one. You can add in an optional cb() function (stands for call back) that you call to tell Gulp that this particular function has completed and the next one can run. In the example we have a timer that goes off and inside that we would need to notify Gulp that we are ready to proceed. If you run the task named “one” you will get the following output:

C:\code>gulp one
[15:58:35] Using gulpfile C:\code\gulpfile.js
[15:58:35] Starting ‘jsconcat’…
[15:58:35] Finished ‘jsconcat’ after 30 ms
[15:58:35] Starting ‘two’…
hello from two
[15:58:38] Finished ‘two’ after 3 s
[15:58:38] Starting ‘one’…
hello from one
[15:58:38] Finished ‘one’ after 2.19 ms

You can pick any single task to execute if you like. You could have, for example, run the following:

Gulp jsconcat

The watch() function keeps gulp running indefinitely and watches for file changes an dthen runs the specified task. Thus, if any files change, we run the ‘jsconcat’ task. This will run indefinitely until you stop the gulp process.

Gulp with full stack Node.js for CI/CD – Part 2 (running Mocha tests)

About Bushman

Living a purposeful life.
This entry was posted in Uncategorized and tagged , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s