1

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

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

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

4

2 回答 2

5

更新。此语法适用于旧的 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

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

于 2012-10-29T08:37:07.447 回答
3

我完全同意这条评论 Refresh less css ，它有其他导入的 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任务。

PS：此答案已更新，以便与 grunt 0.4 一起正常工作。

于 2013-01-19T20:01:05.997 回答