grunt-size-report

Create size report of your project

Getting Started

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

The "size_report" task

Overview

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

Options

header

Type: String
Default: Size report

Changes the header of the report.

showStatistics

Type: Boolean
Default: false

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

Usage Examples

Default behaviour

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

Multiple reports

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

Release History

• 0.1.4 Update deprecated Grunt version
• 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