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

Question

我在 grunt 配置中使用此代码:

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'
            }
        }
    }
});

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

我尝试使用模板，但它忽略了 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];
});