How to include images in a build using Grunt?

Question

The following script concatenate and minify css and js correctly.

I need to copy in my build directory some foldersa and their files and some other files from root (without minification or concatenation). Example are folder icons (subfolder included if possible), images, and config.xml in root.

Any idea how to change the script?

   module.exports = function (grunt) {

        // project configuration
        grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),
            uglify: {
                options: {
                    banner: '/* App: <%= pkg.name %> - Version: <%= pkg.version %> - Date: <%= grunt.template.today("dd-mm-yyyy") %> - Author: <%= pkg.author %> */\n\n'
                }
            },
            cssmin: {
                options: {
                    banner: '/* App: <%= pkg.name %> - Version: <%= pkg.version %> - Date: <%= grunt.template.today("dd-mm-yyyy") %> - Author: <%= pkg.author %> */\n'
                }
            },
            useminPrepare: {
                html: 'index.html',
                options: {
                    dest: 'build'
                }
            },
            usemin: { html: ['build/index.html'] },
            copy: {
                task0: {
                    src: 'index.html',
                    dest: 'build/index.html'
                }
            }
        });

        // load required modules
        grunt.loadNpmTasks('grunt-contrib-copy');
        grunt.loadNpmTasks('grunt-contrib-concat');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-usemin');

        // task definitions
        grunt.registerTask('build', [
          'copy:task0',
          'useminPrepare',
          'concat',
          'cssmin',
          'uglify',
          'usemin'
        ]);
    };

score 2 · Accepted Answer · edited May 23 '17 at 12:31

I solved my problem using the following script. The trick was to add some tasks to copy object

        task1: {
            expand: true,
            src: ['icons/**'],
            dest: 'build/'
        },

module.exports = function (grunt) {

    // project configuration
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/* App: <%= pkg.name %> - Date: <%= grunt.template.today("dd-mm-yyyy") %> - Author: <%= pkg.author %> */\n\n'
            }
        },
        cssmin: {
            options: {
                banner: '/* App: <%= pkg.name %> - Date: <%= grunt.template.today("dd-mm-yyyy") %> - Author: <%= pkg.author %> */\n'
            }
        },
        useminPrepare: {
            html: 'index.html',
            options: {
                dest: 'build'
            }
        },
        usemin: { html: ['build/index.html'] },
        copy: {
            task0: {
                src: 'index.html',
                dest: 'build/index.html'
            },
            task1: {
                expand: true,
                src: ['icons/**'],
                dest: 'build/'
            },
            task2: {
                expand: true,
                src: ['img/**'],
                dest: 'build/'
            },
            task3: {
                src: 'config.xml',
                dest: 'build/'
            },
            task4: {
                src: 'widget.info',
                dest: 'build/'
            },
            task5: {
                src: 'config.js',
                dest: 'build/'
            },
        },
        clean: {
            build: {
                src: [".tmp"]
            }
        }
        });

    // load required modules
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-usemin');
    grunt.loadNpmTasks('grunt-contrib-clean');

    // task definitions
    grunt.registerTask('build', [
      'copy:task0',     
      'copy:task1',     
      'copy:task2',     
      'copy:task3',     
      'copy:task4',    
      'copy:task5',     
      'useminPrepare', 
      'concat',
      'cssmin',
      'uglify',
      'usemin',         // build
      'clean'           // clean temp folders
    ]);
};

Useful resources which help me out:

https://www.youtube.com/watch?v=gIbfDxF69c8

grunt-contrib-build' is not in the npm registry

How to install grunt and how to build script with it

https://github.com/gruntjs/grunt-contrib-copy

How to include images in a build using Grunt?

1 Answers1