Question

我想在我的开发环境中使用监视模式。单个较少的文件可以正常工作。但是我有很多文件被导入app.less。我的app.less看起来

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

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

Answer 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

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

Answer 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任务。

P.S。：这个答案已经更新，以便正确使用grunt 0.4。

刷新较少的css，其中包含其他导入较少的文件而不加载页面

2 个答案: