Grunt livecompiling 更少使用 watch答案

【问题标题】：Grunt livecompiling less using watchGrunt livecompiling 更少使用 watch
【发布时间】：2015-03-06 20:45:32
【问题描述】：

我知道有一些非常相似的问题，但我无法解决问题。

我正在使用 grunt，包括 connect、less 和 watch。一切正常，除了使用 less 和 watch 实时编译 .css。像这样，我总是必须重新启动 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']);
};

如果需要更多信息，请告诉我。

【问题讨论】：

标签： gruntjs less grunt-contrib-watch

【解决方案1】：

您必须在 html 文件中添加 livereload sn-p 才能使其正常工作：

<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。

【讨论】：

【解决方案2】：

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

我找到了这样的解决方案：我单独运行 watch，没有 less 或 connect，我注意到它在控制台中留下了一些东西，当我将它与连接和更少。接下来我注意到控制台中connect 条目中的“Waiting forever...”。像这样，什么也没有发生，因为它一直在等待。这样做的结果是 watch 无法执行。这也解释了为什么我从不观看控制台中的条目。

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

【讨论】：