From d2f8117b1c6de83d9123c1c27a4aca63eac042c8 Mon Sep 17 00:00:00 2001 From: Dominic Valenciana Date: Wed, 6 Sep 2017 18:07:47 -0600 Subject: [PATCH 1/2] Added build flag to cli. --- cli.js | 4 ++++ helpers/arguments.js | 1 + helpers/build.js | 17 +++++++++++++++++ package-lock.json | 26 ++++++++++++++++++++++++-- package.json | 3 +++ templates/readme.md | 2 +- 6 files changed, 50 insertions(+), 3 deletions(-) create mode 100644 helpers/build.js diff --git a/cli.js b/cli.js index f64dfa4..2b1ee30 100755 --- a/cli.js +++ b/cli.js @@ -2,6 +2,7 @@ const template = require('./helpers/buildTemplate.js'); const arguments = require('./helpers/arguments.js'); const ArgsManager = require("./helpers/ArgsManager"); +const build = require('./helpers/build'); const args = new ArgsManager(); @@ -21,6 +22,9 @@ if(args.hasFlag(arguments.MODULE)) { template.copyFileTo('gitignore', '.gitignore'); console.log(`${elementName} module was successfully created!`); +} else if(args.hasFlag(arguments.BUILD)){ + build.buildFile(elementName); + console.log(`${elementName} has been built.`); } else { template.createElementTemplate(elementName); console.log(`${elementName} was successfully created!`); diff --git a/helpers/arguments.js b/helpers/arguments.js index 9f6cc64..10f8606 100644 --- a/helpers/arguments.js +++ b/helpers/arguments.js @@ -1,5 +1,6 @@ module.exports.MODULE = 'module'; +module.exports.BUILD = 'build'; /** * Check to make sure we have an element name diff --git a/helpers/build.js b/helpers/build.js new file mode 100644 index 0000000..064e800 --- /dev/null +++ b/helpers/build.js @@ -0,0 +1,17 @@ +const uglify = require('uglify-es'); +const fs = require('fs'); + +const scopeStart = '(function(){'; +const scopeEnd = `})();`; + +module.exports.buildFile = (fileName) => { + + let codeString = fs.readFileSync(`./${fileName}.js`, 'utf-8'); + codeString = `${scopeStart} ${codeString} ${scopeEnd}`; + + const result = uglify.minify(codeString); + + fs.writeFileSync(`./${fileName}.min.js`, result.code); + +}; + diff --git a/package-lock.json b/package-lock.json index 3a9da4a..603ad89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,27 @@ { "name": "create-element-cli", - "version": "0.3.0", - "lockfileVersion": 1 + "version": "0.3.1", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "commander": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz", + "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==" + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + }, + "uglify-es": { + "version": "3.0.28", + "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.0.28.tgz", + "integrity": "sha512-xw1hJsSp361OO0Sq0XvNyTI2wfQ4eKNljfSYyeYX/dz9lKEDj+DK+A8CzB0NmoCwWX1MnEx9f16HlkKXyG65CQ==", + "requires": { + "commander": "2.11.0", + "source-map": "0.5.7" + } + } + } } diff --git a/package.json b/package.json index 275029c..d66e1db 100644 --- a/package.json +++ b/package.json @@ -26,5 +26,8 @@ "homepage": "https://github.com/OwlTechnology/create-element-cli#readme", "bin": { "create-element": "cli.js" + }, + "dependencies": { + "uglify-es": "^3.0.28" } } diff --git a/templates/readme.md b/templates/readme.md index eca9c60..3f8caf4 100644 --- a/templates/readme.md +++ b/templates/readme.md @@ -13,7 +13,7 @@ npm i /* {tagName} */ --- ```Html - + ``` or if you're bundling ```Javascript From 1d7925fe02824bfba81d67b526f5e870e9a41a93 Mon Sep 17 00:00:00 2001 From: Dominic Valenciana Date: Wed, 6 Sep 2017 18:15:27 -0600 Subject: [PATCH 2/2] Updated read me --- readme.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/readme.md b/readme.md index d72602c..8834821 100644 --- a/readme.md +++ b/readme.md @@ -39,3 +39,14 @@ This will create: - .gitignore in your current working directory. + + +## Build & Scope an element + +To uglify and scope a custom element so that it's usuable for the browser, run the following: + +```CLI +create-element --buid [element-name] +``` + +This command will look for `[element-name].js` in the current directory and produce the a `[element-name].min.js` file in the same directory.