動的に私はうなり声の設定でこのコードを使用兵卒プラグインの設定

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

にはどうすればいいcssDirと、いくつかの文字列を連結して動的にoutput.cssを生成するのですか？

テンプレートを使用しようとしましたが、それは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]; 
});