Grunt SASS Watch not working

Question

I have a grunt file as shown below. The problem I am having is when I change the contents of a .scss file, grunt watch sass does not trigger a refresh. Is there something obvious that I am doing wrong?

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    build : {
        dest: '_site'
    },

    sass: {
      dist: {
        options: {
          style: 'compressed',
          trace: true
        },
        files: {
          'css/main.css': '_scss/main.scss',
          'css/ie8.css': '_scss/ie8.scss',
          'css/ie9.css': '_scss/ie9.scss'
        }
      }
    },

    shell: {
      jekyllBuild: {
        command: 'jekyll build'
      },
      jekyllServe: {
        command: 'jekyll serve'
      }
    },

    watch: {
      files: ['_layouts/*.html', '*.md', '*.yml'],
      // SASS watch does not work  :(
      sass: {
        files: ['_scss/**/*.scss'],
        tasks: ['sass:dist'] // This should be sass'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-shell');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-jekyll');

  // Compiles SASS, Builds Jekyll, and Serves Jekyll.
  grunt.registerTask('default', ['sass:dist', 'shell:jekyllBuild', 'shell:jekyllServe']);
}

Also when I change a .scss file, the terminal indicates that a file has been changed but grunt watch sass does not run.

Regenerating: 1 file(s) changed at 2015-08-05 13:14:50 ...done in 0.017384 seconds.

EDIT:

I figured it out. What I was attempting to do was use grunt to watch my sass files and re-compile when changes were made. I also wanted jekyll to serve & watch the html files for changes. These things cannot be ran concurrently which was what I was attempting to do. I did happen to find a helper called 'load-grunt-tasks' which allows for concurrent tasks to be ran by adding the following code to the gruntfile:

concurrent: {
    serve: [
        'sass',
        'watch',
        'shell:jekyllServe'
    ],
    options: {
        logConcurrentOutput: true
    }
},

// Then register the following tasks
// Register the grunt serve task
grunt.registerTask('serve', ['concurrent:serve']);

// Then run the following from the terminal: 
grunt serve

Answer 1

At first some general troubleshooting:

• Did you made sure all dependencies are properly installed? npm install
• Are all dependencies up to date? npm update
• I see that you're using Jekyll, why do you introduce Grunt at this point? Jekyll comes with its own watch task. This may produce some errors.

---

watch: {
    files: ['_layouts/*.html', '*.md', '*.yml'],
    // SASS watch does not work  :(
    sass: {
        files: ['_scss/**/*.scss'],
        tasks: ['sass:dist']
    }
}

This looks kinda broken to me. What is watch supposed to do with files: [...]? There is no task to be executed while watching over these files. You don't have any grunt tasks which would modify .html, .md or .yml files, so why do you even list them?

Apart from that, it looks fine to me.

Answer 2

Is there a reason that you're using Grunt for this? Jekyll comes with a perfectly fine Sass watcher, and if you want to carry out any further pre/post-processing tasks you can do so using Jekyll's plugin system.

You can place your .scss/.sass files in _sass, and call them from a .scss/.sass file located anywhere else that starts with some YAML frontmatter.

A common structure would be something like this:

- _scss/
  - normalize.scss
  - typography.scss
  - [whatever].scss
- assets/
  - main.scss

With assets/main.scss containing the following:

---
# You just need these --- lines to tell Jekyll to parse this file.
---

@import "normalize";
@import "typography";
@import [...]

// Other styles too
body {
  background-color: #f00;
  color: {{ site.branding.color }}; // Can even use Jekyll variables
}

As far as plugins go, I'm using octopress-autoprefixer to automatically prefix CSS3 properties. The process for using this plugin is as follows:

1. gem install octopress-autoprefixer

2. Add this to your _config.yml:

   gems:
     - octopress-autoprefixer
   

3. That's it.

Now when you make any changes to your Sass, after the CSS files are generated in _site/, autoprefixer will do it's magic to them.