CODEWITHSUNDEEP
node.jssassgulpgulp-watch
Abhishek Ghadge
Abhishek Ghadge

Reputation: 435

Gulp won't recompile sass when changes are made

I have created some tasks to recompile the sass with browser-sync whenever changes are made. My gulp file is as follows:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');

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

gulp.task('sass:watch', function() {
    gulp.watch('./css/*.scss', ['sass']);
});

gulp.task('browser-sync', function() {
    var files = [
        './*.html',
        './css/*.css',
        './img/*.{png,jpg,gif}',
        './js/*.js'
    ];

    browserSync.init(files, {
        server: {
            baseDir: "./"
        }
    });

});


gulp.task('default', gulp.series('browser-sync', function() {
    gulp.start('sass:watch');
}));

I am using node version 12.16.1, gulp-sass version 4.1.0, gulp-cli version 2.3.0, gulp local version 4.0.2 and browser-sync version 2.26.7.

Upvotes: 0

Views: 1057

Answers (2)

Mark
Mark

Reputation: 180641

Change this

// gulp.task('default', gulp.series('browser-sync', function() {
//     gulp.start('sass:watch');
// }));

to

gulp.task('default', gulp.series('browser-sync', 'sass:watch'));

I seriously doubt that gulp v4 supports gulp.start.

Also change to this:

gulp.task('browser-sync', function(done) {   // added done here
    var files = [
        './*.html',
        './css/*.css',
        './img/*.{png,jpg,gif}',
        './js/*.js'
    ];

    browserSync.init(files, {
        server: {
            baseDir: "./"
        }
    });
  done();                                    // called done() here
});

When I ran your code I noticed that the sass:watch task was never starting, hence you were not watching any files at all. Here is what you should have seen in your terminal:

[21:26:21] Using gulpfile ~\OneDrive\Test Bed\simple\gulpfile.js
[21:26:21] Starting 'default'...
[21:26:21] Starting 'browser-sync'...
[21:26:21] Finished 'browser-sync' after 164 ms
[21:26:21] Starting 'sass:watch'...         // this line missing when running your code
[Browsersync] Access URLs:
 -----------------------------------
       Local: http://localhost:3000
    External: http://10.0.0.186:3000
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -----------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...

Don't be fooled by the last line, browser-sync always spits that out. The reason why the sass:watch task was not starting was because gulp could never get past the browser-sync task - you have to signal gulp somehow that the task has completed and done is one way to do that. Then gulp can go to the next task, which was sass:watch. See gulp: async completion.

You also needed to make the change you noted in your comment gulp.watch('./css/*.scss', gulp.series('scss'));

There is nothing else wrong with your code - it runs perfectly fine for me.

Upvotes: 2

Khondoker Zahidul Hossain
Khondoker Zahidul Hossain

Reputation: 453

Your Gulpfile isn't watching the sass files when changes are made. It's only looking for CSS changes. This is part of my Gulp task function to look for SCSS file changes

function serve() {
  browserSync.init({
    open: false,
    port: 8000,
    server: {
      baseDir: 'src/',
      index: 'index.html'
    },
  });
  gulp.watch(paths.scss.src, gulp.series([compileSCSS]));
}

And this is my SCSS compile function

function compileSCSS() {
  return gulp
    .src('./src/scss/style.scss')
    .pipe(plugins.rename('style.css'))
    .pipe(gulp.dest('./src/css/'));
}

I have prepared a Gulp function with many required tools. You can check here https://gist.github.com/choyan/ab034dc0539942ee0d8f0ab9788d790f

Upvotes: 1

Related Questions