minify the result

index-test.html

@@ -123,12 +123,21 @@ <h2>Options</h2>
           <div class="row">
             <div class="col-3">
               <div class="form-check">
-                <input id="checkboxPopper" class="form-check-input" type="checkbox" name="popper">
+                <input id="checkboxPopper" class="form-check-input" type="checkbox">
                 <label class="form-check-label" for="checkboxPopper">
                   Include Popper.js
                 </label>
               </div>
             </div>
+
+            <div class="col-3">
+              <div class="form-check">
+                <input id="chkMinify" class="form-check-input" type="checkbox">
+                <label class="form-check-label" for="chkMinify">
+                  Minify
+                </label>
+              </div>
+            </div>
           </div>
         </div>
         <div class="col-12">

index.html

@@ -129,6 +129,15 @@ <h2>Options</h2>
                 </label>
               </div>
             </div>
+
+            <div class="col-3">
+              <div class="form-check">
+                <input id="chkMinify" class="form-check-input" type="checkbox">
+                <label class="form-check-label" for="chkMinify">
+                  Minify
+                </label>
+              </div>
+            </div>
           </div>
         </div>
         <div class="col-12">

package.json

@@ -30,6 +30,7 @@
     "axios": "^0.18.0",
     "bootstrap": "^4.1.3",
     "boxicons": "^1.7.1",
-    "jquery": "^3.3.1"
+    "jquery": "^3.3.1",
+    "uglifyjs-browser": "^3.0.0"
   }
 }

src/file-util.js

@@ -1,9 +1,31 @@
-const createFileContent = (listOfFiles) => {
+import uglify from 'uglifyjs-browser'
+
+const uglifyConfig = {
+  compress: {
+    typeofs: false,
+  },
+  mangle: true,
+  output: {
+    comments: /^!/,
+  },
+}
+
+const createFileContent = (listOfFiles, minify) => {
 	let content = ''
 
 	listOfFiles.forEach((file) => {
 		content += file.data
-	})
+  })
+
+  if (minify) {
+    const minifyResult = uglify.minify(content, uglifyConfig)
+
+    if (minifyResult.error) {
+      throw new Error('Unable to minify')
+    }
+
+    content = minifyResult.code
+  }
 
 	return content
 }

src/index.js

@@ -8,7 +8,7 @@ import { createModal, showModal, hideModal } from './dialog-loader'
 import 'bootstrap/dist/css/bootstrap.css'
 
 const bsCDN = 'https://unpkg.com/bootstrap/js/dist/'
-const popperCDN = 'https://unpkg.com/popper.js/dist/umd/popper.min.js'
+const popperCDN = 'https://unpkg.com/popper.js/dist/umd/popper.js'
 
 const supportedBrowser = !!new Blob
 let chooseToImportPopper = true
@@ -20,7 +20,9 @@ $(() => {
 	const $alertBrowser = $('#alertBrowser')
 	const $form = $('form')
 	const $checkBoxRequirePopper = $('.require-popper')
-	const $checkboxPopper = $('#checkboxPopper')
+  const $checkboxPopper = $('#checkboxPopper')
+  const $chkMinify = $('#chkMinify')
+  const popperCheckboxList = [].slice.call(document.querySelectorAll('.require-popper'))
 
 	if (!supportedBrowser) {
 		$form.remove()
@@ -34,7 +36,7 @@ $(() => {
 
 	$checkBoxRequirePopper.on('click', function () {
 		if (!this.checked) {
-			const stillCheckedList = [].slice.call(document.querySelectorAll('.require-popper'))
+			const stillCheckedList = popperCheckboxList
 				.filter((chk) => chk.checked)
 
 			if (stillCheckedList.length === 0) {
@@ -49,8 +51,9 @@ $(() => {
 		const formData = $form.serializeArray()
 		if (formData.length === 0) {
 			return
-		}
+    }
 
+    const minify = $chkMinify[0].checked
     showModal(() => {
       const listOfRequest = [
         axios.get(`${bsCDN}util.js`)
@@ -70,11 +73,15 @@ $(() => {
           axios.get(`${bsCDN}${value}.js`)
         )
       })
+
+      if (minify) {
+        fileName = 'bootstrap.custom.min.js'
+      }
 
       axios.all(listOfRequest)
         .then((listOfFiles) => {
           hideModal()        
-          downloadFile(fileName, createFileContent(listOfFiles))
+          downloadFile(fileName, createFileContent(listOfFiles, minify))
         })
         .catch(() => {
           hideModal()