gulp errors: “LiveReload disabled because it could not find its own <SCRIPT> tag”

Hi,

This is my html:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Empty Page</title>
    <!-- <script src="script.js" defer></script> -->
</head>
<body>
</body>
</html>

The moment I enable the external script resource to script.js, gulp-connect stops working and I get the following error in the console of my web browser:

screen shot 2018-04-10 at 01 03 20

LiveReload disabled because it could not find its own <SCRIPT> tag

These are the contents of the script.js file:

var date = Date();
document.body.innerHTML = "<h1>Today is? " + date + "</h1>"

This is my gulpfile.js file:

// Include Gulp
var gulp = require('gulp');

// Include required plugins.
var connect = require('gulp-connect');

// TASK: connect
gulp.task('connect', function() {
  connect.server({
      livereload: true
  });
});

// TASK: preview
gulp.task('preview', function () {
    gulp.src('index.html')
        .pipe(connect.reload());
});

// TASK: watch
gulp.task('watch', function () {
    gulp.watch('*.html', ['preview']);
    gulp.watch('*.js', ['preview']);
});

gulp.task('run', function() {
    console.log('warnning: No project [run] parameters configured.');
});

// Task Bundles
gulp.task('default', ['connect', 'watch']);

The only way to fix the issue is to add the following line to my index.html:

<script src="http://localhost:35729/livereload.js?snipver=1" async="" defer=""></script>

And the live-browser preview starts working. Is there a more elegant way to solve this problem?

Thanks.

avevlad / gulp-connect

gulp errors: “LiveReload disabled because it could not find its own <SCRIPT> tag” #254