How To Get Gulp Working With MAMP and Genesis

October 4, 2018

On the advice of a developer friend some months ago, I decided that I should really get going with using Gulp as my task-runner with MAMP. Up until this time I had been using PrePros as my goto for local development task running. PrePros is a task-runner app and is available here. PrePros is good and has served me well. I'll continue to use it in the future. The issues for me were that I can't take PrePros with me to all my development jobs, other devs don't use PrePros, and I can't share setup files if other devs I work with don't use it. Enter Gulp, the free open source task-runner available via the Node package manager.

I already had Node setup from some work I was doing with React and Vue.js. If you don't have Node installed, here's a great tutorial for how to install it on a Mac.

Getting Started

The first step was to download and install Gulp using the node package manager (npm). You'll see the -g flag in the command line is for global usage. Open your terminal window and enter this command:

sudo npm install gulp-cli -g

Enter your password and press enter

So I did a little Google searching and came across this Gist by Sridhar Katakam. He includes some instructions on where to install the gulp.js file and some small changes to be made to the gulp.js file like siteName and username variables. Easy enough, right?

It turns out that the gulp.js file is not setup to output the local url the way MAMP does. Here's the original code (starts at line 204):

image of original gulp code

At line 211 the browserSync.init function is taking in proxy, host, open, port, and https settings. If you don't have https enabled on your dev site you can comment out from line 215 to 218. You can see from the code that the function will return a URL that looks like this: https://siteName:port and that might work for some setups but not for MAMP. MAMP needs a URL output like this: http://localhost:port/siteName

The Solution

What I came up with to solve this was to create and add a settings.js file within the /genesis-sample theme folder. In this file, there is one line (replace the word Brentwood with your MySQL database name:

exports.urlToPreview = 'localhost:8888/Brentwood/';
Now, in gulp.js add a new line after line 10 in the Require our dependencies area:
const settings = require('./settings');

Next, drop down to lines 211 and 212. Modify them like this:

proxy: settings.urlToPreview,
port: 3000
Comment out from lines 213 to 218 and save your gulp.js file.
That's it!

Trying It Out

Make sure MAMP is up and running then run 'gulp watch' in the terminal window from the genesis-sample folder. Your site should pop up in a new browser window within 10-15 seconds.

ABOUT

I'm Jack Walsh, a professional freelance WordPress developer based in San Diego, CA. One of the things I love is the technology that allows me to travel all over the U.S. and the world with my wife and two dogs yet still stay in contact with my clients. I've been working with WordPress for over a decade. I'm a Codeable certified WordPress expert and have been fortunate enough to work with awesome clients from all over the world. I'd love the opportunity to talk with you about your next custom WordPress project.

GET IN TOUCH

Have a question not listed in the FAQ? Email me at jack.walsh@jw-wpdev.com

Want to discuss your next project?

Let's Talk!
crossmenu