October 12, 2016 #advanced development #gulp

No matter what languages you’ve used in the past to development websites, you’ve no doubt had to complete menial, monotonous tasks image optimization, javascript minification, concatenation, compiling supersets like SCSS and CoffeeScript to their native counterparts, creating the final build… just to name a few.

Fortunately, build scripts such as Gulp and Grunt can take care of these rather boring tasks for you. All they require is a bit of setup and some command line know-how.

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 , 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.

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.

Note: It’s important that you have a working knowledge ofphp as this is the foundational language of WordPress for this series, which covers advanced topics aimed at developers. I’ll be referring to code snippets throughout this series.

Installing Gulp

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

To get started, first install Node using the handy installer on the main Node site .

Next, use the code below to install Gulp. That’s it!

A Note About Node and npm Packages

npm is a tool that can be used to install packages like Gulp. Most packages are meant to be installed locally they will only be available in the folder of the project you add them to.

npm uses a special file named package.json , which contains metadata about your project. It’s name, description, version and most importantly the packages that it uses.

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 package.json is available and anyone will be able to use the npm install command to get all prerequisites in a few seconds.

Some packages like Gulp can be installed globally. This is not a requirement, but it is convenient for tools, especially development tools, that we use all the time.

Installing Packages

We’ll be installing a few packages related to Gulp for this tutorial. The syntax to accomplish this is the following:

You can install one or more packages by separating their names with spaces. --save-dev or -D indicates that we’d like to save the packages as development dependencies. They will be placed in the package file for us.

Starting a New Project

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 index.php and a style.css file with the appropriate information, etc. We’ll also add a package.json file to store our dependencies.

Let’s set all that up within the terminal:

Issue these commands one-by-one. Note the && 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.

The npm init command is a wizard for the package.json file. It will ask you a series of questions and you can press Enter for each to use the defaults.

Advanced WordPress Development: Using Gulp to Streamline Your Workflow
Questions following the npm init command

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:

When you install your first dependency, you’ll see a new folder named node_modules . 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.

Advanced WordPress Development: Using Gulp to Streamline Your Workflow
The package.json file Gulp Basics

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 gulp optimize in the command line, Gulp should find all images within your project and optimize them.

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 gulpfile.js file, which contains all the information Gulp needs to perform its tasks.

Let’s create a gulpfile now with minimal information:

The first line imports Gulp itself. This is followed by our first task named “default.” When you type gulp into the command line the default task is run. We’ll be adding some code in there later to make some magic happen!

To create a task from start to finish we’ll need to follow a simple checklist:

Find a package that can perform the task, Install the package, Add it to the gulpfile, and Configure the task by setting the conditions and its options.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: GulpJavaJavaScriptWordGruntPHPCoffeeScriptCSS
本文标题:Advanced WordPress Development: Using Gulp to Streamline Your Workflow

技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(22)