Question

我知道有一些非常相似的问题，但我无法让它发挥作用。

我正在使用grunt，包括 connect，less和watch 。一切正常，除了.css的livecompiling with less和watch。像这样，我总是要重新启动grunt等。这是我的代码：

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

        connect: {
            server: {
                options: {
                    port: 8000,
                    hostname: 'localhost',
                    base: 'public',
                    keepalive: true
                }
            }
        },
        less: {
            development: {
                options: {
                    compress: true,
                    yuicompress: true,
                    optimization: 2
                },
                files: {
                    "public/style/style.css": "public/style/main.less"
                }
            }
        },
        watch: {
            files: ['**/*'],
            tasks: ['less', 'connect'],

            styles: {
                files: ['public/style/main.less'], //which files to watch
                tasks: ['less'],
                options: {
                    livereload: true
                }
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', ['less','connect','watch']);
};

如果需要更多信息，请与我们联系。

Answer 1

您必须在html文件中添加livereload代码段才能使其正常工作：

<script>
   document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"><\/script>')
</script>

35729是livereload服务器的端口。

有关详细信息，请参阅documentation。您还应该阅读how to enable livereload in your html。

Answer 2

除了马里奥的回答，我还试了一下。

我找到了这样的解决方案：我独自运行观看，没有更少或连接，我注意到它在控制台中留下了一些东西，我做了不在控制台中看到它与我一起运行时连接少。接下来我注意到的是控制台中 connect 条目中的“永远等待......”。像这样，没有任何事情发生，因为它永远等待。这样做的后果是 watch 无法执行。这也解释了为什么我从未在控制台中观看的条目。

所以解决方案是这样的：我不得不从Gruntfile中的 connect 中删除“keepalive：true”。

使用手表减少Grunt livecompiling

2 个答案: