Gulp ties together the front-end tasks that are run on the Just Eat web platform, such as Sass compilation and Babel transpilation.
Gulp and its associated plugins can be managed via NPM or Yarn package managers. We recomemnd using Yarn, which is why all fozzie modules come with a yarn.lock file at their root.
We manage all of our gulp tasks across projects with a shared set of configurable tasks using the gulp-build-fozzie module.
For details on how to use and figure this module, take a look at the module's documentation.
Here we document two ways of running Gulp tasks locally: using Visual Studio and its built-in tools, or running Gulp through the command line.
The first method of using Gulp is straight through the Command Line or Terminal. To do this simply:
Installing this should be as simple as going to the Node.js website, downloading the latest LTS Version (which should be an even numbered version), and running this installer. Go with all the defaults throughout the install process and this should install Node and NPM on your system.
Install Gulp
Open up a command prompt or terminal window and enter npm install gulp -g. This should install Gulp so that Visual Studio can do its magic.
Install Yarn
We currently use Yarn for our project dependencies. Yarn is very similar to NPM with some small differences in performance and features.
To install yarn check out the current recommended process in their documentation for your platform.
Install the project dependencies
Navigate to the directory containing the projects package.json using your Command Prompt or Terminal window and then run yarn. Yarn will then install the project dependencies locally on your machine.
You should now be able to run gulp from the directory containing the projects package.json.
By default, Gulp will run the default task, but you can run any of the project tasks by appending the name of the task to your gulp call. For example, runninggulp css will run the task that compiles the CSS files.
For a full list of tasks avilable, take a look at the modules documentation.
Here we document the steps needed to successfully run Gulp using Visual Studio 2017.
To get up and running with using Gulp in your setup of Visual Studio, just carry out the following steps:
Node.js – and its bundled package manager npm – are needed to run Gulp tasks with VS 2013 or VS 2015 Professional.
Installing this should be as simple as going to the Node.js website, downloading the latest LTS Version (which should be an even numbered version), and running this installer. Go with all the defaults throughout the install process and this should install Node and NPM (its package manager) on your system.
Install Gulp
Open up a command prompt or terminal window and enter npm install gulp -g. This should install Gulp so that Visual Studio can do its magic.
Check and Install the project dependencies
This should be done automatically by Visual Studio. To check if this is the case, look for a node_modules folder in the same directory as the `package.json of your project.
If there isn't a node_modules folder, navigate to the directory containing the projects package.json using a Command Prompt or Terminal window and then run npm install. NPM will then install the project dependencies locally on your machine. If you see any warnings in your command prompt during this step, don’t worry about them, they shouldn’t affect the Gulp build.
Prioritise local Node config in VS
Ok, so that’s the dependencies you need installed. There is just one more option that needs adjusting within Visual Studio.
In the Visual Studio Menu Bar, go to Tools –> Options –> Projects and Solutions –> External Web Tools. Then, move the $(PATH) reference in the displayed list to the top of the list. It should look like this.
This prioritises your own locally installed version of Node over that which comes along with Visual Studio (which can become out-of-date).
…and that’s it!
If you don’t plan on editing any CSS yourself, you can forget Gulp even exists and it’ll automatically do its thing when you build the project through Visual Studio.
We use Yarn – a Node Package Manager – to install and manage the Gulp packages that we use. To install Yarn, take a look at their installation guide for your platform,
To see a full list of the packages we use, check out the gulp-build-fozzie package.json.
When using Gulp for the first time, you will need to install these dependencies through Visual Studio, or by running the following command in a command prompt or terminal:
yarn
To see a full list of the tasks that are available as part of the gulp-build-fozzie module, check out the module documentation.
Alternatively, run gulp --tasks in your Command Prompt or Terminal in the same directory as your package.json to output a list of all available tasks.
Note that some tasks will require some configuration – such as telling the module which directories should be compiled. All of these configuration details are explained in the documentation as well.