在 Grunt 中复制 dist 文件的更有效方法？答案

【问题标题】：More efficient way of copying dist files in Grunt?在 Grunt 中复制 dist 文件的更有效方法？
【发布时间】：2016-01-15 10:55:59
【问题描述】：

gruntjs 新手，目前使用它来将一些 npm 分发版移动到 public/js 文件夹。

代码如下：

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    copy: {
        bootstrapCss: {
            src: "./node_modules/bootstrap/dist/css/bootstrap.css",
            dest: "./public/css/bootstrap.css"
        },
        bootstrapTheme: {
            src: "./node_modules/bootstrap/dist/css/bootstrap-theme.css",
            dest: "./public/css/bootstrap-theme.css"
        },
        bootstrap: {
            src: "./node_modules/bootstrap/dist/js/bootstrap.js",
            dest: "./public/js/libs/bootstrap.js"
        },
        backbone: {
            src: "./node_modules/backbone/backbone.js",
            dest: "./public/js/libs/backbone.js"
        },
        backboneLocalstorage: {
            src: "./node_modules/backbone.localstorage/backbone.localStorage.js",
            dest: "./public/js/libs/backbone.localStorage.js"
        },
        requireJs: {
            src: "./node_modules/requirejs/require.js",
            dest: "./public/js/libs/requirejs.js"
        },
        underscore: {
            src: "./node_modules/underscore/underscore.js",
            dest: "./public/js/libs/underscore.js"
        },
        jquery: {
            src: "./node_modules/jquery/dist/jquery.js",
            dest: "./public/js/libs/jquery.js"
        },
        requireJsText: {
            src: "./node_modules/requirejs-text/text.js",
            dest: "./public/js/libs/requirejs-text.js"
        }
    }



});

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-copy');

// Default task(s).
grunt.registerTask('default', ['copy']);

};

有没有什么办法可以让这段代码更小，而不是有很多单独的复制命令？

谢谢

【问题讨论】：

类似 browersify 的东西会对此有所帮助。由于 browersify 致力于将各个包的 package.json 的 main 字段中提到的文件捆绑在一起的概念，它适用于您的用例。如果你想在 npm 包的 main 字段之外获取文件，你可以使用像 browserify-shim 这样的转换。同样对于捆绑 CSS ，像 parcelify 这样的转换会很有帮助

标签： javascript gruntjs grunt-contrib-copy

【解决方案1】：

我将通过在我的copy 配置中创建两个目标来解决这个问题，一个用于 JS，一个用于 CSS。我会使用 Grunt 提供的一些 features 来动态构建 files 对象，以使我免于键入和维护每个目标路径。这样，当我想添加文件时，我只需要将它们的路径添加到各自的src 数组中。

grunt.initConfig({
    copy: {
        js: {
            expand: true,
            cwd: './node_modules',
            dest: './public/js/libs/',
            flatten: true,
            filter: 'isFile',
            src: [
                './bootstrap/dist/js/bootstrap.js',
                './backbone/backbone.js',
                './backbone.localstorage/backbone.localStorage.js',
                './requirejs/require.js',
                './underscore/underscore.js',
                './jquery/dist/jquery.js',
                './requirejs-text/text.js'
            ]
        },
        css: {
            expand: true,
            cwd: './node_modules',
            dest: './public/css/',
            flatten: true,
            filter: 'isFile',
            src: [
                './bootstrap/dist/css/bootstrap.css',
                './bootstrap/dist/css/bootstrap-theme.css'
            ]
        }
    }
});

【讨论】：