Debug mode in gulp

I’ve been using gulp a lot lately (as you can see from my posts).

To the uninitiated, gulp is the hottest, sleekest and newest build system in town. Which I’m in love with and use almost everywhere now. Yup, it’s that awesome.

However, I had been having troubles with debugging while using gulp. It’s not exactly easy to debug one-line CSS or mangled JS now, is it?

So I came up with a solution, creating a switch variable and a new task, debug.

The debug variable

Everything will be controlled by a single variable, which I call debug. Set debug to be false at the start of your gulpfile.js.

var debug = false;  

In the default task, write a line:

gulp.task('default', function() {  
  debug = debug || false;

Why? So we can easily switch the variable from other tasks, and this change is passed to the default task.

The debug task

We need to now create a task that achieves three things:

  1. Sets debug to be true.
  2. Logs that gulp is running on ‘debug mode’.
  3. Set easy-debugging configuration options in all tasks.
gulp.task('debug', function() {  
  debug = true;
  gutil.log('RUNNING IN DEBUG MODE') );

That’s my debug task. Here, gutil = require(gulp-util);. This logs a helpful message, and switches the debug variable to be true.

We can now use this information to make debug changes in our existing tasks.

Debug configuration in tasks

I’ve added a simple variable at the top of each task – uglyLevel. Depending on the task, uglyLevel can be true/false, or ‘compress’/’expanded’. The values are toggled using a simple ternary operator.

    var uglyLevel = debug ? true : false;

Then, these are passed on as values depending on the plugin. For example, with gulp-jade, uglyLevel must be a boolean value and will be used like so:

.pipe( p.jade({ pretty: uglyLevel }) )

gulp-uglify is similar:

.pipe( p.uglify({ compress: uglyLevel }) )

However, for gulp-stylus, uglyLevel is either ‘compress’ or ‘expanded’.

var uglyLevel = debug ? 'expanded' : 'compress';

gulp.src( src )  
  .pipe( p.stylus({ set: [uglyLevel] }) )

You can also try toggling sourcemaps if you’re using SASS, unfortunately the option isn’t available in Stylus yet. Many different ways to solve the same problem.


Simply run gulp debug in the command line instead of gulp. Done! Since debug task runs the default task, all additonal tasks like watch or connect will run automatically.

And there you have it, an easy and quick debug method for gulp.

Discuss on Twitter

Checkout git branches through your browser

Most git workflows involve use of multiple branches for different sub-tasks, example, a new branch for an alternative layout for the homepage. However, managing braches on the server quicky gets tedious – SSHing in, navigation to the correct directory, then running git checkout <branch> – is tiring for all, right?.

That’s why I came up with a simple solution that used PHP and GET requests to checkout different branches on the server through the browser.

The Concept

What we’re trying to achieve here is:

  1. An easy way to pass a branch name to a script.
  2. That script uses that branch name to run a checkout in the correct directory.
  3. The output of the command is presented to us, to tell if it ran correctly or not.

Doing this with a small, but powerful, PHP script is our challenge.

The Code

GET Request

We’ll be passing variables as GET requests, because:

  1. It’s easy.
  2. It’s lazy.

So just make a variable holding the GET variable in your PHP

$branchname = $_GET['branch'];

We’ll also need to check if the user has actually supplied a request, if not, echo a helpful message and stop the script from executing further.

if (!$branchname) {  
  echo "Please enter a branchname, ?branch=<name>";
  return false;

Executing the command

We need to cd into the correct directory and run git checkout $branchname. We do that using shell_exec().

$command = 'cd <directory> && git checkout ' . $branchname;
$output = shell_exec($command . ' 2>&1');

You might not need to change directory, so feel free to remove cd <directory>. The rest is essential. 2>&1 directs stderr to stdout (Or put simply, outputs the result of the command).

Printing the output would be extremely helpful as well:

echo 'Checking out ' . $branchname . '&hellip;<br>';  
echo $output . '<br>';  

And we’re done. Upload it to your server with a filename like checkout-git-branch.php, and try it out!

Final code


$branchname = $_GET['branch'];

if (!$branchname) {  
  echo "Please enter a branchname, ?branch=<name>";
  return false;

$command = 'cd <directory> && git checkout ' . $branchname;
$output = shell_exec($command . ' 2>&1');

echo 'Checking out ' . $branchname . '&hellip;<br>';  
echo $output . '<br>';  

Discuss on Twitter