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):
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/';const settings = require('./settings');Next, drop down to lines 211 and 212. Modify them like this:
proxy: settings.urlToPreview,port: 3000