How To Install Gulp On Windows 10

Installing Gulp for the first time can be tricky, this tutorial will guide you through every step of the installation. The steps below are for the installation of Gulp on a Windows 10 PC. If you have any issues installing Gulp, enter a full description of the issue in the comments section at the bottom of this page.

#1 Install NPM ( Node.js )

1. Download the 64 bits version of NPM
2. Install it anywhere you want, by default: C:\Program Files\nodejs
3. On your computer go to Control Panel -> System -> Advanced system settings -> Environment Variables
4. Select PATH and choose to edit it.
5. If the PATH variable is empty, change it to this ( replacing {YOUR USERNAME HERE} with your username for your windows account ): C:\Users\{YOUR USERNAME HERE}\AppData\Roaming\npm;C:\Program Files\nodejs
   If the PATH variable already contains C:\Users\{YOUR USERNAME HERE}\AppData\Roaming\npm, append the following right after: ;C:\Program Files\nodejs
6. Open your file explorer and navigate to C:\Users\{YOUR USERNAME HERE}\AppData\Roaming You will notice that there is no /npm/ folder, simply create the folder by right clicking and selecting “add new folder” then name it “npm”
7. Restart your command line or open one by clicking search at the bottom and typing in “cmd”, you can check if NPM has been successfully installed by running npm -v, This should return a version number

#2 Create your gulpfile.js

A Javascript file is required to run gulp tasks as they will need to be configured.

Create a file named gulpfile.js in the folder which you would like to use Gulp and add the following:

//  Require Gulp into file and define the variable
var gulp = require('gulp');
//  Run the example task, if installed correctly and "gulp talktome" is ran, "Hello From Zestcode" should be printed in the logs
gulp.task('talktome', function() {
console.log('Hello From Zestcode');
});


#3 Install Gulp

To install Gulp, open the terminal in the same directory you created the gulpfile.js file and run npm i gulp --save-dev, once it has finished running type gulp talktome in to the command line. Hello From Zestcode should appear in the terminal. If it does, congratulations! You have successfully installed NPM & Gulp.

#4 Finding & Installing Custom Packages

Now you have Gulp running and working in your folder, you can begin to look at installing some custom packages to create some task management functions such as:

• Sass compilation
• JS Minification
• FTP Uploads
• Image Compression
• Copying Assets
• Error Checking

You can view all avaliable NPM packages here.