Let's Build: A Consultancy Website - Part 14

When I start most projects I like to utilize some build tools to make the code more optimized as well as my workflow.

Part 14 walks you through the folder structure of our new Kirby installation as well as the process of setting up a build tools workflow. I'll create a Gulpfile and within it, I use a variety of tasks that run in the background while I work. These tasks include:

• Compiling Sass into CSS
• Compiling, Minifying, and Uglifying JavaScript files into one main file
• Optimizing images
• Serving the site to localhost via BrowserSync - This results in automatic browser refreshes as the code is changed.

Node Modules

Installing Gulp and some extended plugins is a must to get our development environment up to spec. I like to use Yarn but you can also use npm. It really jut boils down to preference but I have found Yarn to be a little faster when it comes to downloading new plugins.

My package list contains the following plugins:

• gulp
• gulp-sass
• gulp-autoprefixer
• gulp-newer
• gulp-imagemin
• browser-sync
• gulp-concat
• gulp-uglify
• gulp-sourcemaps
• gulp-watch

To install these on a per-project basis I run this on the command line inside my root project folder:

$ yarn add gulp gulp-sass gulp-autoprefixer gulp-newer gulp-imagemin browser-sync gulp-concat gulp-uglify gulp-sourcemaps gulp-watch --dev

The —dev flag at the end saves the plugins and their dependencies inside my project's node_modules folder as opposed to my entire system. Running without that flag will install those modules globally.

The Gulpfile

My Gulpfile has remained the same for the most part in the past couple of years. I like to keep it simple when it comes to build tools personally. The less setup I need to make before I can dive into a project the better!

Here's a gist of my Gulpfile.js for reference. You'll need to change this relative to your own working folder. You also need to be running MAMP if you're working in a PHP-based environment locally.

If you're not using PHP or something similar you can opt to use a static approach like this:

Note that this uses a gulp-connect plugin as opposed to BrowserSync so you'll want to install that.

Download the source code for this project

Source Code

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12
• Part 13