Developer tools

Product projects, such as plugin or themes available to the general public, use NPM as dependency manager and Gulp as task runner.

On this section we’ll walk through the installation of the development tools and dependencies and how to run various operations with Gulp tasks.

Gulp tasks

Gulp allows us to automate repetitive tasks such as compiling/transpiling SASS and JS into production ready assets or reloading the page on your browser each time a change is made to the code.

Here you’ll find information about the gulp tasks on this project and how to use them.

TaskDescription
$ gulpThe default task is an alias to the task $ gulp watch-reload, see more information below.
$ gulp buildBuild assets for use on production environments.
$ gulp watchWatches any changes to .scss and .js files and compile and minify them into development assets.
$ gulp watch-reloadSame as $ gulp watch , but will also reload the page on your browser so you don’t have to.

Installing Node.js Using NVM (on Linux or MacOS)

Alternatively to installing Node.js with apt we’ll use a tool called nvm, which stands for “Node.js Version Manager”. Rather than working at the operating system level, nvm works at the level of an independent directory within your home directory. This means that you can install multiple self-contained versions of Node.js without affecting the entire system.

Controlling your environment with nvm allows you to access the newest versions of Node.js and retain and manage previous releases. 

To download the nvm installation script from the project’s GitHub page, you can use curlNote that the version number may differ from what is used here, please visit the project’s GitHub page to get command for the latest version:

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

It will install the software into a subdirectory of your home directory at ~/.nvm. It will also add the necessary lines to your ~/.profile file to use the file.

To gain access to the nvm functionality, you’ll need to either log out and log back in again or source the ~/.profile file so that your current session knows about the changes:

$ source ~/.profile

With nvm installed, you can now install isolated Node.js versions. For information about the versions of Node.js that are available, type:

$ nvm ls-remote

You should see an output similar to:

# Output
. . .
         v8.11.1   (Latest LTS: Carbon)
         v9.0.0
         v9.1.0
         v9.2.0
. . .

At the time of writing this guide we use version v10.7.0 on our development environments, a newer version might or might not work on certain projects so we recommend consulting the lead developer for the project you are going to work on for the version they currently use.

You can install the appropriate Node.js version by typing:

$ nvm install 10.7.0

Usually, nvm will switch to use the most recently installed version. You can tell nvm to use the version you just downloaded by typing:

$ nvm use 10.7.0

When you install Node.js using nvm, the executable is called node. You can see the version currently being used by the shell by typing:

$ node -v

You should see an output similar to:

# Output
v10.7.0

If you have multiple Node.js versions, you can see what is installed by typing:

$ nvm ls

You can now install Node.js packages using npm install <package_name>. If you’d like to install a module globally, as we do for some packages on our projects, making it available to other projects using the same version of Node.js, you can add the -g flag to the command:

$ npm install -g browser-sync

You can learn more about the options available to you with nvm by typing:

$ nvm help

Installing global Node packages

Make sure you have followed the development environment installation guide and have installed Node.jsGulp, and Browser-Sync on your system globally.

# Check if Gulp and Browser-sync are installed
$ gulp -v
$ browser-sync --version

If you haven’t done yet, install Gulp and Browser-sync globally by typing the commands below on your terminal:

# Install Gulp and Browser-sync globally
$ npm install -g gulp
$ npm install -g browser-sync

Now you can install the project dependencies using the command npm install inside the theme/plugin root folder.

# Install Node.js packages
$ cd path/to/project/folder
$ npm install