Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Perch CMS Gulp Workflow utilising Pipit Pinion

Perch CMS Gulp Workflow utilising Pipit Pinion

Author: Will Moody


Reading Time: (approx) 2 min

Tags that this post has been filed under.

With the redesign of the Fat Buddha Designs website came the timely release of a great article on the Pipits for Perch website.

The article gives all the code needed along with a step by step guide to get up and running using a Gulp Workflow which utilises Pipit Pinion as a Perch Feather, this helps you manage front-end assets such as CSS and Javascript through Perch.

If you incorporate the Multiple Server Config and Perch Production Modes into your build process along with the Gulp Workflow this really does make for a simple but powerful build process when using Perch and say CSS Grid Layout.

As I use Xampp on a Windows 10 set up the way I went about the build was to firstly add a new folder to my PerchSites directory; which is where I store all my Perch based sites, to this I added the latest build of Perch.

I then added the following code to my C:\xampp\apache\conf\extra\httpd-vhosts.conf file:-

<virtualhost *="">
    DocumentRoot "C:/Perchsites/FBD"
    ServerName fbd.local
    <directory "c:="" perchsites="" fbd"="">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Require all granted

and   fbd.local

to my C:\Windows\System32|drivers\etc\hosts file.

The next step in the process is to set up a new database using Xampp.

It was then time to install Perch, making the connection the database, once this was completed I added Pipits for Perch following the install instructions, and finally set up the folders and files as per the instructions in the Gulp Workflow article, all fairly straight forward's so far.

I personally like to keep all my scss/sass in separate partials files, each relating to a section say header, nav or footer and then things like the grid, typography and forms are all kept separate, this makes finding a particular piece of scss/sass much easier to find, so for me using Sass partials for concatenating works perfectly, with my app.scss file looking like this:-

@charset 'utf-8';
@import 'base/normalise';
@import "base/config";
@import "base/mixins";
@import "base/type";
@import "base/aos";
@import "components/media";
@import "components/buttons";
@import "components/tables";
@import "components/forms";
@import "components/alerts";
@import "components/other";
@import "grid/grid-settings";
@import "pages/layout";
@import "sections/nav";
@import "sections/intro";
@import "sections/content";
@import "sections/contact";
@import "sections/footer";
@import "sections/copyright";
@import "sections/scrollup";
@import "sections/cookie";

In my Perch config.php, I added the following code:-

$http_host = getenv('HTTP_HOST');
    case('fbd.local') :
    define("PERCH_DB_USERNAME", 'XXXX');
    define("PERCH_DB_PASSWORD", 'XXXX');
    define("PERCH_DB_SERVER", "localhost");
    define("PERCH_DB_DATABASE", "XXXX");
    default :
    define("PERCH_DB_USERNAME", 'XXXX');
    define("PERCH_DB_PASSWORD", 'XXXX');
    define("PERCH_DB_SERVER", "XXXX");
    define("PERCH_DB_DATABASE", "XXXX");

This gives Pipit Pinion the necessary 'PERCH_PRODUCTION_MODE' so that it knows which file paths to use.

I also added this following code snippet to my footer just before the closing body call, this means that the browser-sync js is only called in when the 'PERCH_PRODUCTION_MODE' is set to 'PERCH_DEVELOPMENT'.

<script id="__bs_script__">//<![CDATA[
  document.write("<script async src='https://HOST:3000/browser-sync/browser-sync-client.js?v=2.18.13'>
  <\/script>".replace("HOST", location.hostname));
<!--?php endif; ?-->

The next stage in adding to the build process will be to add concatenation for the JS files when using NPM build, this will be covered in a future article.

My thanks must go to Hussein Al Hammad for additional help getting started using Gulp Workflow and Pipit Pinion.

Previous Article: What is Cache Busting? And How I Implement It with Perch.

Next Article: Getting to know CSS Grid Layout