Setting up Sass in Gulp

Maxim van Veen
12-07-2017

In this article I’ll show you how to set up a Gulp file.

In order to install Gulp you need to have Node.js installed on your computer.

When you have Node.js installed you can install Gulp by running npm install gulp -g in your command line interface.

We use Node Package Manager (npm) to install Gulp. With -g we tell npm to install Gulp globally on your computer so that you can use the gulp command anywhere on your computer.

The next step is to create a folder in which we setup a Gulp project. Navigate with your command line interface to that directory and run npm init. With this we create a package.json. The package.json is used to store information about the project. Dependencies that we use in this project for example will be stored in the package.json. This makes it possible to easily install all the tasks that are used in a Gulp project.

After this we can run npm install gulp --save-dev, this tells npm to install Gulp into the project. By using --save-dev we store Gulp as a dev dependency in the package.json.

Now we you’ve installed Gulp we’re ready to install the first task.

We have to require Gulp. To to this we’ve to create a gulpfile.js. Make a new file called gulpfile.js and begin that file with var gulp = require('gulp');

Now we can install a gulp taks. Gulp-sass for example. This task converts Sass to CSS.

To install gulp-sass run npm install gulp-sass --save-dev in your command line interface.

To use this plugin we have to also require it in the gulpfile.js.

Write var sass = require('gulp-sass'); under the line where we require gulp.

The only thing left is telling gulp what files needs to be converted en where the output file needs to be stored.

We do that as follows;

gulp.task('sass', function(){
  return gulp.src('app/scss/styles.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
});

The file in gulp.src is the file that is going to be converted. This could be one file or multiple files.

You can select all .scss files in a directory by using “app/scss/*.scss” or “app/**/*.scss”.

In the first case all SCSS files in the folder scss are selected. In the second case all SCSS files in every folder inside the app folder are selected.

The gulp.dest is the output. In this case the output will be stored in the css folder inside the app folder.

LEAVE A REPLY

you might also like