Grunt - running php and watch SCSS/CSS

Question

I'm trying to use Grunt view run a php web server with the SCSS/CSS changes being watched and recompiled as they're changed and live reloaded into the web server. At the moment it is running up the web service and showing the requests, however when I modify and save an SCSS file it's not recompiling the CSS files at all.

I've included my Gruntfile.js below:

    module.exports = function(grunt) {
            grunt.initConfig({
                    pkg: grunt.file.readJSON('package.json'),
                    compass: {
                            options: {
                                    config: 'config.rb',
                            }
                    },
                    php: {
                            options: {
                                    port: 8000,
                                    keepalive: true,
                                    open: true,
                                    base: 'public_html/',
                                    hostname: 'localhost'
                            },
                            watch: {
                                    options: {
                                            livereload: 8000
                                    },
                                    scss: {
                                            files: '**/*.scss',
                                            tasks: ['compass'],
                                            options: {
                                                    livereload: false
                                            }
                                    },
                                    css: {
                                            files: '**/*.css',
                                            tasks: [],
                                            options: {
                                                    livereload: 8000
                                            }
                                    }
                            }
                    }
            });
            grunt.loadNpmTasks('grunt-contrib-compass');
            grunt.loadNpmTasks('grunt-php');
            grunt.loadNpmTasks('grunt-contrib-watch');
            //grunt.registerTask('default',['watch']);
            grunt.registerTask('phpwatch', ['php:watch', 'watch']);
    }

Here's the output when I run "grunt phpwatch --verbose" if this helps debug:

Initializing
Command-line options: --verbose

Reading "Gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.
Reading package.json...OK
Parsing package.json...OK
Initializing config...OK

Registering "grunt-contrib-compass" local Npm module tasks.
Reading /Users/adam/Sites/sitename/node_modules/grunt-contrib-compass/package.json...OK
Parsing /Users/adam/Sites/sitename/node_modules/grunt-contrib-compass/package.json...OK
Loading "compass.js" tasks...OK
+ compass

Registering "grunt-php" local Npm module tasks.
Reading /Users/adam/Sites/sitename/node_modules/grunt-php/package.json...OK
Parsing /Users/adam/Sites/sitename/node_modules/grunt-php/package.json...OK
Loading "php.js" tasks...OK
+ php

Registering "grunt-contrib-watch" local Npm module tasks.
Reading /Users/adam/Sites/sitename/node_modules/grunt-contrib-watch/package.json...OK
Parsing /Users/adam/Sites/sitename/node_modules/grunt-contrib-watch/package.json...OK
Loading "watch.js" tasks...OK
+ watch
Loading "Gruntfile.js" tasks...OK
+ debug, phpwatch

Running tasks: phpwatch

Running "phpwatch" task

Running "php:watch" (php) task
Verifying property php.watch exists in config...OK
File: [no files]
PHP 5.4.17 Development Server started at Mon Nov  4 16:37:33 2013
Listening on http://sitename.local:8000
Document root is /Users/adam/Sites/sitename/public_html
Press Ctrl-C to quit.
[Mon Nov  4 16:37:40 2013] 127.0.0.1:56330 [200]: /
[Mon Nov  4 16:37:46 2013] 127.0.0.1:56332 [200]: /

Answer 1

I think you also need to include sassDir and cssDir in your compass options:

compass: {
  options: {  
    config: 'config.rb',
    sassDir: 'path/to/source/sass',
    cssDir: 'path/to/public/css'
  }
}

I'm not sure though as all of your config is in config.rb which you haven't included! ;)

EDIT

You included this in your config.rb so I'm not sure what's going on now. Perhaps try registering this task as a debugging method:

grunt.registerTask('debug', 'debug logging', function() {
  grunt.log.writeln('scss watch triggered');
});

Then change the tasks: ['compass'] line to launch the 'debug' task instead. Then change a SCSS file to see if it triggers the task. If not, then it must be an issue with your php:watch configuration?

EDIT 2

You don't have a watch task currently, just a php:watch task. watch is the task that actually does the monitoring via grunt-watch-contrib, then you can also trigger the php:watch task using the line you already have: grunt.registerTask('phpwatch', ['php:watch', 'watch']);

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    compass: {
      options: {
        config: 'config.rb',
      }
    },
    php: {
      options: {
        port: 8000,
        keepalive: true,
        open: true,
        base: 'public_html/',
        hostname: 'localhost'
      },
      watch: {
        options: {
        livereload: 8000
      }
    }
    watch:{
      scss: {
        files: '**/*.scss',
        tasks: ['compass'],
        options: {
          livereload: false
        }
      },
      css: {
        files: '**/*.css',
        tasks: [],
        options: {
          livereload: 8000
        }
      }
    }
  }
});
}

P.S. there maybe an extra or a missing } - it's making me go dizzy trying to count!

Answer 2

It seems when grunt-php is running it blocks the other watch tasks from being loaded as its persistently running with the keepalive: true. Instead I've put grunt-concurrent on there to simultaneously run php and watching scss/css.

module.exports = function(grunt) {
        grunt.initConfig({
                pkg: grunt.file.readJSON('package.json'),
                compass: {
                        options: {
                                config: 'config.rb',
                        }
                },
                php: {
                      options: {
                        port: 8000,
                        keepalive: true,
                        open: true,
                        base: 'public_html/',
                        hostname: 'localhost'
                      },
                      watch: {
                        options: {
                                livereload: 8000
                        }
                      }
                },
                watch: {
                        scss: {
                                files: '**/*.scss',
                                tasks: ['compass'],
                                options: {
                                        livereload: false
                                }
                        },
                        css: {
                                files: '**/*.css',
                                tasks: [],
                                options: {
                                        livereload: 8000
                                }
                        }
                },
                concurrent: {
                        target: {
                                tasks: ['php:watch', 'watch'],
                                options: {
                                        logConcurrentOutput: true
                                }
                        }
                }
        });
        grunt.loadNpmTasks('grunt-contrib-compass');
        grunt.loadNpmTasks('grunt-php');
        grunt.loadNpmTasks('grunt-contrib-watch');
        grunt.loadNpmTasks('grunt-concurrent');
        grunt.registerTask('default', ['concurrent:target']);
}

Answer 3

Try don't use the keepalive option. It's working for me.