A front end workflow with version control for experimentation

In this Article we will setup a simple front end workflow with version control which will help us in speeding up the development process and allow us to use modern front end code.

The following will be included:

  1. Gulp
  2. Git
  3. Auto prefix CSS
  4. Compile modern Javascript using Babel

What is Gulp?

Gulp is a JavaScript toolkit which helps you in implementing multiple front end tasks during web development, it can be used to do wide range of things which can help you in reducing the development time. You can create your own customized build process that suits your development needs.

Installing Gulp

Before we install gulp you need to have Node.js (Node) installed in your computer.

If Node.js is not already installed in your computer, you can download the installer from Node’s website.

Once we’re done with installing Node, you can install Gulp using the following code in the command line tool.

// for windows users
npm install gulp -g

// for mac users
sudo npm install gulp -g

Setup Repo

Now head to the repositroy Front End Build Process for Test Builds on GitHub.

Fork this repo into your account and clone to your machine.

Follow the instructions in the readme.md for final setup.

Structure

The approach we have taken here is for every new test build we create a new branch off master. This way master serves as a clean area in which we can add/update the gulp file if needed and each test build has it's own area to work on.

There are two main folders to be aware of:

src - this is where we write our code

dist - this is production ready code which has been complied

Code

Here is an example of a branch created for a test build: Test build branch

Within that we have our code within the src folder: Uncompiled code

And our compiled code: Compiled code

Wrapping up

You can now take the code from the /dist folder and paste into your browser console and the changes will take place. This is a good idea before moving it into any testing tool to quickly check if your code is working.

You can now go ahead and add the code to the testing tool you are using and run through your usual QA.

Download our free A/B testing guide and make your conversion rate soar

a-b-testing-guide