More efficient way of copying dist files in Grunt?

Question

New to gruntjs and currently using it for moving some npm distributions to a public/js folder.

Here is the code:

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

};

Is there any way to make this code smaller, rather than have lots of individual copy commands?

Thanks

Something like browersify would help with this. As browersify works on the concept of bundling together files mentioned in the ``main`` field of the package.json of the respective package, it would work for your use-case. In case you want to fetch files outside of the ``main`` field of the npm package, you can use transforms like ``browserify-shim`` . Also for bundling CSS , transforms like ``parcelify`` would be helpful — Prayag Verma, Jan 15 '16 at 12:28

score 9 · Accepted Answer · answered Jan 18 '16 at 04:48

I would go about this by creating two targets in my copy configuration, one for JS and one for CSS. I would use some of the features provided by Grunt for dynamically building the files object to save me from typing and maintaining each destination path. This way, when I want to add files, I need only add their paths to the respective src array.

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

More efficient way of copying dist files in Grunt?

1 Answers1