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


Refresh less css which has other imported less files without page load

我想在我的开发环境中使用监视模式。与少一个文件，它可以正常工作。但是我导入到app.less的文件少得多。我的app.less看起来

1
2
@import"variables";
@import"mixins";

在此设置下，我似乎无法使用观看模式。还有其他方法吗？

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

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

可能的安装程序是带有Grunt的Node.js，其中已安装了grunt-contrib-less和grunt-reload模块。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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');
};

然后您需要运行

1
$ grunt watch:less

和

1
$ grunt watch:reload

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

我完全同意此评论
少刷新css，其中有其他导入的较少文件，而无需页面加载。
谢谢，thevasya。

但是不需要启动多个终端。

1
2
3
4
5
6
7
8
9
10
11
12
watch: {
    less: {
        files: ['less/*.less'],
        tasks: 'less'
    },
    reload: {
        files: ['*.html',
                'css/app.css',
                'js/*.js'],
        tasks: 'reload'
    }
}

之后，您可以通过

开始观看

1
$ grunt watch

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

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