grunt-size-report

Create size report of your project

grunt-size-report

Create size report of your project

This plugin requires Grunt ~0.4.1

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-size-report --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-size-report');

In your project's Gruntfile, add a section named size_report to the data object passed into grunt.initConfig().

grunt.initConfig({
    size_report: {
        your_target: {
            files: {
                list: ['path/to/*.html', 'path/to/images/*.jpg']
            },
        },
    },
})

Type: String
Default: Size report

Changes the header of the report.

Type: Boolean
Default: false

Show hide additional statistics about the files: File count and average file size.

Generate a size report by adding the compiled project files to the 'list' variable:

grunt.initConfig({
    size_report: {
        default: {
            files: {
                list: ['path/to/*.html', 'path/to/images/*.jpg']
            },
        },
    },
})

This generates a size report similar to:

̴̴̴̴̴̴̴̴̴̴̴
Size report
̴̴̴̴̴̴̴̴̴̴̴
 
Filename                      Size          %
---------------------------------------------
test/testfiles/test4.txt     9.6 KiB    46.8%
test/testfiles/test1.txt     7.0 KiB    34.0%
test/testfiles/test2.txt     3.5 KiB    17.0%
test/testfiles/test3.txt     447 B       2.1%
=============================================
Total:                      20.5 KiB

Generate multiple reports by adding different targets to your Grunt config:

grunt.initConfig({
    size_report: {
        images: {
            options: {
                header: 'Images size report'
            },
            files: {
                list: ['path/to/images/*.jpg']
            },
        },
        css: {
            options: {
                header: 'CSS size report'
            },
            files: {
                list: ['path/to/css/*.css']
            },
        },
        fonts: {
            options: {
                header: 'Font size report'
            },
            files: {
                list: ['path/to/fonts/*.woff', 'path/to/fonts/*.ttf']
            },
        },
        js: {
            options: {
                header: 'JavaScript size report'
            },
            files: {
                list: ['path/to/js/*.js']
            },
        },
    },
})
  • 0.1.3 Added statistics and options.showStatistics
  • 0.1.2 Added options.header
  • 0.1.1 Added sample report to README
  • 0.1.0 Initial release