Have you ever been tired of hitting the F5 key once too often? Yeah, I understand the pain. Here’s where task automation shines. Writing scripts to continuously handle the time-consuming tasks you actually need in your development workflow. Don’t get cold feet on me here. It’s a lot less scary than it sounds. Once you get the hang of it, you’ll never want to write code without it.So why Gulp?

1. Gulp Commands

Because you’re writing the tasks with your best buddy, plain old JavaScript. It doesn’t get any better than that. Blowing up the Death Star.In comes Gulp. The hero you need, and most definitely deserve. There are several key features regarding the use of Gulp which would make you want to use it. The one I hold as the most important is the way it can simulate the server environment where you will ultimately be hosting your code. This includes moving files around your project directory, and more importantly placing them in a development directory where you will be running a web server.

Gulp also enables you to compile, minify and concatenate any files you want. All with the sole goal of getting your code base’s footprint down to the absolute minimum. In this process making it ready for shipping to production. It’s perfectly fine if you don’t know any of the terms above, we’ll go through them in more detail a bit further down. TLDR;You can severely hurt my feelings by only reading this TLDR; or be awesome instead, and read the whole article. Have fun!.

Three main Gulp commands: gulp.task, gulp.src, gulp.dest. pipeing is freaking awesome!

The pipe method is built into Node.js and is used to copy files from one folder to another. Have a logical folder structure, with three main folders. The src folder for pre-processed files, tmp for the local development server and dist for processed and minified files. Create separate tasks for pipeing HTML, CSS and JavaScript files from src to tmp.

Combine the HTML, CSS and JavaScript tasks into one main ‘copy’ task. This will let you copy all the files with one command. After all files have been copied you want to reference them automatically in your main index.html.

This is done with an ‘inject’ task and is called injecting dependencies. When the files have been copied and injected it’s time to run a development server on the tmp folder. While the server is running you ‘watch’ for changes, and enable live reloading on the local development server.

Satisfied with your code? Go ahead and ‘build’ the production files and place them in the dist directory.

Delete tmp and dist before pushing to GitHub. (Or just add them to your.gitignore). The code you will be writing during this tutorial is on GitHub and will be linked at the bottom of the article.

Gulp Commands

Sorry, but you have to scroll to the bottom.:). Now you’re set to install the necessary tool regarding the actual task automation. Go back to your command prompt and run: npm install -g gulpNote: Linux and Mac users will most likely need to run this command with sudo, to enable the required permissions.You’ve now installed Gulp globally on your machine. This step is important as it is required for Gulp to be visible in your command line regardless of which directory you are in. The more technical explanation would be that Gulp has now been added to the PATH.You’re now ready to get started with writing tasks. You’ve faced the dark side and emerged a hero.

This has been a “throw you in the deep end of the pool” crash course on task automation. I’m confident to say you can swim if you’ve come this far.

Don’t stop here though. There’s so much more to learn about Gulp, this was just the beginning. But, regardless of that, it’s more than enough for you to get started with building serious applications and start shipping code. The best way of learning something is through concrete examples. Hack away and ship as much code as possible.Hope you guys and girls had as much fun reading this article as I had writing it.

Feel free to share if you believe it will be of help to someone, or if you liked it, click the 💚 below so other people will see this here on Medium.