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:
  • gulpfile.js
  • package.json
  • settings.js
  • webpack.config.js
• 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