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>

If you want to push a message to the browser and have it reload the page, you'll need to use a websocket or server-sent event. Or you can poll with AJAX. But I would recommend against adding code that forces a page reload. When your website is live you'll want to remove the code anyway. — Matt S, May 14 '17 at 16:14
I'm developing on the server, though, so I would like to have this up and running, even if it means removing the code later. If you happen to know an implementation on how to do this and it works, would you mind posting an answer? — Jordan Carter, May 15 '17 at 14:50

lax1089 · Answer 1 · 2017-05-15T20:18:27.653

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.

Does this work for you when developing on the server? Also, I hate to ask, but do you know if there is a similar gulp plugin that allows this, on server development? I just started getting into gulp and so far I'm liking it. — Jordan Carter, May 15 '17 at 20:15
Yes, this works for me while developing on server. I have updated my answer to include a plugin which you may prefer to use. — lax1089, May 15 '17 at 20:20

Grunt Watch LiveReload on site on server

1 Answers1