Grunt is Running "watch" task and Waiting... forever. Is it my Gruntfile.js syntax?

Question

In anticipation of a Sassier Bootstrap 4, I'm (trying to) switch from Less to Sass on Bootstrap 3.3.5 and setting up the required Gruntfile.js file. I had no problem compiling Less but cannot get Grunt working with Sass, specifically, $ grunt and $ grunt watch both get me

Running "watch" task Waiting...

forever.

Needless to say it does not compile. I tried $ grunt watch --verbose and got a lot of green OKs.

I presume I have some error or inefficiency in my gruntfile.js but since this is Baby's First Gruntfile.js, I'm stuck from here. Can you see what's causing this?

    /*** Created by morgan on 9/13/15. */    

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

        sass: {
          dev: {
        options: {
          includePaths: ['static/sass']
        },
        dev: {
          options: {
            style: 'expanded',
            compass: false
          },
          files: {
            'css/styles.css': 'sass/styles.scss'
          }
        }
      }
    },

    watch: {
      grunt: { files: ['Gruntfile.js'] },
      sass: {
        files: [
          'sass/**/*.scss'
        ],
        tasks: ['sass:dev']
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', 'watch')
};

My project directory, if that's helpful:

(Django project)
app
├── static
│   ├── sass
│   │   ├── _bootstrap.scss
│   │   └── styles.scss
│   ├── css
│   │   └── styles.css
│   └── jquery
├── node_modules
│   ├── grunt
│   ├── grunt-contrib-sass
│   └── grunt-contrib-watch
├── Gruntfile.js
└── package.json

score 2 · Answer 1 · answered Sep 14 '15 at 19:21

@maxbeatty provided an executable Gruntfile.js and package.json in Slack #help. on GitHub here: https://github.com/maxbeatty/example-grunt-sass-bootstrap

Note if you're using this template for your own sass-bootstrap project, you'll probably need to change the files: path to match your own.

Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    sass: {
      dev: {
        options: {
          outputStyle: 'expanded'
        },
        files: {
          'static/css/styles.css': 'static/sass/styles.scss'
        }
      }
    },

    watch: {
      sass: {
        files: [
          'static/sass/**/*.scss'
        ],
        tasks: ['sass:dev']
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', 'watch')
};

package.json dependencies:

  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-sass": "^1.0.0"
  }

Again, both from @maxbeatty. (Directory unchanged). The watch troubleshooting is archived in the Slack channel for further reading.

Grunt is Running "watch" task and Waiting... forever. Is it my Gruntfile.js syntax?

1 Answers1