From 049b420f86978a327d80802e22d0d95bf8bcddab Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 7 Aug 2017 13:35:13 -0400 Subject: [PATCH] Add minified scripts task --- package-lock.json | 18 ++++++++++++++---- package.json | 5 +++-- shoelace.js | 48 ++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 60 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index a7414f016..a7659a7f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -136,9 +136,9 @@ "dev": true }, "chalk": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.0.1.tgz", - "integrity": "sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0g==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz", + "integrity": "sha512-LUHGS/dge4ujbXMJrnihYMcL4AoOweGnw9Tp3kQuqy1Kx5c1qKjqvMJZ6nVJPMWJtKCTN72ZogH3oeSO9g9rXQ==", "dev": true, "requires": { "ansi-styles": "3.2.0", @@ -789,7 +789,7 @@ "integrity": "sha512-G6WnRmdTt2jvJvY+aY+M0AO4YlbxE+slKPZb+jG2P2U9Tyxi3h1fYZ/DgiFU6DC6bv3XIEJoZt+f/kNh8BrWFw==", "dev": true, "requires": { - "chalk": "2.0.1", + "chalk": "2.1.0", "source-map": "0.5.6", "supports-color": "4.2.1" } @@ -2678,6 +2678,16 @@ } } }, + "uglify-js": { + "version": "3.0.27", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.0.27.tgz", + "integrity": "sha512-HD8CmxPXUI62v5tweiulMcP/apAtx1DXGcNZkhKQZyC+MTrTsoCBb8yPAwVrbvpgw3EpRU76bRe6axjIiCYcQg==", + "dev": true, + "requires": { + "commander": "2.11.0", + "source-map": "0.5.6" + } + }, "uniq": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", diff --git a/package.json b/package.json index eb21a957b..fa9a4f270 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ }, "devDependencies": { "autoprefixer": "^7.1.2", - "chalk": "^2.0.1", + "chalk": "^2.1.0", "commander": "^2.11.0", "cssnano": "^3.10.0", "del": "^3.0.0", @@ -19,7 +19,8 @@ "fs": "0.0.1-security", "postcss": "^6.0.8", "postcss-import": "^10.0.0", - "s3": "^4.4.0" + "s3": "^4.4.0", + "uglify-js": "^3.0.27" }, "dependencies": {} } diff --git a/shoelace.js b/shoelace.js index 99ed9d0f0..bd0aae914 100644 --- a/shoelace.js +++ b/shoelace.js @@ -14,8 +14,7 @@ const Path = require('path'); const PostCSS = require('postcss'); const Program = require('commander'); const S3 = require('s3'); - -let stats; +const UglifyJS = require('uglify-js'); // Initialize CLI Program @@ -73,7 +72,7 @@ if(Program.build) { let shoelaceCSS = Path.join(__dirname, 'dist/shoelace.css'); // Remember stats - stats = { + let stats = { originalSize: (output.stats.originalSize / 1024).toFixed(1) + 'KB', minifiedSize: (output.stats.minifiedSize / 1024).toFixed(1) + 'KB' }; @@ -92,12 +91,12 @@ if(Program.build) { } console.log(Chalk.green('CSS Minified: %s! 💪'), Path.relative(__dirname, shoelaceCSS)); - resolve(); + resolve(stats); }); })) // Update docs - .then(() => new Promise((resolve, reject) => { + .then((stats) => new Promise((resolve, reject) => { let docs = Path.join(__dirname, 'index.html'); let content = FS.readFileSync(docs, 'utf8'); @@ -119,6 +118,45 @@ if(Program.build) { }); })) + // Minify scripts + .then(() => new Promise((resolve, reject) => { + let scripts = { + 'dropdowns.js': FS.readFileSync(Path.join(__dirname, 'source/js/dropdowns.js'), 'utf8'), + 'tabs.js': FS.readFileSync(Path.join(__dirname, 'source/js/tabs.js'), 'utf8') + }; + + let output = UglifyJS.minify(scripts, { + output: { + comments: /^!/ + } + }); + if(output.error) { + reject(output.error); + return; + } + + resolve(output); + })) + + // Write minified scripts to dist + .then((output) => new Promise((resolve, reject) => { + let shoelaceJS = Path.join(__dirname, 'dist/shoelace.js'); + + // Update placeholders in JS + output.code = output.code.replace(/\{version\}/g, __version); + + // Write output file + FS.writeFile(shoelaceJS, output.code, 'utf8', (err) => { + if(err) { + reject(err); + return; + } + console.log(Chalk.green('JS Minified: %s! 💪'), Path.relative(__dirname, shoelaceJS)); + + resolve(); + }); + })) + // Publish to S3 .then(() => new Promise((resolve, reject) => { // Skip if the --s3 flag is missing