In this post we will see how we can use Gulp to convert our SCSS file to CSS. To get more information on SASS check their official website.

NOTE: To see how to minify a JavaScript file using Gulp check the following post.

I will assume that you have Gulp installed on your system and that you are currently in your project’s root directory with package.json file ready ( To create a json file run npm init command in the root directory of your project).

To convert SCSS file to CSS we need to download Gulp plugin GULP-SASS as a dependency. We can download it as a development dependency since our conversion needs to be done at the development end and not on the production environment. Run the below command to download gulp-sass plugin and save it in your current project directory.

npm install --save-dev gulp-sass

The downloaded package will be saved in the node_modules folder.

Next we need to write our task in the ‘gulpfile.js’ file. Open it and write the following code.

var gulp=require('gulp');
var sass=require('gulp-sass');

gulp.task('scripts',function(){
	gulp.src('styles/*.scss')
	.pipe(sass())
	.pipe(gulp.dest('build/css'));
});
var gulp=require('gulp');
var sass=require('gulp-sass');

First we need to include or import gulp and gulp-sass in our code and save there references in the gulp and sass variables respectively. We require gulp since the task() function is in the gulp module.

gulp.task('style',function(){
	gulp.src('styles/*.scss')
	.pipe(sass())
	.pipe(gulp.dest('build/css'));
});

Next we need to call the task() method of the gulp module. This function accepts two parameters, first one the task name and second one is the function which will be called when this task runs. In our case the task name is ‘style’.

Inside the function we are calling the gulp.src() method, which accepts as parameter the path of the scss files that we need to be converted to css. By passing ‘styles/*.scss’ in the parameter we are telling the src() method to look for all the scss files in the styles folder.

Next we are connecting the output of the src() method to the sass() method by using pipe(). Pipe() method will take the result of the src() method and pass those values to the sass() method, whose task is to convert scss files to its css equivalent files. Again we will use the pipe() method to save the generated css files by connecting them to the dest() method of the gulp class. In dest() method we pass the path where our css files will get saved.

We can now run our task from the command prompt. Go ahead and run ‘gulp style’ task and you will see that directory build/css will be created with css files in it.

Related Posts