javascript - Grunt - 通过 glob 获取文件名并稍后将其用作变量

Question

我今天刚刚安装了 grunt，到目前为止它正在运行，我真的很喜欢它。我在我的网站上使用 XSLT，我需要在那里插入生成的带有哈希文件名的 css/js。

我想使用https://github.com/tnory56/grunt-xslt但是，我不知道生成的文件名 - 它们不是静态的。如何通过选择器获取文件名并稍后在配置中使用它。

感谢您的任何提示，请忽略注入(inject)器，我无法在 XSLT 中使用它

我的配置如下:

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        clean: [
                    'libs/js/combined/combined.min.v-*.js', 
                    'combined.min.v-*.css'      
                ],
        concat: {
            css: {
                src: [
                    'style.css'
                ],
                dest: 'combined.css'
            },
            js: {
                src: [
                    'libs/js/common.js'
                ],
                dest: 'libs/js/temp/combined.js'
            }
        },
        cssmin: {
            css: {
                src: 'combined.css',
                dest: 'combined.min.css'
            }
        },
        uglify: {
            js: {
                files: {
                    'libs/js/temp/combined.min.js': ['libs/js/temp/combined.js']
                }
            }
        },  
      hashify: {
        simple: {
          options: {
            basedir: '', 
            copy: true, 
            hashmap: 'hashify-hashmap.json' 
          },
          files: [{
            src: 'combined.min.css', 
            dest: 'combined.min.v-{{hash}}.css', 
          },
          {
            src: 'libs/js/temp/combined.min.js',
            dest: 'libs/js/combined/combined.min.v-{{hash}}.js'
          }]    
        }
      },
      injector: {   

        options: {
            template : 'libs/xsl/main_domain/xhtml.xsl',
            destFile : 'libs/xsl/main_domain/xhtml-generated.xsl' 
        },      
        local_dependencies: {
          files: {              
            'libs/xsl/main_domain/xhtml.xsl': ['libs/js/combined/combined.min.v-*.js', 'combined.min.v-*.css'],
          }
        }

      },
    });
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-hashify');
    grunt.loadNpmTasks('grunt-injector');   
    grunt.registerTask('default', ['clean', 'concat:css', 'cssmin:css', 'concat:js', 'uglify:js', 'hashify:simple', 'injector']);
};

更新:似乎 grunt-xslt 即使使用他们的示例也不起作用，所以我需要另一个解决方案(与 XML 兼容的模板系统)

接下来我尝试的(不兼容 XML，但我认为可以解决这个问题)是 grunt-template，但我认为 {{hash}} 没有被评估。

'template': {
    'process-html-template': {
        'options': {
            'data': {
                'js_file': 'libs/js/combined/combined.min.v-{{hash}}.js',
            }
        },
        'files': {
            'tmp/xhtml.xsl': ['libs/xsl/main_domain/xhtml.xsl']
        }
    }
}

Answer 1

grunt 模板插值的语法实际上是 <%= ... %> ( http://gruntjs.com/api/grunt.template )，并注意:它适用于配置变量，而不是任何 javascript 变量

所以你应该使用:

grunt.initConfig({
    // ...
    'hash' : '(...your way of computing the hash...)',
    'template': {
        'process-html-template': {
            'options': {
                'data': {
                    'js_file': 'libs/js/combined/combined.min.v-<%= hash %>.js',
                }
            },
            'files': {
                'tmp/xhtml.xsl': ['libs/xsl/main_domain/xhtml.xsl']
            }
        }
    }
    // ...
});