Question

我在grunt config中使用此代码：

const libDir = 'public/lib'
const cssDir = 'public/css'

// Project configuration.
grunt.initConfig({

    watch: {
        scripts: {
            files: '**/*.js',
            tasks: ['default'],
        },
    },

    clean: [libDir],

    bower_concat: {
        all: {
            dest: {
                'js': libDir + '/vendor.js',
                'css': libDir + '/vendor.css'
            },
        }
    },

    sass: {
        options: {
            sourceMap: true
        },
        dist: {
            files: {
                'output.css': 'input.scss'
            }
        }
    }
});

如何通过连接output.css和某些字符串来动态生成cssDir？

我尝试使用模板但忽略了cssDir。

Answer 1

不会为所有配置属性扩展模板，特别是对于配置密钥不扩展。

由于Grunt文件基本上是Javascript程序，因此您可以以编程方式对对象进行委托：

const cssDir = 'public/css';

var sassFilesMap = {};

// build sass output file mapping programmatically
sassFilesMap[cssDir + "/output.scss"] = "input.scss";

// Project configuration.
grunt.initConfig({
    // ...

    sass: {
        options: {
            sourceMap: true
        },
        dist: {
            files: sassFilesMap
        }
    }
});

如果要转换（要配置）多个.scss个文件，您可能会使用以下内容：

const sassMappings = [["edit.scss", "edit.css"], ["public.scss", "public.css"]];

sassMappings.forEach(function(pair) {
    // pair[0] is the .scss filename, pair[1] is the .css filename
    sassFilesMap[cssDir + "/" + pair[0]] = pair[1];
});

Answer 2

我发现ES6支持动态属性键，所以基本上这解决了问题，因为我现在可以将键和值计算为dirVar + 'outputFile': inputDir + 'input.file'

在Grunt插件配置中动态生成映射键

2 个答案: