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( gutil.colors.green('RUNNING IN DEBUG MODE') );
  gulp.start('default');
});

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.

Usage

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

Super simple static server in gulp

I recently spent a lot of time looking for a decent way to:

  1. Set up livereload on gulp
  2. Set up a static server.

Here are my findings.

First, I tried using gulp-livereload and gulp-embedlr. Using them together was decent and they were pretty fast, however, they were too complex for my simple goal.

Everything changed when the fire nation attacked once I stumbled upon gulp-connect.

Using gulp-connect

This plugin is extremely simple to use, I set up a server in literally 5 lines of code:

gulp.task('connect', p.connect.server({  
  root: ['_public'],
  port: 4242,
  livereload: true
}));

Yup, that’s it!
(p.connect = require('gulp-connect'), btw).

Live Reload

Now, to actually reaload the page on changes to tasks, we need to pipe p.connect.reload() on each task.

I’ve found that piping it after gulp.dest() is the fastest, so add

  .pipe( gulp.dest( dest ) )
  .pipe( p.connect.reload() );

At the end of each task.
(Where dest refers to the destination path).

Proper watching

I include all ‘partials’ in a subfolder, and all files that are to be compiled in the root folder.

e.g., Jade’s partials/templates go into folders jade/layouts or jade/partials, while main that are to be compiled, like, index.jade or about.jade go in the jade folder.

Therefore, I just run tasks on the root folders, not any of the subfolders.

This creates a problem with live reloading. It would only reload if any of the files from the root folder is changed, but not if the subfolder files are changed.

To fix this, here’s what I changed my watch task to:

gulp.task('watch', ['connect'], function() {  
  gulp.watch( `src/styl/*.styl`, `src/styl/**/*.styl`, ['styles'] );
  ...
});

This runs the styles task, compiles properly, and livereloads on every file changed.

Discuss on Twitter

Using gulp at MakeUseOf

At MakeUseOf, since the start of the new theme, we simply wrote plain ‘ol CSS and normal JS. No cool stuff like concatenation of compression or minification. Plain code, edited and uploaded through Filezilla.

Now we’ve moved on to a better workflow – Using gulp, Vagrant, git & Github. Here I’ll talk about how we set up and use gulp.

Setting up gulp

Setting up gulp was surprisingly extremely easy. I just ran these two commands:

$ npm init
$ npm install gulp -g
$ npm install gulp --save-dev

And gulp was ready to go. To avoid syncing useless stuff, I added node_modules to .gitignore (And James reminded me to add .sass-cache as well).

The Gulpfile

We have two main requirements for scripts and styles currently:

  • Processing, minifying, and prefixing SASS and Compass.
  • Minifying and using includes on JS.

Multiple plugins are used to achieve this:

I’ve set up three tasks for gulp (including the watch task).

Loading Plugins

As you can see above, I’m using gulp-load-plugins here. This adds a global object that has all the plugins, and so I don’t need to manually add each plugin on install.

var gulp = require("gulp");  
var p = require("gulp-load-plugins")();  

Plugins can then be accessed through p.pluginName(), like, p.minifyCss().

Paths

MakeUseOf is a large site and gulp’s installed in the wp-content folder. Managing paths can get ugly, easily, hence I’ve made an object, paths, which has file paths to all used locations.

Javascript resides in js/src and js/src/plugins folders, which is compiled to js, and SCSS is in styles folder, which is compiled to style.css (Since we use WordPress).

var paths = {  
  m2014: {
    scripts: {
      src: 'themes/makeuseof2014/js/src/*.js',
      dest: 'themes/makeuseof2014/js'
    },
    styles: {
      src: 'themes/makeuseof2014/styles/*.scss',
      dest: 'themes/makeuseof2014'
    }
  }
}
var m2014 = paths.m2014;  

m2014 here refers to the theme name, so the script can easily be modified for other themes as needed.

Styles

The styles task is responsible for doing three things:

  • Converting SASS to CSS.
  • Prefixing CSS.
  • Minifying CSS.

It’s a pretty straight-forward task

gulp.task('styles', function() {

  var src = m2014.styles.src;
  var dest = m2014.styles.dest

  // Compiles sass, autoprefixes, and compiles files
  gulp.src( src )
  .pipe( p.compass({
    css: 'themes/makeuseof2014',
    sass: 'themes/makeuseof2014/styles',
    style: 'compressed',
    comments: 'false'
  }) )
  .pipe( p.autoprefixer() )
  .pipe( p.minifyCss() )
  .pipe( gulp.dest( dest ) )
});

The src and dest variables are set so that I can easily use either in the main function.

gulp works through piping files (Can be in an array, can use the wildcard, etc) through a series of plugins. Each plugin can have specific settings with it, passed as arguments. If you’re familiar with jQuery, gulp should be pretty easy to understand and write.

Scripts

Our goal with scripts was simply – Compressing them, and allowing use of includes.

gulp.task('scripts', function() {

  var src = m2014.scripts.src;
  var dest = m2014.scripts.dest

  gulp.src( dest + '*.js', { read: false } ).pipe( p.clean() );
  // Clean old files

  // Uglifies files from src folder -> main folder
  gulp.src( src )
  .pipe( p.include() ) // JS Includes
  .pipe( p.uglify() ) // Compresses JS
  .pipe( gulp.dest( dest ) );
});

Here’s how the scripts task looked.

Note the ‘clean’ thing – It deletes all compressed JS files from the js folder. dest + *.js deletes only the Javascript files in js folder, not in it’s subfolders. (Learnt this the hard way…)

Done using gulp-clean, This is important because we might delete source scripts some times, and in that case, the compiled script will still remain in the js folder.

Setting read to false will prevent node from reading the files, and will decrease time taken.

Watch

The watch tasks calls the above tasks whenever there’s a change in the files in the styles folder or in the js/src folders.

gulp.task('watch', function() {  
  gulp.watch(m2014.scripts.src, ['scripts']);
  gulp.watch([m2014.styles.src, m2014.styles.dest + '/**/*.scss'], ['styles']);
});

m2014.styles.dest + '/**/*.scss' checks for scss files in subfolders of style, otherwise it won’t run if a file in one of the subfolders was edited.

The default task

gulp.task('default', function() {  
  gulp.start('scripts', 'styles', 'watch');
});

Just runs the three tasks that we defined above.

Syncing files

At MakeUseOf we use a Vagrant set up and a git repo set up at the wp-content folder.

Gulp-related files that are synced are package.json and gulpfile.js. Others are added to .gitignore, and can be installed on each computer seperately (Through npm install, basically).

Further Reading

Discuss on Twitter