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]: /

could you share the contents of your `config.rb`? – Ed_ Nov 04 '13 at 10:50 — Ed_, Nov 04 '13 at 10:50

Ed_ · Accepted Answer · 2013-11-04T17:14:36.360

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!

That's all taken care of in the config.rb, the sass compiles fine standalone when watch is taken outside of the PHP array, it's only since adding PHP in there its not compiling. — Adam Johnson, Nov 04 '13 at 12:59
Still nothing coming out on the console SCSS file is updated. It's like it's not watching the files — Adam Johnson, Nov 04 '13 at 16:39
try the change added in the next edit. I.e. create a `watch` task as well as your `php:watch` one. — Ed_, Nov 04 '13 at 17:15

score 0 · Answer 2 · answered Nov 04 '13 at 19:00

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']);
}

score 0 · Answer 3 · answered Apr 23 '14 at 21:20

0

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

answered Apr 23 '14 at 21:20

lancedikson

157
1
11

Grunt - running php and watch SCSS/CSS

3 Answers3