July 12, 2017
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
- Optimizing images
- Serving the site to localhost via BrowserSync - This results in automatic browser refreshes as the code is changed.
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:
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
—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.
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.