1

現在、 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 で達成できますか、それともかなりの繰り返しが必要ですか?

4

1 に答える 1

0

構成は単純な 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 のようなものを実際に調べる必要があるようです。これにより、多くの手間が省けます。

于 2015-07-02T10:30:32.050 に答える