Add JS bundling and minification with Rollup #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft

mbehzad wants to merge 7 commits into adaptto:main from mbehzad:feature/js-bundling

.eslintignore

-Original file line number
+Diff line change
@@ -1,2 +1,3 @@
     helix-importer-ui
-    scripts/3rdparty/**
+    scripts/3rdparty/**
+    target/**

.husky/pre-commit

-Original file line number
+Diff line change
@@ -0,0 +1,8 @@
+    #!/usr/bin/env sh
+    . "$(dirname -- "$0")/_/husky.sh"
+    # build js artefacts
+    npm run build
+    # add them to the commit
+    git add 'target'

README.md

-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,7 @@ @@
     adaptTo() Website based on AEM Franklin.
     ## Environments
     - Preview: https://main--adaptto-website--adaptto.hlx.page/
     - Live: https://main--adaptto-website--adaptto.hlx.live/
@@ Expand All / @@ -22,6 +23,10 @@ npm tst @@
     ## Local development
-. Install the [Helix CLI](https://github.com/adobe/helix-cli): `npm install -g @adobe/helix-cli`
-. Start Franklin Proxy: `hlx up` (opens your browser at `http://localhost:3000`)
+    ```sh
+    npm start
+    ```
+. run `npm start` which uses the [Helix CLI](https://github.com/adobe/helix-cli)
+. open your browser at `http://localhost:3000` to access the Franklin Proxy
 . Open the `adaptto-website` directory in your favorite IDE and start coding :)

head.html

-Original file line number
+Diff line change
@@ -1,9 +1,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
-    <script src="/scripts/lib-franklin.js" type="module"></script>
-    <script src="/scripts/scripts.js" type="module"></script>
+    <!--
+      lib-franklin is already loaded by script.js. and doensn't necceserly nedds to be included here
+     <script src="/target/lib-franklin.js" type="module"></script>
+     -->
+    <script src="/target/scripts.js" type="module"></script>
     <link rel="stylesheet" href="/styles/styles.css">
     <link rel="shortcut icon" href="/resources/img/adaptto-favicon.ico"/>
     <link rel="icon" type="image/svg+xml" href="/resources/img/adaptto-favicon.svg">
     <link rel="apple-touch-icon" href="/resources/img/apple-touch-icon-57-57.png">
     <link rel="apple-touch-icon" href="/resources/img/apple-touch-icon-72x72.png" sizes="72x72">
-    <link rel="apple-touch-icon" href="/resources/img/apple-touch-icon-114x114.png" sizes="114x114">
+    <link rel="apple-touch-icon" href="/resources/img/apple-touch-icon-114x114.png" sizes="114x114">

Provide feedback