0

I always use Livereload with grunt for webapps, but suddenly for about a month ago it stopped working. I haven't done anything different then what I used to. Is it a bug with Livereload or am I missing something here?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sitename</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
    <header>
        <div class="logo"></div>
    </header>
    <section class="content"></section>
    <div class="footer">

    </div>
    <script src="//localhost:35729/livereload.js"></script>
</body>
</html>

And Gruntfile:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      options: {
        includePaths: ['bower_components/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'compressed',
          sourceMap: true,
        },
        files: {
          'css/app.css': 'scss/app.scss'
        }
      }
    },

    watch: {
      grunt: {
        options: {
          reload: true
        },
        files: ['Gruntfile.js']
      },

      sass: {
        files: 'scss/**/*.scss',
        tasks: ['sass']
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('build', ['sass']);
  grunt.registerTask('default', ['build','watch']);
}

The error in the Console:

[Error] Failed to load resource: Could not connect to the server. (livereload.js, line 0)

And the console:

grunt
Running "sass:dist" (sass) task

Running "watch" task
Waiting...
>> File "scss/app.scss" changed.
Running "sass:dist" (sass) task

Done, without errors.
Completed in 0.773s at Mon Aug 31 2015 17:53:46 GMT+0200 (CEST) - Waiting...

But still no reload. Somehow live reload server is not starting buts live reload is set to true. Any ideas?

Jorgeuos
  • 541
  • 6
  • 28
  • What is the operating system you're using? When I was using Windows previous to Windows 10, Livereload never worked – Ahmad Alfy Aug 31 '15 at 16:57
  • Are you using `grunt-contrib-connect` or something to serve your web pages for testing? – James Aug 31 '15 at 17:29
  • I tested grunt-contrib-connect but couldnt get it to work. I'm only using localhost with apache and never had problem before. Port 80, and before livereload was integrated in the watch task I used the livereload task. – Jorgeuos Aug 31 '15 at 17:53
  • I'm using osx, Yosemite. – Jorgeuos Aug 31 '15 at 18:01

1 Answers1

0

Silly me! I was missin the livereload option in the sass config:

    options: {
      livereload: true,
    },

The entire Gruntfile now:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      options: {
        includePaths: ['bower_components/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'compressed',
          sourceMap: true,
        },
        files: {
          'css/app.css': 'scss/app.scss'
        }
      }
    },

    watch: {
      grunt: {
        options: {
          reload: true
        },
        files: ['Gruntfile.js']
      },


      sass: {
        files: 'scss/**/*.scss',
        tasks: ['sass'],
        options: {
          livereload: true,
        },
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('build', ['sass']);
  grunt.registerTask('default', ['build','watch']);
}
Jorgeuos
  • 541
  • 6
  • 28