Installing Gulp.js

Installing Gulp.js

Gulp.js is an open source JavaScript toolkit that is used for front-end tasks such as

  • converting SASS/LESS to CSS (browsers cannot read SASS/LESS files and therefore they have to be converted to CSS)
  • reloading browsers automatically when files are saved
  • optimising CSS,HTML, JavaScript and images
  • and many more

To use gulp.js, you have to have Node.js installed on your machine. To install Node.js, follow my tutorial.

When you have Node.js installed on your machine, install Gulp.js by typing the following command into command line and press enter

npm install gulp -g


 npm install

command used is a command that uses Node Package Manager (npm) to install Gulp onto your machine.



flag in this command tells npm to install Gulp globally onto your machine. This allows you to use the gulp command anywhere on your system.

Once you press enter, the installation will start. After installation you should see the line saying what version of gulp has been installed (in my case it is gulp 3.9.1) – Untitled.png

Don’t mind error messages asking to update version of minimatch as there is not much you can do about it. If you want to check what version of minimatch you have installed, type the following command into command line –

npm view minimatch version

If there is lower version than 3.0.2 installed, type the following command into command line –

npm install -g minimatch


Now, there is appropriate version installed, so if you type this command again –

npm view minimatch version

you will get the right version of minimatch –

Gulp.js is successfully installed on your computer and is ready to be used.

Install Node.js and NPM on Windows

Install Node.js and NPM on Windows

Node.js is useful javascript that makes developing websites much simpler. This means that by installing Node.js on your machine, you can quickly convert SASS to CSS, make HTML, JavaScript and graphic files smaller. By installing NPM on your machine, you can add many useful Node modules that will make your development work simpler. To find thousands of free packages to download, visit

To be able to work with Node.js, you must be type command line instructions therefore you must be comfortable with using command prompt, git shell etc.
If you are not comfortable with this, don’t worry just give it a go, everybody must start somewhere! I’ll walk you through simple installation process and if you would like to learn more, just follow my blog for more posts.

Download and install

  1. Download node.js
  2. Run the installer (the file you just downloaded)
  3. Follow the instructions (Accept the license agreement, click the NEXT button a few times and accept the default installation settings).
  4. This is the success message – Untitled.png
  5. Once it’s installed, you should get this folder structure in Start –Untitled.png
  6. After installation, you have to restart computer to be able to use Node.js

Test it!

Test Node

To check if node.js is really working, open Node.js command prompt by clicking on the icon –


node -v

This should give you installed version of Node.js such as v6.11.0 in my case –

There is also message at the top of the command prompt saying ‘Your environment has been set up for using Node.js 6.11.0 (x64) and npm.’ proving that we installed everything successfully.

Test NPM

To check if NPM is installed, type

npm -v

This should give you installed version of NPM such as 3.10.10 in my case –

Uninstalling Node.js and NPM

To uninstall Node.js and NPM –

  1. Open the Windows Control Panel
  2. Click the “Uninstall a program” option in “Programs”
  3. Select Node.js, and click the Uninstall link.

Download and install NPM package

Visit and find the package you would like to install by typing it to search bar on the top of the website –

Once you choose package you’d like to install, follow the instructions on the page.
(I’ll be using gulp-sass-themes package)

On the page, there are instructions what to do next – type

npm install gulp-sass-themes gulp-sass --save-dev

and press enter. Installation is in the process and all you have to do is wait for the installation to finish.

Once it’s done, you don’t need to do anything as it’s all installed for you.
When installation is running, NPM creates a folder named “node_modules”, where the package will be placed. All installed packages will be placed in this folder.

The project has a folder structure like this:


Setting up files with Sass

We have simple file structure that consists of css folder, images folder and index.html –


Create new folder called ‘scss’ and move style.css file from folder ‘css’ to newly created ‘scss’ folder. Rename it to ‘style.scss’.


When you open index.html in browser, css will be removed from the website. This is okay, nothing to worry about.

Focus is on ‘scss’ folder as all the sass code we will write in this folder and sass will output css for the browser into ‘css’ folder. This is because browsers cannot read sass code and sass compiler is what is needed to translate sass into plain css.

To do that, we need to set up ‘watch command’. This command will tell sass to watch commands in scss folder and automatically convert them into .css files in css folder.

  1. Open command prompt (type ‘cmd’ and press enter) and go to the right directory –
    cd desktop
    C:\Desktop\cd sass-test
  2. Once you get to the right directory, tell sass to watch the directory –
    C:\Desktop\sass-test\sass --watch scss:css

    This tells sass to watch everything that is in scss folder and compile it to .css file in css folder.
    When everything is set up correctly, you’ll get success message looking like this – e

  3. Go to css folder and check that sass created style.css and files where every sass code that we write in scss folder will be converted into plain .css.
  4. Now, our website will have css style added to it.
  5. To test if it works properly, open scss/style.scss file and change/add css code to it, then save it.
  6. Open css/style.css and you’ll see that the code has been changed/added here.
    You can also see what file has been changed in command prompt –
  7. We can tell sass to stop watching the project for changes by pressing crtl+c in command prompt

Important thing is NOT to close command prompt because it will stop watch and compiling process

Install Sass

Install Sass

Before you can start using Sass, you need to install it on your machine. I’m going to install Sass on Windows.

  1.  Install Ruby
    Ruby installer is the fastest way of getting Sass onto your Windows computer.
    Download it and follow the simple installation process.
  2. Open command prompt by typing ‘cmd’ and type
    gem install sass

    into command prompt. Press enter and the installation begins.

  3. After Sass is installed on your computer, you can double check if it is all properly installed by typing
    sass -v

    into command prompt.
    If everything is installed properly, this command will give you version of installed Sass –

    Sass 3.4.24 (Selective Steve)

Full example of the code