Skip to content

Commit 670e382

Browse files
gaearongaearon
committed
Minor tweaks to console output
1 parent 4ac60e5 commit 670e382

File tree

1 file changed

+73
-53
lines changed

1 file changed

+73
-53
lines changed

‎scripts/build.js‎

Lines changed: 73 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function removeFileNameHash(fileName) {
2727
.replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
2828
}
2929

30-
function getDifferentLabel(currentSize, previousSize) {
30+
function getDifferenceLabel(currentSize, previousSize) {
3131
var FIFTY_KILOBYTES = 1024 * 50;
3232
var difference = currentSize - previousSize;
3333
var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0;
@@ -42,10 +42,10 @@ function getDifferentLabel(currentSize, previousSize) {
4242
}
4343
}
4444

45+
// First, read the current file sizes in build directory.
46+
// This lets us display how much they changed later.
4547
recursive(paths.appBuild, (err, fileNames) => {
46-
fileNames = fileNames || [];
47-
48-
var previousSizeMap = fileNames
48+
var previousSizeMap = (fileNames || [])
4949
.filter(fileName => /\.(js|css)$/.test(fileName))
5050
.reduce((memo, fileName) => {
5151
var contents = fs.readFileSync(fileName);
@@ -58,9 +58,44 @@ recursive(paths.appBuild, (err, fileNames) => {
5858
// if you're in it, you don't end up in Trash
5959
rimrafSync(paths.appBuild + '/*');
6060

61+
// Start the webpack build
6162
build(previousSizeMap);
6263
});
6364

65+
function printFileSizes(stats, previousSizeMap) {
66+
var assets = stats.toJson().assets
67+
.filter(asset => /\.(js|css)$/.test(asset.name))
68+
.map(asset => {
69+
var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
70+
var size = gzipSize(fileContents);
71+
var previousSize = previousSizeMap[removeFileNameHash(asset.name)];
72+
var difference = getDifferenceLabel(size, previousSize);
73+
return {
74+
folder: path.join('build', path.dirname(asset.name)),
75+
name: path.basename(asset.name),
76+
size: size,
77+
sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : '')
78+
};
79+
});
80+
assets.sort((a, b) => b.size - a.size);
81+
82+
var longestSizeLabelLength = Math.max.apply(null,
83+
assets.map(a => stripAnsi(a.sizeLabel).length)
84+
);
85+
assets.forEach(asset => {
86+
var sizeLabel = asset.sizeLabel;
87+
var sizeLength = stripAnsi(sizeLabel).length;
88+
if (sizeLength < longestSizeLabelLength) {
89+
var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
90+
sizeLabel += rightPadding;
91+
}
92+
console.log(
93+
' ' + sizeLabel +
94+
' ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
95+
);
96+
});
97+
}
98+
6499
function build(previousSizeMap) {
65100
console.log('Creating an optimized production build...');
66101
webpack(config).run((err, stats) => {
@@ -75,64 +110,49 @@ function build(previousSizeMap) {
75110

76111
console.log('File sizes after gzip:');
77112
console.log();
78-
var assets = stats.toJson().assets
79-
.filter(asset => /\.(js|css)$/.test(asset.name))
80-
.map(asset => {
81-
var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
82-
var size = gzipSize(fileContents);
83-
var previousSize = previousSizeMap[removeFileNameHash(asset.name)];
84-
var difference = getDifferentLabel(size, previousSize);
85-
return {
86-
folder: path.join('build', path.dirname(asset.name)),
87-
name: path.basename(asset.name),
88-
size: size,
89-
sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : '')
90-
};
91-
});
92-
assets.sort((a, b) => b.size - a.size);
93-
94-
var longestSizeLabelLength = Math.max.apply(null,
95-
assets.map(a => stripAnsi(a.sizeLabel).length)
96-
);
97-
assets.forEach(asset => {
98-
var sizeLabel = asset.sizeLabel;
99-
var sizeLength = stripAnsi(sizeLabel).length;
100-
if (sizeLength < longestSizeLabelLength) {
101-
var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
102-
sizeLabel += rightPadding;
103-
}
104-
console.log(
105-
' ' + sizeLabel +
106-
' ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
107-
);
108-
});
113+
printFileSizes(stats, previousSizeMap);
109114
console.log();
110115

111116
var openCommand = process.platform === 'win32' ? 'start' : 'open';
112117
var homepagePath = require(paths.appPackageJson).homepage;
113-
if (homepagePath) {
114-
console.log('You can now publish them at ' + homepagePath + '.');
115-
console.log('For example, if you use GitHub Pages:');
118+
var publicPath = config.output.publicPath;
119+
if (homepagePath && homepagePath.indexOf('.github.io/') !== -1) {
120+
// "homepage": "http://user.github.io/project"
121+
console.log('You can now deploy them to ' + chalk.green(homepagePath) + ':');
116122
console.log();
117-
console.log(' git commit -am "Save local changes"');
118-
console.log(' git checkout -B gh-pages');
119-
console.log(' git add -f build');
120-
console.log(' git commit -am "Rebuild website"');
121-
console.log(' git filter-branch -f --prune-empty --subdirectory-filter build');
122-
console.log(' git push -f origin gh-pages');
123-
console.log(' git checkout -');
123+
console.log(' ' + chalk.blue('git') + chalk.cyan(' commit -am ') + chalk.yellow('"Save local changes"'));
124+
console.log(' ' + chalk.blue('git') + chalk.cyan(' checkout -B gh-pages'));
125+
console.log(' ' + chalk.blue('git') + chalk.cyan(' add -f build'));
126+
console.log(' ' + chalk.blue('git') + chalk.cyan(' commit -am ' + chalk.yellow('"Rebuild website"')));
127+
console.log(' ' + chalk.blue('git') + chalk.cyan(' filter-branch -f --prune-empty --subdirectory-filter build'));
128+
console.log(' ' + chalk.blue('git') + chalk.cyan(' push -f origin gh-pages'));
129+
console.log(' ' + chalk.blue('git') + chalk.cyan(' checkout -'));
124130
console.log();
131+
console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
132+
console.log('You can control this with the ' + chalk.green('homepage') + ' field in your ' + chalk.cyan('package.json') + '.');
133+
} else if (publicPath !== '/') {
134+
// "homepage": "http://mywebsite.com/project"
135+
console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
136+
console.log('You can control this with the ' + chalk.green('homepage') + ' field in your ' + chalk.cyan('package.json') + '.');
125137
} else {
126-
console.log('You can now serve them with any static server.');
127-
console.log('For example:');
138+
// no homepage or "homepage": "http://mywebsite.com"
139+
console.log('You can now deploy them or serve them with a static server:');
128140
console.log();
129-
console.log(' npm install -g pushstate-server');
130-
console.log(' pushstate-server build');
131-
console.log(' ' + openCommand + ' http://localhost:9000');
141+
console.log(' ' + chalk.blue('npm') + chalk.cyan(' install -g pushstate-server'));
142+
console.log(' ' + chalk.blue('pushstate-server') + chalk.cyan(' build'));
143+
console.log(' ' + chalk.blue(openCommand) + chalk.cyan(' http://localhost:9000'));
132144
console.log();
133-
console.log(chalk.dim('The project was built assuming it is hosted at the root.'));
134-
console.log(chalk.dim('Set the "homepage" field in package.json to override this.'));
135-
console.log(chalk.dim('For example, "homepage": "http://user.github.io/project".'));
145+
console.log('The project was built assuming it is hosted at the server root.');
146+
if (homepagePath) {
147+
// "homepage": "http://mywebsite.com"
148+
console.log('You can control this with the ' + chalk.green('homepage') + ' field in your ' + chalk.cyan('package.json') + '.');
149+
} else {
150+
// no homepage
151+
console.log('To override this, specify the ' + chalk.green('homepage') + ' in your ' + chalk.cyan('package.json') + '.');
152+
console.log('For example, add this to build it for GitHub Pages:')
153+
console.log();
154+
console.log(' ' + chalk.green('"homepage"') + chalk.cyan(': ') + chalk.green('"http://myname.github.io/myapp"') + chalk.cyan(','));
155+
}
136156
}
137157
console.log();
138158
});

0 commit comments

Comments
 (0)