CODEWITHSUNDEEP
sassgulp
Person
Person

Reputation: 2269

Gulp doesn't compile @import sass files

I'm trying to make Gulp compile my sass files. It sees changes in main.sass file but if I @import files it doesn't see changes in them unless I restart gulp.

Here is my gulpfile

var gulp = require('gulp'),
      sass = require('gulp-ruby-sass'),
      autoprefixer = require('gulp-autoprefixer'),
      browserSync = require('browser-sync').create(),
      jade = require('gulp-jade');

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir:'./'
        }
    });
});

// Compiling SASS to CSS 
gulp.task('styles', function () {
  return sass('assets/sass/main.sass')
    .on('error', sass.logError)
  .pipe(autoprefixer({
    browsers: ['last 3 versions','> 5%'],
    cascade: false
  }))
    .pipe(gulp.dest('assets/css/'))
    .pipe(browserSync.stream());

});
//HTML 
gulp.task('templates', function() {
  var YOUR_LOCALS = {};

  gulp.src('./*.jade')
    .pipe(jade({
      locals: YOUR_LOCALS,
      pretty: true
    }))
    .pipe(gulp.dest('./'))
});

//Default task
gulp.task('default', ['styles', 'watch', 'browser-sync', 'templates']);

gulp.task('watch', function(){
    gulp.watch('*.html').on('change', browserSync.reload);
    gulp.watch('*.jade').on('change', browserSync.reload);
    gulp.watch('*.css').on('change', browserSync.reload);
    gulp.watch('assets/sass/main.sass', ['styles']);
    gulp.watch('*.jade', ['templates']);
})

And these is the structure of my project
enter image description here

Upvotes: 0

Views: 497

Answers (1)

Sven Schoenung
Sven Schoenung

Reputation: 30574

You're only watching for changes to assets/sass/main.sass. You need to watch for changes to any .sass file below assets/sass:

gulp.watch('assets/sass/**/*.sass', ['styles']);

Instead of:

gulp.watch('assets/sass/main.sass', ['styles']);

Upvotes: 3

Related Questions