为多个 grunt concat 操作重用 src/dest 位置答案

【问题标题】：Reusing src/dest location for multiple grunt concat operations为多个 grunt concat 操作重用 src/dest 位置
【发布时间】：2015-02-26 21:30:50
【问题描述】：

我目前使用grunt-contrib-concat 进行此设置：

concat: {
    injectedJs: {
        'dist/js/inject/beatportInject.js': ['src/js/thirdParty/jquery.js', 'src/js/inject/beatportInject.js'],
        'dist/js/inject/streamusInject.js': ['src/js/thirdParty/jquery.js', 'src/js/thirdParty/lodash.js', 'src/js/inject/streamusInject.js'],
        'dist/js/inject/streamusShareInject.js': ['src/js/thirdParty/jquery.js', 'src/js/thirdParty/lodash.js', 'src/js/inject/streamusShareInject.js'],
        'dist/js/inject/youTubeInject.js': ['src/js/thirdParty/jquery.js', 'src/js/thirdParty/lodash.js', 'src/js/inject/youTubeInject.js'],
        'dist/js/inject/youTubeIFrameInject.js': ['src/js/thirdParty/jquery.js', 'src/js/thirdParty/lodash.js', 'src/js/inject/youTubeIFrameInject.js']
    }
}

此代码有效，但这些字符串中显然有很多非 DRY 代码。

我希望通过以下事实来解决这个问题：

总是希望 'dest' 成为 'dist/js/inject/'
总是希望“src”以“src/js/”开头

所以，在我看来，我可以说类似于这个伪代码的话：

concat: {
    injectedJs: {
        files: [{
            expand: true,
            dest: 'dist/js/inject/',
            cwd: 'src/js'

            //'beatportInject.js': ['thirdParty/jquery.js', 'inject/beatportInject.js'],
            //'streamusInject.js': ['thirdParty/jquery.js', 'thirdParty/lodash.js', 'inject/streamusInject.js'],
            //'streamusShareInject.js': ['thirdParty/jquery.js', 'thirdParty/lodash.js', 'inject/streamusShareInject.js'],
            //'youTubeInject.js': ['thirdParty/jquery.js', 'thirdParty/lodash.js', 'inject/youTubeInject.js'],
            //'youTubeIFrameInject.js': ['thirdParty/jquery.js', 'thirdParty/lodash.js', 'inject/youTubeIFrameInject.js']
        }]
    }
}

那时我的想法落空了。这是否可以通过 Grunt 实现，还是我需要进行大量重复？

【问题讨论】：

如果你愿意使用commonjs和webpack，你只需要声明入口点。据我所知，使用concat 无法实现更好的效果，因为目标文件名不同。

标签： gruntjs grunt-contrib-concat

【解决方案1】：

记住配置只是简单的 javascript，所以最简单的不涉及破解 Grunt 的解决方案就是

function prefix(fileConfig) {
    var newFileConfig = {};
    var distPrefix = 'dist/js/inject/';
    var srcPrefix = 'src/js/';

    for(var dest in fileConfig) {
        newFileConfig[distPrefix + dest] = srcPrefix + fileConfig[dest];
    }

    return newFileConfig;
}

grunt.initConfig({
    concat : {
        injectedJs : {
            files: [
                prefix({
                'beatportInject.js': ['thirdParty/jquery.js', 'inject/beatportInject.js'],
                'streamusInject.js': ['thirdParty/jquery.js', 'thirdParty/lodash.js', 'inject/streamusInject.js'],
                'streamusShareInject.js': ['thirdParty/jquery.js', 'thirdParty/lodash.js', 'inject/streamusShareInject.js'],
                'youTubeInject.js': ['thirdParty/jquery.js', 'thirdParty/lodash.js', 'inject/youTubeInject.js'],
                'youTubeIFrameInject.js': ['thirdParty/jquery.js', 'thirdParty/lodash.js', 'inject/youTubeIFrameInject.js']
            })
            ]
        }
    }
})

至于您的实际问题，连接脚本，看来您真正应该研究的是 Browserify 或 WebPack 之类的东西。这将为您省去很多麻烦。

【讨论】：