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

时间:2012-10-29 07:42:16

标签: css less

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

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

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

2 个答案:

答案 0 :(得分:4)

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

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

答案 1 :(得分:3)

我完全赞同这个评论 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。