刷新较少的css，其中有其他导入的较少文件而无需页面加载答案

【问题标题】：Refresh less css which has other imported less files without page load刷新较少的css，其中有其他导入的较少文件而无需页面加载
【发布时间】：2012-10-29 07:42:16
【问题描述】：

我想在我的开发环境中使用监视模式。它适用于单个较少的文件。但是我有很多更少的文件被导入到 app.less 中。我的 app.less 看起来

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

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

【问题讨论】：

标签： css less

【解决方案1】：

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

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

可能的设置是带有 Grunt 的 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

和

$ grunt watch:reload

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

【讨论】：

【解决方案2】：

我完全同意这个评论 Refresh less css which has other imported less files without page load 。谢谢，thevasya。

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

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

之后你就可以开始观看了

$ grunt watch

就是这样。如果您更改任何 less 文件，它将仅启动 less 任务。

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

【讨论】：