jaysalvat / gulp-sizereport Goto Github PK

I am having trouble getting this to work. . I keep getting a "ReferenceError: sizereport is not defined at...". Is there a break down of how to actually use this against files? Thanks.

Great job! But I was wondering that it prints nothing when I have more than 16 files in my project. And I have tried "gulp-size" plugin which has the save problem... Really odd.

I am trying to fail a build using the documentation provided and have come up with

gulp.task('sizereport', function () {
    return gulp.src('./dist/scripts/*.js')
        .pipe(sizereport({
          '*' : {
            'maxSize': 100000,
            'fail' : true
          }
        }));
});

It does give me the output in red color but doesnt fail the build. What am I missing?

Hello!

Is it possible to use this plugin together with the gulp-cssnano and gulp-uglify without install standalone cssnano and uglifyjs

Thanks for great plugin

#7

Hello,

It would be great if I could output the report to a mark down file or json.

Just a thought!

Thanks

Configuration:

{
    gzip: true,
    minifier: function ( contents, filepath ) {
        if ( filepath.match( /\.min\./g ) ) {
            return contents
        }

        var file_extension = '';

        var minified_filename = filepath.replace( /\.(js|css)$/, function(match, extension ) {
            file_extension = extension;
            return '.min.' + extension;
        } );

        // re-construct a path like: /path/to/assets/js/main.min.js
        var minified_path = path.join( '/path/to/assets/', file_extension, minified_filename );

        if ( fs.existsSync( minified_path ) ) {
            return fs.readFileSync( minified_path );
        }

        return '';
    }
}

Since the filepath only contains the filename I had to hardcode the full path which is not ideal.

To the best of my knowledge I don't think there are other ways to get the full path rather than hardcoding it in this case.

Having access to the full path will prevent us having to hardcode the path on every project.

Optionally we could add the full path as a third argument for backward-compatibility.

Thanks ;-)

When building multiple versions of a library, the total size isn't really meaningful most of the time. It would be nice if you could pass in an option to remove the last total row like so:

gulp.src('./dist/*.js')
  .pipe(sizereport({ total: false }))

Can a table title be defined in the options for the data table and then be output above the table in the console output? For Example the data table with a title of 'CSS Files' defined in the options:

CSS Files

┌────────────────────┬───────────┬───────────┐
│ File │ Original │ Gzipped │
├────────────────────┼───────────┼───────────┤
│ global.compiled.js │ 445.25 kB │ 125.08 kB │
├────────────────────┼───────────┼───────────┤
│ index.compiled.js │ 572.2 kB │ 135.66 kB │
├────────────────────┼───────────┼───────────┤
│ style.compiled.js │ 4.34 kB │ 1.83 kB │
├────────────────────┼───────────┼───────────┤
│ │ 1.02 MB │ 262.57 kB │
└────────────────────┴───────────┴───────────┘

Thanks!

Hi! I like the report. I've been using gulp-size, but when you're working with a library it can get very verbose and annoying. This module's output is very nice and clean.

One thing that would make it better is if you it could automatically detect already minified files (with the pattern *.min.js) and add them to the table, without minifying them after the fact. When I'm building a library, most of the time these files are already minified (possibly with custom settings) and it's kind of a waste to minify them again, just for the size-report.

For example on the project I'm currently using size-report for, I get this report when I pipe in my ./dist directory:

I want to be able to fail a Gulp task if a size alert is given. If the file is too large I don't want the file to go out anymore.

I have a sizereport task as follows:

gulp.task('sizereport', () => {
    return gulp.src('build/assets/**/*.*)
        .pipe(production(sizereport({
            gzip: true,
            minifier: function (contents, filepath) {
                if (filepath.match(/\.min\./g)) {
                    return contents
                }
            }
        })))
})

As all of my assets (Js, Scss etc) are being minified conditionally based on the environment in each of their own tasks. I was hoping this snippet above would pick up on those and show the .min versions alongside the non-minified versions.

However, I appear to be getting the following error:

TypeError: Cannot read property 'length' of undefined
    at DestroyableTransform._transform (/Users/jaycollett/Development/jaycollett/jaybox 2/node_modules/gulp-sizereport/index.js:100:43)
    at DestroyableTransform.Transform._read (/Users/jaycollett/Development/jaycollett/jaybox 2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (/Users/jaycollett/Development/jaycollett/jaybox 2/node_modules/readable-stream/lib/_stream_transform.js:172:83)
    at doWrite (/Users/jaycollett/Development/jaycollett/jaybox 2/node_modules/readable-stream/lib/_stream_writable.js:428:64)
    at writeOrBuffer (/Users/jaycollett/Development/jaycollett/jaybox 2/node_modules/readable-stream/lib/_stream_writable.js:417:5)
    at DestroyableTransform.Writable.write (/Users/jaycollett/Development/jaycollett/jaybox 2/node_modules/readable-stream/lib/_stream_writable.js:334:11)
    at DestroyableTransform.ondata (/Users/jaycollett/Development/jaycollett/jaybox 2/node_modules/readable-stream/lib/_stream_readable.js:619:20)
    at DestroyableTransform.emit (events.js:188:13)
    at DestroyableTransform.EventEmitter.emit (domain.js:459:23)
    at addChunk (/Users/jaycollett/Development/jaycollett/jaybox 2/node_modules/readable-stream/lib/_stream_readable.js:291:12)
    at readableAddChunk (/Users/jaycollett/Development/jaycollett/jaybox 2/node_modules/readable-stream/lib/_stream_readable.js:278:11)
    at DestroyableTransform.Readable.push (/Users/jaycollett/Development/jaycollett/jaybox 2/node_modules/readable-stream/lib/_stream_readable.js:245:10)
    at DestroyableTransform.Transform.push (/Users/jaycollett/Development/jaycollett/jaybox 2/node_modules/readable-stream/lib/_stream_transform.js:148:32)
    at Pumpify.onReadable (/Users/jaycollett/Development/jaycollett/jaybox 2/node_modules/to-through/index.js:25:14)
    at Pumpify.emit (events.js:188:13)
    at Pumpify.EventEmitter.emit (domain.js:459:23)

When I change the source directory to just /build/assets/ I no longer get the error, but I also don't get the report.

Any help would be appreciated.

Thanks,
Jay

Very nice tool! ❤️

It would be awesome if you could add support for JS sourcemaps as well. Like the "minified" report, we could check filepath.match(/\.map\./g files and add sizes to a new row (optional).

This would help to analyse the sourcemap build process. E.g. whether they are:

• inlined in the src *.js file

• inlined in the src *.js.map file

• reference to src *.js in *.js.map file e.g. build.js.map:

  {
    "version":3,
    "sources":["first.js", "second.js"],
    "names":[....],
    "mappings":".......",
    "file":"build.js",
    "sourceRoot":"../src"
  }
  

There are some other options as well. But I guess there are the mainly used options.