code

Use Gulp to Automate WordPress Builds

As you are working on building a custom WordPress site you may start to find that you need to bundle up your JavaScript and CSS code into a format that your theme can use. Code that you write in modules will not get included into your theme unless you manually build the new files before testing your site.

But, you can use Gulp to automatically build these files for you. Then you can make changes to your code and see the results reflected on your local build. This makes iteratively building your web app way faster.

Here’s how you do it:

  • Get these four files from Brad Schiff’s Github account:
  • Put these four files into the top level of your WordPress folder (the one with files like wp-login.php) in it
  • Open settings.js and change the two parameters to reflect your theme location and local URL (the one that runs on your local machine
  • Download and install node.js
  • Open terminal in your top level WordPress folder
  • Install gulp from the command line using this command: sudo npm install gulp-cli -g
  • Installed the required npm packages by typing sudo npm install
  • Run gulp from the command line by using this command: gulp watch
  • Navigate to your local site and test by making a simple change to see if it gets reflected in your browser without refreshing

One Comment

  • Matt Campbell

    NOTE I had a problem installed the npm node packages because of file permissions. I searched and found this somewhat sketchy solution on Stack Overflow > sudo npm install –unsafe-perm

Leave a Reply

Matt is the author of five Apress books including Learn RStudio IDE, Quick, Effective, and Productive Data Science, Objective-C Recipes, Swift Quick Syntax Reference, Objective-C Quick Reference, and the upcoming Pro Data Visualization with R and JavaScript. He has over 20 years of experience in technology, psychometrics, and data analytics working in major higher education institutions such as The College Board and Educational Testing Service. He has earned a Master’s degree in Information Systems Management and a Bachelor’s degree in Quantitative Psychology.