Last updated: 13th Febuary 2020
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:
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
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.
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
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
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.