javascript - Grunt files api 创建了不需要的文件

Question

我的 Gruntfile.js 中有以下代码:

    less: {
        dist: {
            options: {
                paths: ['less/**/*.less'],
                cleancss: true,
                strictImports: true,
                strictUnits: true
            },
            expand: true,
            cwd: 'src',
            src: 'less/style.less',
            dest: 'tmp/less.css'
        }
    },

我的目标是解析 /src/less/**/*.less 中的所有 less 文件(目前仅 style.less )到 tmp/less.css 中的 css 文件。相反，文件 tmp/less.css/less/style.less被 build 。我注意到其他 grunt 插件也有类似的行为，所以我认为这与 less 插件本身没有任何关系。我知道我不必使用 expand和cwd ，但我试图了解 Grunt 文件 api 以进行更复杂的配置。我做错了什么？

Answer 1

通常，您只想输出一两个文件(以减少 CSS 请求)，因此 LESS 显式指定编译目标更有意义。因此，与您类似的更简单的设置可能是更好的选择。

less: {
    dist: {
        files: {
            'src/tmp/less.css': 'src/less/style.less',
            'src/tmp/less2.css': 'src/less/style.less'
        },
        options: {
            cleancss: true,
            strictImports: true,
            strictUnits: true
        }
    }
},

<小时/>

这样的事情应该获取 less 目录中的所有 .less 文件，并在 tmp 目录中以相同的文件夹结构输出它们:

less: {
    dist: {
        files: [{
            expand: true,
            cwd: 'src',
            src: ['less/**/*.less'],
            dest: 'tmp/',
            ext: '.css'
        }],
        options: {
            cleancss: true,
            strictImports: true,
            strictUnits: true
        },
    }
}