├── .gitignore ├── LICENSE ├── README.md ├── index.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Chris Gaudreau 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # progress-bar-webpack-plugin 2 | ![progress-bar-webpack-plugin](http://i.imgur.com/OIP1gnj.gif) 3 | 4 | ## Installation 5 | 6 | ``` 7 | npm i -D progress-bar-webpack-plugin 8 | ``` 9 | 10 | ## Usage 11 | 12 | Include the following in your Webpack config. 13 | 14 | ```javascript 15 | var ProgressBarPlugin = require('progress-bar-webpack-plugin'); 16 | 17 | ... 18 | 19 | plugins: [ 20 | new ProgressBarPlugin() 21 | ] 22 | ``` 23 | 24 | ## Options 25 | 26 | Accepts almost all of the same options as [node-progress](https://github.com/tj/node-progress#options). 27 | 28 | - `format` the format of the progress bar 29 | - `width` the displayed width of the progress bar defaulting to total 30 | - `complete` completion character defaulting to "=" 31 | - `incomplete` incomplete character defaulting to " " 32 | - `renderThrottle` minimum time between updates in milliseconds defaulting to 16 33 | - `clear` option to clear the bar on completion defaulting to true 34 | - `callback` optional function to call when the progress bar completes 35 | - `stream` the output stream defaulting to stderr 36 | - `summary` option to show summary of time taken defaulting to true 37 | - `summaryContent` optional custom summary message if summary option is false 38 | - `customSummary` optional function to display a custom summary (passed build time) 39 | 40 | The `format` option accepts the following tokens: 41 | 42 | - `:bar` the progress bar itself 43 | - `:current` current tick number 44 | - `:total` total ticks 45 | - `:elapsed` time elapsed in seconds 46 | - `:percent` completion percentage 47 | - `:msg` current progress message 48 | 49 | The default format uses the `:bar` and `:percent` tokens. 50 | 51 | Use [chalk](https://github.com/chalk/chalk) to sprinkle on a few colors. 52 | 53 | To include the time elapsed and prevent the progress bar from being cleared on build completion: 54 | 55 | ```javascript 56 | new ProgressBarPlugin({ 57 | format: ' build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)', 58 | clear: false 59 | }) 60 | ``` 61 | 62 | ## License 63 | 64 | MIT 65 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var ProgressBar = require('progress'); 2 | var chalk = require('chalk'); 3 | var webpack = require('webpack'); 4 | 5 | module.exports = function ProgressBarPlugin(options) { 6 | options = options || {}; 7 | 8 | var stream = options.stream || process.stderr; 9 | var enabled = stream && stream.isTTY; 10 | 11 | if (!enabled) { 12 | return function () {}; 13 | } 14 | 15 | var barLeft = chalk.bold('['); 16 | var barRight = chalk.bold(']'); 17 | var preamble = chalk.cyan.bold(' build ') + barLeft; 18 | var barFormat = options.format || preamble + ':bar' + barRight + chalk.green.bold(' :percent'); 19 | var summary = options.summary !== false; 20 | var summaryContent = options.summaryContent; 21 | var customSummary = options.customSummary; 22 | 23 | delete options.format; 24 | delete options.total; 25 | delete options.summary; 26 | delete options.summaryContent; 27 | delete options.customSummary; 28 | 29 | var barOptions = Object.assign({ 30 | complete: '=', 31 | incomplete: ' ', 32 | width: 20, 33 | total: 100, 34 | clear: true 35 | }, options); 36 | 37 | var bar = new ProgressBar(barFormat, barOptions); 38 | 39 | var running = false; 40 | var startTime = 0; 41 | var lastPercent = 0; 42 | var terminated = false; 43 | 44 | return new webpack.ProgressPlugin(function (percent, msg) { 45 | if (terminated) { 46 | return; 47 | } 48 | 49 | if (!running && lastPercent !== 0 && !customSummary) { 50 | stream.write('\n'); 51 | } 52 | 53 | var newPercent = Math.floor(percent * barOptions.width); 54 | 55 | if (lastPercent < percent || newPercent === 0) { 56 | lastPercent = percent; 57 | } 58 | 59 | bar.update(percent, { 60 | msg: msg 61 | }); 62 | 63 | if (!running) { 64 | running = true; 65 | startTime = new Date; 66 | lastPercent = 0; 67 | } else if (percent === 1) { 68 | var now = new Date; 69 | var buildTime = (now - startTime) / 1000 + 's'; 70 | 71 | bar.terminate(); 72 | 73 | if (summary) { 74 | stream.write(chalk.green.bold('Build completed in ' + buildTime + '\n\n')); 75 | } else if (summaryContent) { 76 | stream.write(summaryContent + '(' + buildTime + ')\n\n'); 77 | } 78 | 79 | if (customSummary) { 80 | customSummary(buildTime); 81 | } 82 | 83 | running = false; 84 | terminated = true; 85 | } 86 | }); 87 | }; 88 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "progress-bar-webpack-plugin", 3 | "version": "2.1.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@types/color-name": { 8 | "version": "1.1.1", 9 | "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", 10 | "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==" 11 | }, 12 | "ansi-styles": { 13 | "version": "4.2.1", 14 | "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", 15 | "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", 16 | "requires": { 17 | "@types/color-name": "^1.1.1", 18 | "color-convert": "^2.0.1" 19 | } 20 | }, 21 | "chalk": { 22 | "version": "3.0.0", 23 | "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", 24 | "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", 25 | "requires": { 26 | "ansi-styles": "^4.1.0", 27 | "supports-color": "^7.1.0" 28 | } 29 | }, 30 | "color-convert": { 31 | "version": "2.0.1", 32 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", 33 | "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", 34 | "requires": { 35 | "color-name": "~1.1.4" 36 | } 37 | }, 38 | "color-name": { 39 | "version": "1.1.4", 40 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", 41 | "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" 42 | }, 43 | "has-flag": { 44 | "version": "4.0.0", 45 | "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", 46 | "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" 47 | }, 48 | "progress": { 49 | "version": "2.0.3", 50 | "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", 51 | "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==" 52 | }, 53 | "supports-color": { 54 | "version": "7.1.0", 55 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", 56 | "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", 57 | "requires": { 58 | "has-flag": "^4.0.0" 59 | } 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "progress-bar-webpack-plugin", 3 | "version": "2.1.0", 4 | "description": "A progress bar for Webpack.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/clessg/progress-bar-webpack-plugin.git" 12 | }, 13 | "keywords": [ 14 | "webpack", 15 | "plugin", 16 | "progress", 17 | "bar" 18 | ], 19 | "author": "Chris Gaudreau (https://github.com/clessg)", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/clessg/progress-bar-webpack-plugin/issues" 23 | }, 24 | "homepage": "https://github.com/clessg/progress-bar-webpack-plugin#readme", 25 | "dependencies": { 26 | "chalk": "^3.0.0", 27 | "progress": "^2.0.3" 28 | }, 29 | "peerDependencies": { 30 | "webpack": "^1.3.0 || ^2 || ^3 || ^4 || ^5" 31 | } 32 | } 33 | --------------------------------------------------------------------------------