GULP.js for absolute beginners

Gulp.js for beginners

GULP.js for absolute beginners

  1. My first encounter with Gulp.js
  2. So what is Gulp.js actually for?
  3. How does it work?
  4. Conclusion

My first encounter with Gulp.js

I was thrown in at the deep end somewhat with Gulp.js. I arrived at my new job and i was getting to grips with how the dev team work with them showing me around their numerous projects. When I first saw a developer working with Gulp.js and started looking through some of the write ups, tutorials and videos online I have to admit I was a bit scared at what was before me. Pipes, streams, tasks – “what is this sorcery”, I was asking myself!? On top of all of these new and foreign concepts it’s all run via the command line which as a front end developer I do not have extensive experience with which therefore added to my woes. How I got my head around it was ‘working backwards’ in effect. I looked at what it was designed to actually do and tried to understand that first. Once you can get your head around what it is actually for it becomes a lot simpler and clearer in your mind.

So what is Gulp.js actually for?

Gulp.js is a tool that is designed to make the development process easier. It is not like JQuery, React angular and all of the other Javascript software which you may have encountered. It is not a plugin to be used to make the front end of your website look and behave nice. It is a tool used to speed up the development process on your local machine that just happens (handily for front end developers) to be written in Javascript.

Following is a list of some of the main things that Gulp.js and it’s numerous plugins can do for you to speed up the development of websites. Whether you a freelance developer working on small to medium projects, part of an agency working multiple different projects for clients or part of a team of 100’s working in house on huge enterprise level projects. Gulp.js has something for everyone so spend some time and get to know Gulp.js. It will be your friend and make your life easier.

Here are some of the common web development tasks that Gulp.js will automate for you. This list is by no means exhaustive:

Compiling LESS / SASS into CSSRefreshing your browser when you save a file (this one alone, i’m sure you will agree is worth your time getting set up!)
Quickly running unit testsBuilding and minifying JS and CSS
Renaming files such as imagesImage compressionSaving your production ready project to an existing directory

Just think about how much time you spend doing all of that. For example before I learned of this compressing images to me meant opening each one in photoshop and then resaving it after changing some settings. Minifying CSS and JS would be done manually one files at a time. Hopefully you can see that this software can save you time on any project. The bigger the project then the more time you will save but even the little guys can benefit by being more efficient.

How does it work?

I’m going to explain from a user’s point of view. Assuming you are in or joining a team that is already using Gulp.js and has it configured how they want to suit their development process. In this situation (which is the one I recently found myself in) you do not really need to know what is going on under the hood or how to write the code and how it works. You just need to understand what is going on and how to start using it as part of your workflow. My situation is that I have just joined an in house team of developers at a big company in the UK – I just need to understand what it is and how to use it as opposed to writing all of the code and setting it up myself. The friendly devs here have already taken care of that for me!

From a user’s point of view all that you need to understand is that Gulp.js is always running in the background on your machine. It is ‘listening’ for file changes and then when you save a file it will swing into action. The ‘Gulpfile’ contains a list of commands which are all certain tasks such as “compile SASS”, “compress images” and so on. When you have Gulp.js running in your environment, the moment you save any file it will swing into action and execute all of the commands that have been programmed into it finally saving all of the production files in your production folder. Let me give you an example.Cross browser mobile testing. Let’s consider the following scenario. You are working on a mission critical website and it must be tested and working on at least 10 of the latest smartphones and tablets. So you have a device lab set up and all of the devices pointing at your development server.

Without a script such as Gulp you would have to manually refresh the browser on every device, every time you made a change in order to spot any bugs. Gulp.js will automatically refresh all of the windows each time you save a file. Just stop and think about how much time that will save you. Even with just a handful of devices it will be quite a lot of time fiddling around with mobile browsers completely eliminate from your workflow. Adding a new image? Just add it in and Gulp.js will optimise it for you. Can you see where i’m going?

Conclusion

Do yourself and / or your team /colleagues a favour. Let Gulp.js into your life and be amazed at how much more time you have for the good stuff like actually writing code!. Go and have a go at it, it’s not as scary as it looks and you will be glad you took the time to learn how to use it. It’s a powerful time saver.

Download Free WordPress Themes Themeforest and free plugins Codecanyon – addonswp.com.

Share this post

Leave a Reply

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