Gulp task manager – A Quick Look

If you are a developer and have not discovered the magic of a task manager like Grunt or Gulp, I highly suggest you check one of them out. I recently started learning Gulp. Once I got a basic grasp of what the Gulp task manager did, I felt like it opened a whole new world of awesomeness to me. My brain exploded with the possibilities and I feel that this is going to be a game changer for me

A look at the gulp task manager

What is a task manager?

Exactly what the name implies. It allows the running of tasks from an environment to perform any number of things. But where the real cool stuff comes to play is in the plugins. People have created plugins that do many things, from minifying CSS and JS files to automatically compiling pre-processed code like SASS or LESS to creating a deployable folder structure. There are so many awesome plugins that I am still wading through all of the great things that might improve my workflow.

Grunt vs Gulp task manager

I chose to delve into Gulp only after a little bit of online research, but there was no overwhelming information that pushed me toward it. There are syntactical differences and apparently some speed differences, but to me, it seems like the all of the important things are somewhat similar. I suppose a case could be made that Grunt has been around longer and the community might be a little bit more invested, but I have found there to be an enormous Gulp community, as well. Also, the Gulp task manager appears to be a bit more code friendly, while Grunt seems to be more configuration and set up through JSON.

Really, just pick one and roll with it. I will be talking more about the Gulp task manager in this post.

The Basics

You don’t need to know Node.js to get started, but a basic understanding of JavaScript and how Node.js works will help. I am a Node beginner, but feel comfortable enough with programming concepts, JavaScript and not being afraid to look at documentation, so it works for me. I am not going to be able to give you a better first try than the actual documentation, so here you go… Gulp ‘getting started.’

The short version is that the Gulp task manager, surprisingly, runs on tasks. The tasks can be dependent on other tasks. Most of the functionality revolves around having a source, which could be a file, an array of files, folders or any other pattern-able group of items. Gulp uses node globs for searching, plus a little extra. Here is an example of a basic Gulp task that does not use outside plugins.

gulp.task('copy-fonts', function(){
  gulp.src('fonts/**')
  .pipe(gulp.dest('dist/fonts'));
})

This code snippet, or task, will look for all files and folders in “fonts/**” and copy them all to a folder named “dist/fonts”. In this case, I am moving it for the sake of making an easily deployable folder where my minified and concatenated files reside.

Once the source in a task is determined, things happen to that source via plugins. For example, there is a plugin called ‘gulp-minify-html’ and this might be what a task looks like that contains this.

gulp.task('default', ['package-project'], function() {
  return gulp.src('dist/pages/homepage.html')
    .pipe(minifyHTML())
    .pipe(gulp.dest('dist/pages'))
});

Note that the task is called ‘default’. This is a task with special meaning in Gulp in that if no task is identified when running it, it will look for the ‘default’ task. Also notice that there is an array passed into the task. This is a list of tasks that are required to run before this task can be executed. So, in this case, ‘package-project’ will need to run before the minifyHTML stuff happens.

Once package-project completes, the task above will look for homepage.html, run the minifyHTML file and send the minified file to ‘dist/pages’.

My Gulp Use Case

I worked through some of the initial setup and wanted to get a good feel for how Gulp functions, so I created a bit of a use case demo for myself.

What I have Gulp doing is watching my group of development folders. Whenever I make a change to the CSS, HTML, JavaScript, images folder or font folder, Gulp then automatically senses that something is modified and goes through a set of tasks I have set up to run.

It compresses everything in the images folder and moves it to the ‘deploy’ staging area. It moves all font files as appropriate, as well. The task then takes all designated CSS and Javascript files and minifies them, concats them and in the case of JavaScript, uglifies it and finally moves it to the staging area. Finally, it minifies the HTML and moves it as well.

Because of this little script that works automagically in the background, I have a physical size saving on a webpage of 30%, I reduced the number of HTTP requests by about 20% and ultimately made a page that is quicker. My front end set up, that I feel could be standardized on a project by project basis) has given me measurable improvements with a small amount of effort.

And really, this is just the beginning of what I can do. There are so many more plugins and efficiencies to be had with the Gulp task manager.

Gulp Summary

I am 100% sold on the Gulp task manager. It is magical. The kinds of development and deployment efficiencies that can be created with little effort is mindboggling to me.

If you are a front end developer at all, I would suggest taking a look at one of the task manager tools that are available and seeing how they might help your workflow

One thought on “Gulp task manager – A Quick Look

Leave a Reply

Your email address will not be published. Required fields are marked *