grunt-contrib-watch与LiveReload不起作用

Question

我无法让LiveReload与Grunt配合工作。我正在使用grunt-contrib-watch插件。当Grunt正在监视指定的文件时，浏览器中没有任何内容在重新加载。所以我会看到：

Running "watch" task
Completed in 0.203s at Thu Nov 21 2013 00:59:59 GMT-0500 (EST) - Waiting...
OK
>> File "views/index.html" changed.

但浏览器窗口没有更新。我正在使用LiveReload 2.0.9。有任何建议如何使其运行？

Gruntfile.js

module.exports = function(grunt) {

  'use strict';

  grunt.initConfig({
    express: {
      dev: {
        options: {
          script: './app.js'
        }
      }
    },
    watch: {
      tasks:  [ 'express:dev' ],
      options: {
        livereload: true,
        nospawn: true
      },
      files: [
        './views/index.html',
        './preprocessing/css/style.scss'
      ]
    }
  });

  grunt.loadNpmTasks('grunt-express-server');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', [ 'express:dev', 'watch' ]);
};

- Evan Emolo

---

你安装了liveReload浏览器插件吗？它是否启用？ - Paul Osborne

Answer 1

看起来你需要的只是在文档中包含livereload脚本：<script src="//localhost:35729/livereload.js"></script> ，这是默认设置。

如果你想避免手动操作，可以使用connect-livereload中间件。

这是一个示例 Gruntfile.js 配置监视和使用我链接的中间件进行livereload。

- André Dion

---

你有什么想法，为什么你的示例不能直接运行？当我尝试使用你发布在Github Gist上的代码时，出现了“无法获取/”的错误信息。 - f1lt3r

我发现，如果你使用 grunt watch:<mytheme>，由于某种原因，服务器不会开始监听 35729 端口。如果你改为运行 grunt watch ，它就可以工作了。我并没有去确定为什么。 - quickshiftin

Answer 2

如果您不想将livereload.js添加到页面中，您可以使用Chrome插件：

https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei。

使用此插件。当页面加载时，单击插件图标，确保点已更改。然后页面源代码将自动添加

- lidl

---

你所提到的插件是与商业产品相关的，对吗？ - superandrew

Answer 3

我知道这个问题比较老，但是我从另一个网站上得到了这个信息，它似乎可以解决我遇到的同样的问题。在选项对象中添加keepAlive:true就可以解决问题。以下是代码：

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
develop: {
  server: {
    file: 'bin/www'
  }
},
watch: {
  options: {
    nospawn: true,
    livereload: reloadPort
  },
  server: {
    files: [
      'bin/www',
      'app.js',
      'routes/*.js'
    ],
    tasks: ['develop', 'delayed-livereload']
  },
  js: {
    files: ['public/js/*.js'],
    options: {
      livereload: reloadPort,
      keepAlive:true
    }
  },
  css: {
    files: [
      'public/css/*.css'
    ],
    options: {
      livereload: reloadPort,
        keepAlive:true
    }
  },
  views: {
    files: ['views/*.ejs'],
    options: {
      livereload: reloadPort,
        keepAlive:true
    }
  }
}

});

- James Daly

---

在watch中没有keepalive选项 - https://github.com/gruntjs/grunt-contrib-watch - user2954463

Answer 4

你可以在 Grunt 中使用 实时刷新浏览器页面。

GitHub

示例样本

const 
  LiveReload = require("live-reload-bp");
  // webServer = require('./web-server');

var 
  liveReload;

// webServer();

module.exports = function(grunt) {

  grunt.initConfig({
  
    liveReload: {
      run: {
        options: {
          host: '127.0.0.1',
          port: '8080'
        }
      },    
      js: {
        options: {}
      },
    },

    uglify: {
        build777: {
          files: [{
            expand: true,
            cwd: 'src',
            src: 'js/**/*.js',
            dest: 'dest'
          }]
        }
    },

    watch: {
      options: {
        spawn: false 
        // It is recommended to disable `false` or not use 'grunt-contrib-watch' 
        // or perhaps even Grunt. Because it works very very slowly.
      },
      js: {
          files: ['src/**/*.js'],
          tasks: ['uglify', 'liveReload:js']
      },       
    },

  });


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


  // Register Task
  grunt.registerTask('start', ['liveReload:run', 'watch']);


  grunt.registerMultiTask('liveReload', '', function() {
      if (grunt.fail.errorcount > 0 || grunt.fail.warncount > 0) {
          return false;
      }

      if(this.target === 'run'){
          liveReload = new LiveReload(this.data.options);
          liveReload.run();
      }else{
          liveReload.reloadPage();
      }
  });

}

- Юрий Светлов

Answer 5

你需要记住两个端口:

1. Grunt 执行的端口

2. livereload 执行的端口

当你执行时:

$ grunt

这段代码运行在：http://0.0.0.0:9000

我在Gruntfile.js中采用的配置如下：

module.exports = function (grunt) {
grunt.initConfig({
    connect: {
        server: {
            options: {
                port: 9000,
                base: '/Users/pedroce/Documents/dev/node/fipa/fipa/'
            }
        }
    },
    watch: {
        project: {
            files: ['public/**/*.js', 'public/**/*.html', 'public/**/*.json', 'public/**/*.css'],
            options: {
                livereload: true,
            }
        }
    }
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['connect', 'watch']);
});

如果您能看到，服务器将在http://localhost:9000上运行，但我们尚未定义livereload将在哪里运行，因此默认情况下它将在http://localhost:35729/livereload.js上运行。

不要忘记，在您的HTML中，Firefox插件是：

(livereload, [link][1]), inserta

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

因此，您必须防范这种情况。填写您的HTML：

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

最后，在控制台中：

$ grunt

您浏览器中的地址：

http://localhost:9000

当您编辑任何CSS文件（或JavaScript或HTML），它应该自动重新加载。

- ray

---

为什么会有踩？这是一个技术上正确且全面的答案。 - user2954463