Gulp from Scratch: How to Compile and Minify SASS/SCSS

:: Support Me ::

:: Join the Forum ::

:: Tutorial Series ::

:: My Website ::

:: Follow me on ::

[tuleikhaus]

If you're following this in 2021, be aware "gulp-sass" has been deprecated & superseded: first to "dart-sass", which was itself later superseded by "sass". However, the library I ended up using is "gulp-dart-sass" which works natively with Aledadd's piping method. Here's the code that works for me. Notable differences are the "gulp-dart-sass" usage, newer recommended autoprefixer standards, and addition of "async" to the gulp.task function.

var gulp = require( 'gulp' );
var sass = require( 'gulp-dart-sass' );
var sourcemaps = require( 'gulp-sourcemaps' );
var rename = require( 'gulp-rename' );
var autoprefixer = require( 'gulp-autoprefixer' );

var styleSRC = './src/scss/**/*.scss';
var styleDIST = './dist/css/';

gulp.task('style', async function () {
return gulp.src( styleSRC )
.pipe( sourcemaps.init() )
.pipe( sass({ outputStyle: 'compressed' }).on( 'error', sass.logError) )
.pipe( autoprefixer({
overrideBrowserslist: [
"defaults",
"not IE 11",
"maintained node versions"
], cascade: false
}))
.pipe( rename({suffix: '.min'} ) )
.pipe( sourcemaps.write('./' ) )
.pipe( gulp.dest( styleDIST ) );
});

[hajjejmohamed]

if anyone having problem with 'gulp' command is not recognized try this command before
npm install -g gulp-cli
Thank you Alex for this series of tutorial you are my Guru

[jeremyanderson]

This has been a tremendous help, Alessandro! Thank you! I've been quite stuck on getting Dropzone JS, Chart JS, etc. installed via npm, and this walk through is helping me make sense of it. Thanks for the time and effort you put into this!

[aaronkhochareun]

"Did you forget to signal async completion?"

With Gulp 4, we need to explicitely signal task completion for each function:

gulp.task('style', function(done) {
gulp.src(styleSRC)
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(styleDIST));
done();
});

[rufatzeynalli]

Such a great tutorial playlist (about sass and gulp). I love it. Thank you, Man. Great job.

[skepticalCoder]

Very useful tutorial. Thanks, man! I got an error about styles task not completing due to an await async error. In the most recent version, it seems you need to return the function. So adding 'return'
return gulp.src( styleSRC )
.pipe( sass({.... etc etc
solved that issue. Thanks again!

[LuizSantos-yeqm]

Alessandro, my best congratulations for your simple and amazing tutorial!! Helped me a lot

[brendanstrong]

Thanks a lot for this, made it super simple!

[totoff]

Excellent video, thank you! May I ask which Sublime theme and autocomplete plugin you are using? Thanks.

[makebehphilip]

Thanks for the turorials Alecad.
I encountered an error while installing "gulp-sass". After reading the error messages it stated that "python could not be found". I simply installed the latest version of Python and reran the gulp-sass installation successfully.
I'm just sharing my experience to support anyone out there who will encounter the same problem.
Peace!

[AhmedIbrahim-fiso]

it didint work for me 😭😭😭😭
it says gulp is not recognized as the name of cmdlet

[marcelomachadocardoso]

Very cool tutorial mr. Naveed, tankyou oportunity study.

[akpotororodje]

My Gulp Styles is not compiling, please I need solution

[robburns]

Hi Alex. I've been following your WP Plugin From Scratch tutorial and really enjoying it. Its like binge watching on netflix. I keep telling myself... 'Ok Just one more...'. Anyway... I got to #19 and it brought me here to the gulp tutorials.
I've encountered a number of error msgs while using gulp and have been able to find solutions in the comments (the folks commenting are pretty awesome too). Haven't seen the solution for this one yet tho...
When calling the "gulp styles" method an error is returned...
"Did you forget to signal async completion?"
I'm running Windows 7 and by the time I came to your vids, Gulp 4.0.0 is the latest version. I've followed your code to the letter and getting the same results until this one.
I saw in the comments you mentioned "These videos were done with Gulp v3, if you're using Gulp v4 there are some breaking changes."
This has got me stuck. Has anyone found a solution for this yet?
Is the v3 ~ v4 difference going to continue to be problematic for this project?
Also I saw that you changed things up and are now using webpack. Does that have any bearing on what we're doing here?
Thanks for sharing your insights and knowledge.

[adrian]

Hi Alex, when I run the "style command" I am getting an error saying the command not found. I am using Git bash for windows. I have tried running the command with the gulp (gulp style) and without (style) and get the same error. I have doubled and tripled check the code and it is exactly as yours. Am I missing an install component in order to run the "gulp style" command?

[aminahsc]

What a beautiful tutorial! Much thanks. :-)

[maria-gssx]

Hi, could you do an updated version on this? Been trying to follow a bunch of gulp tutorials but keep running into errors.

[bonkedyan]

Hi Alessandro...followed the gulp tutorial. I get the following error message: Did you forget to signal async completion? but it outputs the dist css file. no css changes on browser.

[cbx]

keep getting this issue no matter what i do

[coliwong]

Hi, mate.Thanks for you great video .Gulp automatic workflow really helpful and I have been using for a while .browserify was used for loading js lib but it wasn't maintained.Do you have another plugin instead .Thanks