Build Environments. Pittsburgh Web Design

Posted

ENAC Instructional Series

We see a lot of different ideas here at ENAC, but there is never a share on how these ideas come about. Today, we are going to walk you through how to set up a website / application build environment using WordPress®, Github, Gulp, and VSCODE. And hopefully you will want to use ENAC for all your Greensboro web design needs.

(THIS TUTORIAL IS FOR INTERMEDIATE DEVELOPERS)

As a developer sometimes it is hard to get things working together nicely, in this quick tutorial, we are going to show you how to get WordPress®, Github, Gulp and VSCODE to work seamlessly together to speed up the development process.

This is the process that we use to design and develop all of our sites.

First, set up the database you are going to be using in your /localhost/ XAMPP or WAMP folder. Install WordPress® into the folder and get everything up and running on your browser. After you get your test site running on your local folder, navigate to the folder with the IDE you are using, VSCODE looks like so:

ENAC's VSCODE file structure. Pittsburgh Web Design

 

Next we are going to use the normal “npm init” to initialize NPM. It will make our package.json file and set up your information. We have slimmed down the build for tutorial purposes so our gulpfile will look like so:

ENAC's Gulpfile Example. Pittsburgh Web Development

 

You will notice a couple things, we have commented out the SASS because we are not using it, and there are some changes in the structure of browsersync. Install all the npm packets from our gulpfile, or, if you have your own set of packets you like to work with, install them. I am going to quickly point out some differences. In the gulp task browser-sync, there is usually an IP address in the proxy area for this value. Since we are using WordPress®, we have changed that to the WordPress® file location. Also at the bottom of the screen, all we have to do is point to the theme location for the browser reload, not the whole app, this makes the packet run faster. You can include all your image and JS files we have just simplified it. Now you have a site, up and running, on your localhost that you can develop with Gulp build tools. Now it is time to add versioning. We use Github, so we are going to use that as an example. We initialized our Github and are about to make our first commit but we need to add some things so we do not overwrite config files. In your .gitignore file go ahead and place node_modules and wp-config.php in there. We are all finished now! We can work on a site in one area, use WordPress® exporter and save the file to the root structure, check it into Github, then check it out at another machine without overwriting the config file and causing issues. Yes, it may be somewhat of an inconvenience to reload the WordPress® site when you check it out, but after the initial setup it is very simple to work form machine to machine!

We hope you found this tutorial helpful. Programs we used can be found here:

XAMPP

VSCODE

NODEJS

WORDPRESS®

If you would like hire ENAC for your next Pittsburgh Business Website, or would like WordPress® training, contact us here!

Leave a Reply

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