動態生成咕嚕插件配置

Question

地圖鍵我使用此代碼在繁重的配置：

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

我發現ES6支持動態屬性鍵，所以基本上解決了這個問題，因爲我現在可以同時計算鍵和值：dirVar + 'outputFile': inputDir + 'input.file'

Answer 2

對於所有配置屬性，特別是對於配置密鑰，模板不會擴展。

由於咕嚕文件基本上是JavaScript程序，您可以通過編程construst對象：

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