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

Dynamically generate map key in Grunt plugin config

本文关键字：映射 动态 Grunt 插件 配置      更新时间：2023-09-26

我在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.

不会为所有配置属性展开模板，尤其是不会为配置键展开模板。

由于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];
});

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

相关文章：