DevOps Friday: Debugging Gulp tasks

You may wonder, how Gulp tasks runner is related to DevOps? Well, the relation is direct. You may work on the Node application deployment that uses this framework. For such cases, you need to know whether the issue you face is related to deployment or development process. This topic is grounded on the issue I faced with the app deployment recently. We heavily use build agents and our build servers they installed on, so the issue could be roughly anything (more about Build agents in my previous topic).

The detailed error message you see doesn't make any sense:

events.js:183
      throw er; // Unhandled 'error' event
      ^
Error
    at new JS_Parse_Error (eval at <anonymous> (C:\Projects_Source\FE\myabilities\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:1534:18)
    at js_error (eval at <anonymous> (C:\Projects_Source\FE\myabilities\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:1542:11)
    at croak (eval at <anonymous> (C:\Projects_Source\FE\myabilities\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2089:9)
    at token_error (eval at <anonymous> (C:\Projects_Source\FE\myabilities\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2097:9)
    at unexpected (eval at <anonymous> (C:\Projects_Source\FE\myabilities\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2103:9)

The error I had looked as follows (Gulp failed with error: C:\Program Files\nodejs\node.exe failed with return code: 1):

Well, one thing is certain, Gulp is ‘choking’ with some file and can’t properly process it.

How’d you figure in this mess what’s going on? Is it something wrong with your build environment or the code? Let’s dig a bit deeper. There are three options you can enable debugging for Gulp file:

1. Install Gulp-util

Import the Gulp-util by using the following statement: var gutil = require('gulp-util');

Finally, when you are uglifying the code, attach the error handler like this: .pipe(uglify().on('error', gutil.log))

(Note: Gulp-util is normally already installed in node_modules)

2. Use 'streamcombiner' module for the same purposes (to see the full stack trace for the error):

var combiner = require('stream-combiner2')
// minify JS
gulp.task('minify-js', function() {
  return combiner.obj([
  gulp.src("js/*.js"),
    uglify(),
    gulp.dest("./_build/")])
    .on('error', console.error.bind(console));
})

3. And finally my favourite ‘lazy’ option. Install 'UglifyJs' globally, so it's available in the command line:

npm install uglify-js -g

Verify the scripts:

uglifyjs ./app/*.js

After that the error has become evident:

It seems that in this case, Gulp doesn't accept an 'Arrow function' (=>) as it belongs to ES6 (ECMAScript ver. 6). 

You have to either: 

• Stick to ES5 in your code (i.e. replace it by a traditional function). More about these functions here: http://exploringjs.com/es6/ch_arrow-functions.html
• Use babel to 'babelify' the code. More about it here: https://github.com/babel/babelify

After the changes, the build has succeeded.

In my opinion, this is one of the good examples of how Dev and Ops work together on the issue resolution for the sake of the same goal.

Related:

Install VSTS build/release agent on Linux

Deploying the Node.js application to Azure in several simple steps (coming soon).