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