使用 Gruntjs 重新加载源答案

【问题标题】：Livereload of sources using Gruntjs使用 Gruntjs 重新加载源
【发布时间】：2014-09-24 15:43:48
【问题描述】：

我无法运行实时重新加载。 Grunt 没有报告任何问题。网络模型在 MAMP 端口 8888 上运行，不确定此信息是否对解决此问题很重要。

CSS资源根本没有加载

<link rel="stylesheet" href="//localhost:1111/style/style.css">

这是我的 Gruntjs.file

module.exports = function(grunt) {
    grunt.initConfig({
        less: {
            development: {
                options: {
                    paths: ["style"],
                    compress: true,
                    yuicompress: true,
                    optimization: 2
                },
                files: {
                    "style/style.css": "source/style/style.less"
                }
            }
        },
        watch: {
            less: {
                files: "source/style/*",
                tasks: ["less"],
                options: {
                    nospawn: true
                }
            },
            css: {
                files: ['style/style.css'],
                options: {
                    livereload: 1111
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');

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

如何检查重载服务是否正常运行？

你能帮帮我吗？谢谢

【问题讨论】：

你为什么看css？您可能还想将观看任务更新为['less:development']
您是否在文件中添加了corresponding script？虽然我不确定它是否应该与 MAMP 服务器一起使用。
我让它工作（见我的回答），但它并不总是重新加载页面。我快疯了。 :(

标签： gruntjs less grunt-contrib-watch

【解决方案1】：

我找到了解决方案。我下载了 Chrome LiveReload 扩展程序，现在一切正常。 Gruntfile.js 看起来像这样：

module.exports = function(grunt) {
    grunt.initConfig({
        less: {
            development: {
                options: {
                    paths: ["style"],
                    compress: true,
                    yuicompress: true,
                    optimization: 2
                },
                files: {
                    "style/style.css": "source/style/style.less"
                }
            }
        },
        watch: {
            less: {
                files: "source/style/*",
                tasks: ["less"],
                options: {
                    nospawn: true
                }
            },
            css: {
                files: ['style/style.css'],
                options: {
                    livereload: true
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');

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

【讨论】：