Using Gulp to automate the boring stuff

A major part of a software developers career is about automating repetitive tasks then optimising, refining & enhancing them. In the modern enterprise, software development is all about ensuring or finding or un-tapping new paths to increased revenues or profits.

A large part of my career has been dedicated to that. One of the unintended consequences of a number of products I have worked on teams to develop, has resulted in jobs disappearing - no not in the way you're thinking, although I have to admit there have been a few questionable projects I've been on - due to there being no need for a person to do a job, when a computer can now do it.

The key skill for any software developer is about having ability to identify, document, implement and refine algorithms. We search for patterns, analyse for optimisation, automate the mundane and optimise for benefits.

Despite all of this, sometimes during the course the of an average developers day you'll probably identify a few tasks that could easily be automated with just a few minutes work.

I came across one of those situations, where I was repetitively doing the same task a few times throughout the course of the day. Honestly, it was around 4 or 5th time of doing it, that I suddenly found myself thinking "This is really dull, I need to automate this"

The task I was working on, was something I haven't done for a really long time - designing a new website homepage. I was working with a new client was iterating through a couple of layout designs visual elements while working on a new business the client is launching.

The project was in a very early phase, and mostly I was just mocking things up. We hadn't decided on any frameworks or platforms at this stage so were mostly just using HTML, CSS and JavaScript, while iterating.

The tasks I found myself doing over and over again, was zipping up the directory I was working in, copying it to the web server and un-compress it so the client could see the results we were working on. We were geographically separated across time zones making collaboration via a Website the only way forward.

Finding a way to automate

Although I classify myself as a Full Stack Developer because through, Backend and even at the hardware level, it is very rare on a typical project that you get to do this all of this all the time. You invariably find your slot on a team or project and you gravitate towards that. Over the past few years, this spot has been more around the middle and backend.

I just found that there are invariably folks better than I am working at the front end, that being said, I actually do love and enjoy being set loose at the front end! However, I have found that although my skills are good enough for my awareness of all the tools available is sometimes not up to par.

It was, therefore, my first attempts of automating this process, invariably involved both Bash Scripts and Powershell before I sat down and thought whether there were actually other ways this particular problem could be solved.

I started to think back to a project of about 3-4 years ago when I used Grunt - JavaScript Task Runner which I thought would help. However, I remember at the time that although the Grunt was JavaScript based, I didn't particularly like the syntax and found it quite verbose.

My next port of call was to take a look at Gulp a toolkit for automating painful and time-consuming tasks, it looked perfect, and the syntax looked cleaner.

Getting started with Gulp

Gulp like all npm packages is super easy to install and get started.

npm install gulp-cli -g
npm install gulp -D
touch gulpfile.js

In a little under 30 seconds, I was ready to go!

Using gulp to Create Zip Files

The most tedious task I wanted to automate was the process of creating compressed folders. In order to achieve this I needed an additional library gulp-zip

npm install gulp-zip --save-dev

I also realised that I would need to keep track of the dependencies I was installing and version numbers etc. Although we haven't decided on the technology or platform for the final project yet, I assumed it would be still a good idea to use NPM as the package management. I, therefore, needed to initialize to create a package.json.

This is super simple to do, using npm init once completing the wizard and verifying the package.json had been created I was ready to carry on installing the gulp-zip using npm install gulp-zip --save-dev which installs the library as a Development Dependency.

All this now complete, I was now ready to start writing the code to generate the zip files. I was surprised how super simple and easy it was to achieve this in just 6 lines of code!

There was, however, one little quirk I need to figure out, that because I wanted to preserve the original directory structure I needed to add an additional option { base: '.' } , which basically instructs to get everything before the glob start, in this case I wanted to included directory from the CWD

var gulp = require('gulp');
const zip = require('gulp-zip');
 
gulp.task('deploy', function () {
  return gulp.src(['*.html', '*.php', 'vendor/**/*', 'css/**/*', 'fonts/**/*', 'js/**/*'], { base: '.' }).
    pipe(zip('website.zip')).
    pipe(gulp.dest('dist'));
});

This was super easy, and it spurred me on to examine what else I could automate with Gulp and I found a whole host of little features I could use to streamline my development process, which I hadn't known of before.

Using gulp to launch BrowserSync

Going through some of the Gulp Documentation to understand what else I could achieve with this tool I learned about BrowserSync - an automation tool that makes web development faster .

BrowserSync creates a small server and injects a javascript file on every page; This file makes use of WebSockets to communicate between the server and the client to watch changes to your code or browser action, As soon as BrowserSync detects an action it performs a page reload.

This is awesome when you're developing, you can make changes to your source file, and see the impact in near real-time time in your browser.
Another really cool thing I learned while playing around with it, is if you're on a network you can browse the website on your machine from another computer. So in my particular case in my office I have Ubuntu, Fedora, Apple and Windows computers so I can test out my changes and view them in all browsers as I'm developing!

I just installed BrowserSync as Development Dependency npm install browser-sync --save-dev then I was able to easily configure it by

var browserSync = require('browser-sync').create();
 
gulp.task('browserSync', function () {
  browserSync.init({
    server: {
      baseDir: "./"
    }
  });
});

We can now execute this command using gulp browserSync and the application will launch in the browser, and BrowserSync monitors the directory defined in baseDir and whenever we run the command, the page reloads.

Using Gulp for Sass

Once I had this set up, I started dabbling with tidying up my CSS files. Due in part, that the CSS file had started to become a too long, complicated and unmanageable. I needed to break it up in smaller units that to enable easier editing and management.

I decided to explore SASS - an extension of CSS that adds power and elegance to the basic language .

Gettting things set up with SASS was now super easy, and using gulp I could automate the task along to keep updating my style sheets as I working and see the results as I was developing!

In my case, I decided to install Sass Globally, as I was obviously going to start using across many projects. npm install -g sass

Then in order to get Sass set up with my project and gulp I needed to install a Gulp extension

Conclusion

Taking a little bit of time and effort to automate boring and repetitive tasks even while developing can really have an impact. I know I'm guilty of ignoring my own repetitive tasks, sometimes thinking I know it's a pain but I just need to do it in order to get things done. However, as I proved to myself in the above scenario, just taking a little bit of time and effort can pay huge benefits.

I completely revolutionised my development process on something I was working, learned a couple of new skills along the way and was still able to deliver what I needed. All in all, implementing the above and learning took about an hour of my time but has and continues to pay big dividends going forward. It really made developing fun, frictionless and focused and enabled me to focus on the fun innovative aspects of what I was doing.

About
Latest Posts

Gary Woodfine

Technical Director at threenine.co.uk

Gary is Technical Director at threenine.co.uk, an independent software vendor specialising in IoT, Field Service and associated managed services,enabling customers to be efficient, productive, secure and scale-able.