Gulp - delay in updating files

Question

I am working on a JS Web App using multiple UI frameworks and Preprocessors like SASS,

I am using Gulp as a task runner but I am facing a strange behavior

for example: in my sass file

.class_name{
  text-align: left;
  padding-left: 10px;
  padding-right: 15px;

}

here is my gulp tasks

gulp.task('sass',function(){
gulp.src(['src/scss/base.scss',
        'src/scss/**/**/*.scss'
      ]).pipe(concat('styles.scss'))
      .pipe(sass())
      .pipe(gulp.dest('src/css'))
})

gulp.task('styles',['sass'], function () {
  return gulp.src(['src/css/styles.css',
        'src/css/libs/**/*.css'
      ])
 .pipe(concat('styles.css')) // Other post-processing.
 .pipe(gulp.dest('public/css')) // Output LTR stylesheets.
 .pipe(rtlcss()) // Convert to RTL.
 .pipe(rename({ suffix: '-rtl' })) // Append "-rtl" to the filename.
 .pipe(gulp.dest('public/css')); // Output RTL stylesheets.
});
gulp.task('watch',function () {

 gulp.watch('src/scss/**/**/*.scss',['styles']);

})


gulp.task('default',['styles','watch']);

when I update anything in my sass file for example change line 3 to padding-left:5px;

the result in styles.css is still the old value paddin-left:10px; if I change it on more time to padding-left:15px; the result is padding-left:5px; Why there is always one step delay in updating files !!!

Thanks in advance.

Answer 1

you should return result of saas

gulp.task('sass',function(){
   return gulp.src(['src/scss/base.scss',
        'src/scss/**/**/*.scss'
      ]).pipe(concat('styles.scss'))
      .pipe(sass())
      .pipe(gulp.dest('src/css'))
})

unless you return the style will not know when saas task finished