jaysalvat / gulp-sizereport Goto Github PK
View Code? Open in Web Editor NEWDisplay a report of the size of your project and trigger alarms when the sizes are higher than expected.
Display a report of the size of your project and trigger alarms when the sizes are higher than expected.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.