Question

我已经做了一些搜索但是找不到我的问题的解决方案 - 我希望通过转换bootstrap.less来更新main.css文件之后我的页面是livereload，所有这些都是通过grunt任务和grunt完成的投放。

到目前为止，我已尝试过代码：

在 Gruntfile.js

中

grunt.initConfig({

        less: {
          development: {
            options: {
              paths: ["bower_components/bootstrap/less"]
            },
            files: {
              "app/styles/main.css": "bower_components/bootstrap/less/bootstrap.less"
            }
          },

        watch: {
            styles: {
                files: ['app/styles/{,*/}*.css'],
                options:{
                    livereload: true,
                }
            },
            less: {
                files:['bower_components/bootstrap/less/{,*/}*.less'],
                tasks: ['less']
            },

运行 grunt serve 然后编辑任何.less文件时， bootstrap.less 会成功编译为 main.css 。我遇到的问题是我必须杀死我的grunt服务器实例并启动另一个以使任何css更改生效（但是，对HTML的更改按预期显示而无需刷新页面/ kill服务器）

一些注意事项：

即使在编译bootstrap.less文件并打开main.css文件和＆＃34;编辑＆＃34;即使我的控制台显示＆＃34; app \ styles \ main.css＆＃34;手动启动livereload也不起作用。改变然后显示＆＃34;实时重新加载app \ styles \ main.css ...＆＃34; （它表示它在0.000秒内完成，似乎不正确）
我确实有＆＃34; livereload＆＃34;为Chrome和Firefox安装的扩展程序似乎都没有帮助这种情况
我的bootstrap.less文件由所有@imports组成（研究时似乎这可能导致问题）
我正在与：＆＃34; grunt＆＃34;：＆＃34; ~0.4.1＆＃34;，＆＃34; grunt-contrib-watch＆＃34;：＆＃34; ~0.6.1＆＃34;，＆＃34; load-grunt-tasks＆＃34;：＆＃34; ~0.4.0＆＃34;，＆＃34; grunt-contrib-less＆＃34;：＆＃34; ^ 0.11.0＆＃34;

以下是我的grunt服务器设置：

    connect: {
        options: {
            port: 9000,
            open: true,
            livereload: 35729,
            // Change this to '0.0.0.0' to access the server from outside
            hostname: 'localhost'
        },
        livereload: {
            options: {
                middleware: function(connect) {
                    return [
                        connect.static('.tmp'),
                        connect().use('/bower_components', connect.static('./bower_components')),
                        connect.static(config.app)
                    ];
                }
            }
        },
        test: {
            options: {
                open: false,
                port: 9001,
                middleware: function(connect) {
                    return [
                        connect.static('.tmp'),
                        connect.static('test'),
                        connect().use('/bower_components', connect.static('./bower_components')),
                        connect.static(config.app)
                    ];
                }
            }
        },
        dist: {
            options: {
                base: '<%= config.dist %>',
                livereload: false
            }
        }
    },

此外，这是我的第一个帖子/问题 - 如果我应该采取不同的行动，请随时告诉我。

谢谢！

已编译的.less文件中的CSS更改将不会与grunt服务进行实时重载

0 个答案: