This is the fifth post in our six-part series focusing on WordPress for advanced developers. This series follows on from our popular WordPress Development for Intermediate Users<\/a>, which introduced you to some meaty coding topics, including theme development in detail, making themes customizer-ready, building plugins, custom post types and taxonomies, queries and loops, custom fields and metadata, and localization.<\/p>\n In this tutorial, we’ll focus on how you can make the most of Gulp; how you can delegate common tasks to Gulp so you can concentrate on more important tasks like actually coding.<\/p>\n Note: It\u2019s important that you have a working knowledge of PHP as this is the foundational language of WordPress for this series, which covers advanced topics aimed at developers. I\u2019ll be referring to code snippets throughout this series.<\/em><\/p>\n <\/p>\n Gulp can be installed easily with npm, which is short for Node Package Manager. Node itself is a hugely popular and wonderfully useful JavaScript runtime environment, which includes npm.To get started first install Node using the handy installer on the<\/p>\n To get started, first install Node using the handy installer on the main Node site<\/a>.<\/p>\n Next, use the code below to install Gulp. That’s it!<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n npm is a tool that can be used to install packages like Gulp. Most packages are meant to be installed locally \u2013\u00a0they will only be available in the folder of the project you add them to.<\/p>\n npm uses a special file named As a result, Node projects are very agile. You don’t need to share all the packages used or check them into version control. Just make sure Some packages \u2013 like Gulp \u2013 can be installed globally. This is not a requirement, but it is convenient for tools, especially development tools, that we use all the time.<\/p>\n We’ll be installing a few packages related to Gulp for this tutorial. The syntax to accomplish this is the following:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n You can install one or more packages by separating their names with spaces. For our first example, we’ll create a WordPress theme. You should know how to do that by now: create a new folder in the themes directory, add an Let’s set all that up within the terminal:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Issue these commands one-by-one. Note the The We’ll need to install Gulp locally as well to make sure we can use it within our project. The following command will take care of it for us:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n When you install your first dependency, you’ll see a new folder named node_modules<\/em>. This will contain hordes of packages (each one you install will have multiple dependencies of its own). You do not need to add this to your repository; all that is needed is the package file.<\/p>\n Gulp is essentially a task runner. You define a condition when a task should run and then define exactly what the task should do. For example: if you run Since Gulp is a framework and not a magic solution to everything, you need to tell it what the conditions are and what to do when they are met. You use the Let’s create a gulpfile now with minimal information:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n The first line imports Gulp itself. This is followed by our first task named “default.” When you type To create a task from start to finish we’ll need to follow a simple checklist:<\/p>\n Let’s follow the steps above and make the image optimization happen. But before we do that, let’s add a A quick Google search turned up the gulp-imagemin<\/a> package, which minifies PNG, GIF and JPG images. Perfect! Installation and usage instructions are usually available on-site. To install this plugin use the following command:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n To add it to the gulpfile we’ll include it right under our initial inclusion of Gulp itself:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Finally, we need to define a condition \u2013 when a task is run \u2013 and tell Gulp what to do. Here’s the code for a new task named “optimize-images”:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Using the We’re then “piping” the contents of all matched files into a function named We pipe the received stream to the If you run the I think the example explains it well, but I want to reiterate and add some additional information. The general process behind a gulp task is the following:<\/p>\n Let’s look at processing SASS files as another example. Here’s how the algorithm above could be applied if we wanted to compile all our sass files, automatically add vendor prefixes and minify the result:<\/p>\n Let’s make that happen in Gulp. We’ll need three packages:<\/p>\n We can install them in one go using the following command:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Next, let’s add them to our gulpfile right at the top<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n We should also add some Sass to our theme. Let’s create a Sass file in the main directory called Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Finally, we need to create the task which will perform all the actions we need. Here’s the full code with the explanation underneath.<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n I’ve taken all the SCSS files in the root directory, piped them to the Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n As you can see, everything has been minified \u2013 the variable has been replaced with its value and vendor prefixes have been added where necessary.<\/p>\n To come up with this code I went to the documentation of each and copy-pasted the pipe part of the example, it really as that simple. The commands may have some options worth looking into but most work fine out-of-the-box.<\/p>\n By issuing our commands we’ve already come a long way. We can get Gulp to do whatever we want as long as we find the correct package and add it to our Gulpfile. However, we can do more.<\/p>\n When developing, especially CSS, we tend to save and modify a lot. We would need to issue the We essentially need to add a new directive: when a file within the specified set changes, run a task.<\/p>\nInstalling Gulp<\/h3>\n
A Note About Node and npm Packages<\/h3>\n
package.json<\/code>, which contains metadata about your project. It’s name, description, version and \u2013 most importantly \u2013 the packages that it uses.<\/p>\npackage.json<\/code>\u00a0is available and anyone will be able to use the npm install<\/code> command to get all prerequisites in a few seconds.<\/p>\nInstalling Packages<\/h4>\n
--save-dev<\/code> or -D<\/code> indicates that we’d like to save the packages as development dependencies. They will be placed in the package file for us.<\/p>\nStarting a New Project<\/h3>\n
index.php<\/code> and a style.css<\/code> file with the appropriate information, etc. We’ll also add a package.json<\/code> file to store our dependencies.<\/p>\n&&<\/code> in the first command. This allows me to issue a second command, which means that the first line will create a directory and immediately switch to it as well.<\/p>\nnpm init<\/code> command is a wizard for the package.json<\/code> file. It will ask you a series of questions and you can press Enter<\/strong> for each to use the defaults.<\/p>\n![\"Questions](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/10\/npm-init.png\")
![\"The](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/10\/package.png\")
Gulp Basics<\/h3>\n
gulp optimize<\/code> in the command line, Gulp should find all images within your project and optimize them.<\/p>\ngulpfile.js<\/code> file, which contains all the information Gulp needs to perform its tasks.<\/p>\ngulp<\/code> into the command line the default task is run. We’ll be adding some code in there later to make some magic happen!<\/p>\n\n
Your First Gulp Task<\/h3>\n
screenshot.png<\/code> image to our theme. I used a photo from Unsplash<\/a>, which I cropped to 880×660, the recommended size for this file. It ended up being 1MB.<\/p>\nsrc()<\/code> function, I told Gulp what files to sort through when searching for images. We’re looking for all GIF, JPG, JPEG and PNG files in the root directory and all files in the images directory.<\/p>\nimagemin()<\/code>\u00a0which we imported at the top of the file; this is the package we installed earlier. This function will modify the stream and pass it on.<\/p>\ndest()<\/code> function which describes the output location for the files. The given value will overwrite the original files with the optimized version.<\/p>\ngulp optimize-images<\/code> command in the terminal you should see the following output and find that your image has decreased in size:<\/p>\n![\"Gulp](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/10\/imagemin.png\")
How Gulp Works<\/h3>\n
\n
\n
\n
style.scss<\/code> with the following content:<\/p>\nsass()<\/code> function, followed by the autoprefixer, followed by the cleanCSS function and finally I piped everything to the main directory which will result in style.scss<\/code> being output to style.css<\/code>. The resulting CSS is the following:<\/p>\nWatching Files<\/h3>\n
gulp css<\/code> command continuously. Gulp has a great mechanism called watching which allow us to detect changes in files and automatically issue commands. We can build this in on top of everything we’ve done already.<\/p>\n
![\"Gulp](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/10\/gulp-watch.png\")