We’ve recently overhauled our build process here at Laser Red, and although we’re not doing anything revolutionary, the changes have fundamentally improved our workflow, so we thought we’d talk a little about the awesome set of open source tools we use.
GIT
All of our new projects are now hosted in GIT repositories.
GIT is a version control system created by Linus Torvalds it is used by thousands of development teams across the world, including the Linux kernel project, Google and scores of open source projects. Over the last decade it has become the de-facto way to maintain a codebase.
GIT allows multiple developers to simultaneously work on the same project, without fear of overwriting each other’s work, and also serves as a great way to keep copies of changed files should anything get broken during the development process.
(It also lets us poke fun at each other with amusing commit messages)
GIT Commit message
Vagrant
Vagrant is a virtualisation technology, it allows developers to “spin up” a local development server on which to work. This means that as developers, we don’t have to pollute our development machines with web server or database software (notorious for hogging large amounts of memory and processing power).
Vagrant packages a server environment into a single file, ensuring that everyone working on a project is developing on the same environment.
We’ve created our own Vagrant box here at Laser Red, which lets us get started on a new project very quickly, with a minimal amount of time wasted “setting up” a project.
I’ve personally been using Vagrant for a couple of years, it has become an indispensable part of my workflow, so I’m very happy that the whole dev team here is now also using it.
So happy in fact, that we’ve decided to release our WordPress/Vagrant development environment. We call it Neutrino and you can get it here: https://gitlab.com/laserred/Neutrino
LESS
Some LESS code
LESS is a CSS preprocessor. It extends the CSS language, adding features which make CSS much easier to maintain. As developers it is a godsend to be able to store a colour value in a single place, so when we decide to tweak that one colour used across the entire website, we just change one LESS variable, recompile the CSS and we’re done.
It certainly beats performing a “search and replace” on enormous CSS stylesheets, where things can easily be broken.
Gulp
Gulp is probably my favourite build process technology. It essentially removes all of the monotony from front end development. Gulp can be configured to perform many repetitive tasks, but it really excels automatically making resources (like CSS or javascript) much smaller, meaning our pages load faster.
Without Gulp, we have to remember to minify our resource files every time we make the smallest change, this process can be time consuming, and is easy to forget. With Gulp it “just happens”.
Atom
We’re not all using Atom yet, just Luke and I, but it is so good I thought it was worth mentioning. Atom is a text editor which is written in Javascript. It is built by the good folks at github and takes text editors into a new generation.
Because it is built in Javascript, it is very easy to modify, extend and bugfix. The community of people using it has grown exponentially over the last year or so, meaning there are thousands of plugins and themes. I was a Sublime text fan for many years, but I’m a sucker for shiny new tech, and so far Atom has really delivered, it is fast, lightweight and the built in GIT integration just makes it invaluable.
The combination of these tools, all of which are open source and free to use, is an extremely powerful toolset, and it means the software we build can be even more awesome.