Learning Gulp #5 - Compiling Sass With Gulp

Here we show you how to build Sass into your Styles task by compiling your Sass with Gulp.

Subscribe to Level Up Pro for extra features!

Subscribe to the Level Up Newsletter

For questions post in the comments or visit:

To Support Level Up Tuts:

Simple cloud hosting, built for developers.:

[RSSmc]

For anyone having issues compiling and compressing SASS, gulp-ruby-sass has changed it's syntax since version 1.x. The below should work on versions 1.x

gulp.task('styles', function () {
return sass('scss/**/*.scss', { style: 'compressed' })
.on('error', sass.logError)
.pipe(gulp.dest('css'));
});

[robertp]

here is the updated version

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

[frontenddeveloper]

hi i like your videos for gulp. These are very helpful. I want to know how to use sourcemap for css files and if you have nested directories in your scss/js/html folder

[christiansenmarcus]

Not sure if the documentation has changed when compiling Sass. Didn't get it to work. The NPM package documentation used,

gulp.task('sass', function () {
return sass('source/file.scss')
.on('error', sass.logError)
.pipe(gulp.dest('result'));
});

, which worked 100%

[umbertotarantino]

Can you tell me what is the difference between 'gulp-sass' and 'gulp-ruby-sass'? Thank you.

[rvlglobe]

Yes indeed the package syntax has changed for gulp-ruby-sass. It now uses:

return


instead of:


.pipe(sass())

[lektin]

Hi, Scott. I am wondering which HTML boilerplate you are using in this series, can you share with us?
Thank you :)

[MisheruKoby]

Thank you for this tutorial. I had some issues compiling this example with Gulp. But I did some research and discovered with the new version of Gulp-Ruby-Sass, gulp.src is now depreciated and to use return styles('source file') instead. So I made the necessary changes and got gulp to build my .scss file, but it isn't compiling into a .css file. What am I doing wrong?

[raj]

for watching the sass in style why do you use 2 '**' ? can you not use scss/*.scss?

thanks

[aveesp]

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

is not working showing error: 'sass' is not recognized as an internal or external command,
operable program or batch file.

pleas give me solution

[GeraintPalmer]

Hay, this is out of date. gulp-ruby-sass has change the way it loads source file since v1.0.0

so instead of

you need to do

and sass('scss', { style: etc

[thisguymartin]

This is going to sound like a dumb question but is gulp-ruby-sass only for when you use Ruby. I have web app and I am not touching Ruby will this be a useless plug in

[sweetmaanu]

gulp.task('mystyle', function(){
gulp.src('sass/app.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
not working for me 😔

[beats_n_bytes]

hello, maybe it is useful to change the tutorial with the code of +Robert P this works for me

[lostandfownd]

Really better than Grunt ... Nice job guyz 

[azeetmaharjan]

bro this mess up... what i need to install ... link plz ... its mess up when i do npm install --save-dev gulp-ruby-sass

[EazyGui]

i am always getting : Arguments to path.join must be strings

my gulp task

gulp.task('style', function(){
    //console.log("Styles Task");
    sass('scss/sam1.scss')
   
   
    
});
  

any thoughts pls?

[ChewLoops]

For some reason, when I try to specify that I want the task to run on all of my sass files, I get this error: 

Errno::ENOENT: No such file or directory - scss/*.scss

Here is my code: 
gulp.task('sass', function(){
sass('scss/*.scss', {style: 'compressed'})

});

[JuanDavidMaya]

Guy if you are in Windows:

1. Install Ruby
2. Add Ruby binaries to the Path
3. Execute in the console: "gem install sass"
4. change code for:

gulp.task('styles', function() {
return sass('scss/*.scss', { style: 'compressed' })

});

[JohnDrach]

If anybody is having issue getting this to work this worked for me:

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