使用 Grunt 监视 LESS 文件的目录答案

【问题标题】：Watch directory of LESS files with Grunt使用 Grunt 监视 LESS 文件的目录
【发布时间】：2015-09-11 13:56:53
【问题描述】：

我当前的 Grunt 代码：

module.exports = function(grunt) {
    grunt.initConfig({
        // running `grunt less` will compile once
        less: {
            development: {
                options: {
                    paths: ["custom"],
                    yuicompress: true
                },
            files: {
                "custom/file1.css": "custom/*.less",
                "custom/file2.css": "custom/*.less"

            }
        }
    },
    // running `grunt watch` will watch for changes
    watch: {
        files: "custom/*.less",
        tasks: ["less"]
    }
});
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.registerTask('default', ['less:development']);

};

与其指定两个单独的文件“file1”和“file2”，我更希望它编译和查看“custom”中的所有 .less 文件。

【问题讨论】：

见gruntjs.com/configuring-tasks#compact-format（具体例子见stackoverflow.com/a/18728776/2712740）。（另请注意，大约两年前，yuicompress 选项已从 grunt-contrib-less 中删除）。

标签： css gruntjs less

【解决方案1】：

显然，您必须使用重命名回调：

files: [{
    src: ['custom/*.less'],
    expand: true,
    rename: function(dest, src) { return dest + src.replace('.less', '.css') },
    dest: ''
}]

来源：https://github.com/gruntjs/grunt-contrib-less/issues/135

【讨论】：

这很好用，谢谢。您只是错过了末尾的“]”右方括号。但是一旦我添加了它，它就实现了梦想。