刷新较少的css，在没有页面加载的情况下导入较少的其他文件

我想在我的开发环境中使用watch模式。它适用于单个较少的文件。但我有这么多导入到app.less的文件。我的app.less外观

@import "variables";
@import "mixins";

---

我似乎无法在此设置中使用手表模式。还有其他方法吗？

Upd。此语法适用于旧的grunt版本，因此不应使用

您需要为此使用应用程序。或者是另一个可以用LiveReload浏览器扩展重新加载页面的软件（可能是带有插件的Sublime文本编辑器）

可能的设置是Node.js，其中安装了grunt contrib less和grunt reload模块

您的grunt.js配置应该如下所示：

module.exports = function(grunt) {
grunt.initConfig({
    //  Start LiveReload server
    reload: {
        port: 35729,
        liveReload: {}
    },
    //  Simple css compilation
    less: {
        src: 'less/app.less',
        dest: 'css/app.css'
    },
    //  Reload files on change
    watch: {
        less: {
            files: ['less/*.less'],
            tasks: 'less'
        },
        reload: {
            files: ['*.html',
                    'css/app.css',
                    'js/*.js'],
            tasks: 'reload'
        }
    }
});

//  Third party modules
grunt.loadNpmTasks('grunt-reload');
grunt.loadNpmTasks('grunt-contrib-less');

//  Register default task
grunt.registerTask('default', 'less');
};

那你得跑了

$ grunt watch:less

及

---

在两个独立的终端窗口中。

Upd。此语法适用于旧的grunt版本，因此不应使用

您需要为此使用应用程序。或者是另一个可以用LiveReload浏览器扩展重新加载页面的软件（可能是带有插件的Sublime文本编辑器）

可能的设置是Node.js，其中安装了grunt contrib less和grunt reload模块

您的grunt.js配置应该如下所示：

module.exports = function(grunt) {
grunt.initConfig({
    //  Start LiveReload server
    reload: {
        port: 35729,
        liveReload: {}
    },
    //  Simple css compilation
    less: {
        src: 'less/app.less',
        dest: 'css/app.css'
    },
    //  Reload files on change
    watch: {
        less: {
            files: ['less/*.less'],
            tasks: 'less'
        },
        reload: {
            files: ['*.html',
                    'css/app.css',
                    'js/*.js'],
            tasks: 'reload'
        }
    }
});

//  Third party modules
grunt.loadNpmTasks('grunt-reload');
grunt.loadNpmTasks('grunt-contrib-less');

//  Register default task
grunt.registerTask('default', 'less');
};

那你得跑了

$ grunt watch:less

及

---

在两个独立的终端窗口中。

我完全同意这一评论 . 谢谢，蒂瓦西亚

但是没有必要启动几个终端

watch: {
    less: {
        files: ['less/*.less'],
        tasks: 'less'
    },
    reload: {
        files: ['*.html',
                'css/app.css',
                'js/*.js'],
        tasks: 'reload'
    }
}

之后，你就可以开始看电视了

$ grunt watch

就这样。如果更改更少的文件，它将只启动

less

任务

---

p.S.：此答案已通过grunt 0.4进行了更新。

我完全同意此评论 . 谢谢，蒂瓦西亚

但是没有必要启动几个终端

watch: {
    less: {
        files: ['less/*.less'],
        tasks: 'less'
    },
    reload: {
        files: ['*.html',
                'css/app.css',
                'js/*.js'],
        tasks: 'reload'
    }
}

之后，你就可以开始看电视了

$ grunt watch

就这样。如果更改更少的文件，它将只启动

less

任务

p.S.：此答案已更新，以便在grunt 0.4中正常工作。