Grunt Watch LiveReload on site on server

Question

I am developing a WordPress site on a server (not local). I want to refresh the page in my browser whenever I modify a sass file. I've got some grunt tasks listed, but right now I just want it to refresh on any sass modification. Right now, it catches whenever a file is modified, but it does not refresh the page.

Gruntfile:

module.exports = function(grunt) {

	// Project configuration.
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		
		watch: {
			scripts: {
				options: { livereload: true },
				files: ['**/*.scss'],
				//tasks: ['criticalcss:front', 'criticalcss:page', 'cssmin', 'postcss'],
			}
		},
		
		 postcss: {
			options: {
				processors: [
					require('autoprefixer')({browsers: 'last 6 versions'}), // add vendor prefixes
					//require('cssnano')() // minify the result
				]
			},
			dist: {
				src: 'style.css',
				dest: 'style.css'
			}
		},
	
		criticalcss: {
			front : {
				options: {
					url: "https://grandeurflooring.ca/grand_dev/",
					minify: true,
					width: 1500,
					height: 900,
					outputfile: "critical_css/critical-front.css",
					filename: "style.css",
					buffer: 800*1024,
					ignoreConsole: true
				}
			},
			page : {
				options: {
					url: "https://grandeurflooring.ca/grand_dev/sample-page/",
					minify: true,
					width: 1500,
					height: 900,
					outputfile: "critical_css/critical-page.css",
					filename: "style.css",
					buffer: 800*1024,
					ignoreConsole: true
				}
			}
		},
		
		cssmin: {
			target: {
				files: [{
				  expand: true,
				  cwd: 'critical_css',
				  src: ['*.css', '!*.min.css'],
				  dest: 'critical_css',
				  ext: '.min.css'
				}]
			}
		}

	});

	// Load the plugin that provides the "critical" task.
	grunt.loadNpmTasks('grunt-criticalcss');
	// Load the plugin that provides the "cssmin" task.
	grunt.loadNpmTasks('grunt-contrib-cssmin');
	// Load the plugin that provides the "watch" task.
	grunt.loadNpmTasks('grunt-contrib-watch');
	// Load the plugin that provides the "PostCSS" task.
	grunt.loadNpmTasks('grunt-postcss');

	// Critical task.
	grunt.registerTask('critical', ['criticalcss:front']);

};

In footer.php, before wp_footer(), I put the script:

<script src="http://localhost:35729/livereload.js"></script>

Answer 1

You can configure Grunt to watch the compiled css file in your dist directory, which would be updated every time the Sass is recompiled.

Here is my watch configuration which is achieving what you want:

watch: {
  options: {
    livereload: true,
  },
  html: {
    files: ['index.html'],
  },
  js: {
    files: ['js/**/*.js'],
    tasks: ['jshint'],
  },
  sass: {
    options: {
      livereload: false
    },
    files: ['css/scss/**/*.scss'],
    tasks: ['sass'],
  },
  css: {
    files: ['dist/css/master.css'],
    tasks: []
  }
}

You might need to change spawn: false to spawn: true depending on your setup as well.

EDIT: Additionally, you can use the grunt-contrib-watch plugin which allows you to:

Run predefined tasks whenever watched file patterns are added, changed or deleted

This plugin contains numerous additional options for live-reloading, watching, etc. which you may find useful.