0

I'm creating a project with project with SCSS. I have scaffolded a project with Yeoman and this far everything has worked fine. Now the SCSS preprocessor and livereload is extremely slow.

This is my Gruntfile.js watch task:

watch: { 
    sass: {
        files: ['<%= yeoman.app %>/_/css/**/*.{scss,sass}'],
        tasks: ['sass:server']
    },
    livereload: {
        options: {livereload: true},
        files: [
            '<%= yeoman.app %>/_/css/**/*.css',
            '<%= yeoman.app %>/_/css/*.css',
            '<%= yeoman.app %>/_/js/**/*',
            '<%= yeoman.app %>/script/*.js',
            '<%= yeoman.app %>/_/img/**/*',
            '<%= yeoman.app %>/*.php',
            '<%= yeoman.app %>/**/*.php'
        ]
    }
}

And this is my watch sass task:

sass: {
    server: {
        options: {
            sourcemap: true,
            debugInfo: true,
            lineNumbers: true,
            style: 'expanded'
        },
        files : [{
            expand: true,
            cwd: '<%= yeoman.app %>/_/css',
            src: '**/*.scss',
            dest: '<%= yeoman.app %>/_/css',
            ext: '.css'
        }]
    },
    dist: {
        ...
    }
},

I have main.scss file where is most of my css. I tried to make another, smaller .scss file thinking that maybe smaller file loads faster. It is preprocessed almost instantly, but the page is livereloaded only after the main.scss is processed to main.css.

My questions are:

  • How should I arrange my Gruntfile.js to make livereload faster?
  • Why is the livereload not launched when smaller-file.scss is preprocessed and saved to disk as smaller-file.css?
  • How can I make my sass.server function so that it only processes the file which is edited, not all of the files set in the source?
Jaakko Karhu
  • 2,298
  • 4
  • 28
  • 41

1 Answers1

1

Actually this wasn't about Gruntfile.js at all. I was importing the whole bootstrap on top of my main.scss, so obviously it takes a lot of time to preprocess that.

@import "../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";

Now I just grab the parts of bootstrap I really need.

Jaakko Karhu
  • 2,298
  • 4
  • 28
  • 41