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.
Task | Description |
$ gulp | The default task is an alias to the task $ gulp watch-reload , see more information below. |
$ gulp build | Build assets for use on production environments. |
$ gulp watch | Watches any changes to .scss and .js files and compile and minify them into development assets. |
$ gulp watch-reload | Same 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 curl
. Note 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.js
, Gulp
, 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