My Design Workflow - Gulp is RAD

May 12, 2018 09:05

Over the past year, I have been working on creating a workflow that I can get on with when creating designs for clients and personal use. This post talks about my needs when quickly prototyping, and what tools I decided to use!

TLDR;

I use GULP to automate my workflow. I think its awesome. Your workflow will probably differ and change from my workflow. There is not one "Right Way" to do this - and thats fine! Just use what you think is best and works for you 🖖

You can check out my workflow right now by following this Github link below. Instructions on how to use it are on the REPO page.

https://github.com/JakePrice86/jakes-gulp-workflow

My Needs

When I have an idea for a project, or when a client comes to me to talk about working for them - I love to visually mock the project up in some HTML, CSS and a splash of JS. My go-to prototyping tool is Bootstrap - an open source toolkit full of great front-end components, which is backed with some very good documentation.

To help with this, I have some really basic needs to help me go from 0 to 100MPH:

  • I need the browser to refresh automatically when I make a change to any file
  • I need to use some sort of templating system as I'll want to create components - such as headers, footers etc - that can be used in several areas
  • I need to use SASS for my CSS work

Tools Used

After tinkering for a time being with bash files for longer than I'd like to admit, I made the jump to Gulp. Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow. It's a very simple premise - you code your workflow with Node, and gulp will run every time it needs to. For me, this is usually done when a file is changed.

I use several modules in my GULP file. The links to the systems used are below:

GULP - https://gulpjs.com/
SASS - https://sass-lang.com/
Browser Sync - https://browsersync.io/
EJS - http://ejs.co/

These are all called when different types of files are changed. For instance, we call the SASS plugin to compile our SASS to CSS when we change any file in the assets/scss folder, then reload our browser with the Browser Sync module. Its this automation that we use GULP for as its super powerful ❤️

Considerations

Nobody works in the same way - so my workflow might be different to yours. And you know what - thats super cool 🚀

This way is just the way I have done things for a while now - but I still tinker with my gulp files every now and then. For instance, my colleague Jack Lewis pointed me in the direction of Browser Sync - I was previously using Live Server for my live reloading! Keep on learning and trying new things!

I've love to see what your goto gulpfile looks like - hit me up on Twitter (https://twitter.com/JakeLPrice) or via email (jp@jakelprice.com) and show me if you want to! Or just let me know how I can make things better if you have some ideas! I love hearing from people who have read my blog!