Configuring Gulp, Sass and BrowserSync for WordPress _s theme

Underscores (_s) is a starter theme provided by automattic as a starting point for building new WordPress themes. The build system for front-end development has gained popularity as it streamlines the workflow and helps avoid repetitive tasks. In this post, I’m going to share my experience of setting up the environment using Gulp and BrowserSync for _s theme.

So, let’s get started.

Setup the Environment:

The first step is to download and setup the required tools. There are complete tutorials on setting up Gulp and BrowserSync. Basically, all of these tools are node modules and are installed using npm command. After configuring these tools, download the _s theme.

Step I: Configure Gulp and BrowserSync locally:

Before downloading _s theme, we can change some basic configurations. For example, the name of the theme we are creating using _s can be changed. Let’s name it PostDemo and check the sassify checkbox. Copy the PostDemo theme in the themes directory and navigate to the PostDemo folder in command line and initialize the package.json file using the following command:

This will add a file to the theme folder which will have the detail about the packages installed and the dependencies. Next, we install the required modules locally using the following command:

It will create following file structure in the theme directory:

folder_strcture

Step II: Create a Gulp File

Once we have installed all the dependencies, we can move forward creating a gulp file (gulpfile.js). The following code goes in the gulp file:

Let’s break down the code and I’ll explain each part one by one:

First, we have used the require statement to include the modules that we need. There are many modules that can be used in build process. For our purpose, these require statements are enough. Next, we configure browsersync:

In this code, we are initializing the browserSync by specifying which type of files will be synced and the proxy server. I’ve also disabled notifications as I don’t want to see it on each page load. All available options for configuring browswer sync are available at the official site.

Next, we specify where our sass files are using gulp task. This task is responsible for pre-processing the sass files and places the style.css at the root folder.

Finally, we add a default task, it will preprocess sass, run browser-sync and start watching for the changes in sass sub-directories. If any changes are found it will execute the sass task previously mentioned.

That’s it. Now just run the following command and let the magic begin 🙂 :

Now, after running the above command, if we make changes in any of sass files or php files, the results will be reflected to all the connected browsers.

Wrapping Up!

Front-end development is changing rapidly and with new standards and devices, It has become very important to have a smooth workflow. Tools such as Gulp can greatly improve our workflow and have dozens of handy plugins. That’s it folks. I’m done with configuring my environment. Are you going to setup BrowserSync with Gulp in your next project? Let me know if the post was helpful.

ShareTweet about this on TwitterShare on Facebook2Share on LinkedIn2Pin on Pinterest0Share on Reddit0

18 thoughts on “Configuring Gulp, Sass and BrowserSync for WordPress _s theme”

  1. Hi Muhammad,

    Thank you so much for this article, this was super helpful.

    I finally figured out how to integrate browsersync into my gulp workflow.

    I’m so thankful 🙂

    Please keep the good articles coming !!!

    Best Regards,

    Karim

  2. Very helpful. thks!!
    to access wp-admin, the home page loads without problems, but when I go into pages for example, the URL does not contain wp-admin and generates an error because it fails the page. the url that is formed is localhost / site / edit.php. any idea?

    thks!!!

  3. I have been trying to figure this out for like 3 days now. I had been using this with Jekyll but not WordPress. Thank you sooooo much for helping me out with this Gulp/Browser-sync code and breaking it down. 😀

  4. This is the best article for a basic gulp setup on WordPress. All the other gulpfile.js I’ve found are way over the top or don’t explain very well. This one is just right. Thank you!

  5. Thanks for providing this example, which is still the best WordPress/browsersync implementation I’ve found.
    I was wondering, do you have any ideas for doing “css injection,” so the browser doesn’t reload for style changes? Or does that really only work for statically-served files?

  6. Hi Muhammad,
    Thank you soooooo much for this tutorial! It helps me figure out how to set up live-reload with php file! you are my life saver!

Leave a Reply

Your email address will not be published. Required fields are marked *