{"id":151967,"date":"2016-02-15T11:00:37","date_gmt":"2016-02-15T16:00:37","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=151967"},"modified":"2016-02-15T05:44:03","modified_gmt":"2016-02-15T10:44:03","slug":"gulp-for-wordpress","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/gulp-for-wordpress\/","title":{"rendered":"Using Gulp to Speed Up WordPress Development"},"content":{"rendered":"

Build tools let developers focus on efficient development rather than the nitty-gritty details that take away half your life but don’t add much to the project on their own. One such build tool is Gulp<\/a>.<\/p>\n

Gulp optimizes your theme’s images, concatenate your JS files, and processes your Sass\/LESS code automatically.<\/p>\n

In this article, I’ll show you how to get started and how you can use Gulp to speed up your development process.<\/p>\n

What is Gulp?<\/h2>\n

Gulp is a JavaScript-based build tool that uses Node to automate mundane tasks. The basic idea is to create triggers that perform a specific action.<\/p>\n

For example, any time you save a Sass file it is compiled into a CSS file you specify. Or any time you save a JS file all your JavaScript files are concatenated into a single file and that file is then minified.<\/p>\n

Sounds Good, How Do I Get Started?<\/h2>\n

You’ll need Node to run Gulp. This should be easy, just visit nodejs.org<\/a> and download and run the installer. Node will be installed, along with npm (node package manager), which you will use to grab node packages, such as Gulp.<\/p>\n

The next step is to install Gulp globally. You can do this by opening the terminal or command prompt in Windows (I will call both of them terminal from now on) and issuing the following command:<\/p>\n

Loading gist b694e334c67640509212900e2a243268<\/a>

Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n

This installs the Gulp command line interface so you can issue Gulp commands anywhere. You also<\/em>\u00a0need to install Gulp for your specific project. This is because each project will have different requirements. You won’t be minifying the same files, you won’t be using the same structure, you may not even use WordPress or PHP for all of your projects!<\/p>\n

But before we do that, let’s talk WordPress for a moment.<\/p>\n

Using Build Tools With WordPress<\/h2>\n

Most of our efforts will do one of two things: modify existing files or create new files based on existing ones. Many of the files we use for development will not<\/em> be used in the final product. If we build a theme using Sass for the stylesheet, the final CSS file is what will be shipped as part of the theme, because the original Sass files aren’t needed.<\/p>\n

There are two approaches you can take:<\/p>\n