Initial commit

jarstone · Apr 21, 2021 · 468ffa3 · 468ffa3
1 parent 1d5b026
commit 468ffa3
Show file tree

Hide file tree

Showing 16 changed files with 683 additions and 1 deletion.
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1 @@
+example
diff --git a/README.md b/README.md
@@ -1,2 +1,69 @@
 # eses
-Ejs Scss ES6 template builder
+Ejs Scss ES6 template builder, to create html template
+
+## Installation
+`npm i eses --save-dev`
+
+## Features
+- ejs template
+- scss styling
+- es6
+- autoprefixer
+- watch & live reload
+- libraries copier
+- options to use sass(js) or dart-sass
+
+## Commands
+package.json:
+```json
+"scripts": {
+  "dev": "eses --dev",
+  "build": "eses",
+  "lib": "eses --lib"
+}
+```
+
+`npm run build`\
+`npm run dev`\
+`npm run lib`
+
+## Default configuration
+eses.config.js:
+```javascript
+module.exports = {
+  path: {
+    html: {
+      src: 'source/ejs',
+      dst: 'compiled/html',
+    },
+    css: {
+      src: 'source/scss',
+      dst: 'compiled/css',
+    },
+    js: {
+      src: 'source/js',
+      dst: 'compiled/js',
+    }
+  },
+  server: {
+    host: '127.0.0.1',
+    port: 3000,
+    watch: 'compiled',
+    verbose: false,
+  },
+  useDartSass: false
+}
+```
+## Example libraries
+eses.libraries.js:
+```javascript
+module.exports = {
+  dst: 'compiled/lib',
+  lib: {
+    'bootstrap': 'node_modules/bootstrap/dist/js/bootstrap.bundle.j*',
+    'jquery': ['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.slim.js'],
+    'photoswipe': ['node_modules/photoswipe/dist/*', '!node_modules/photoswipe/dist/*.min.js'],
+    'photoswipe/default-skin': 'node_modules/photoswipe/dist/default-skin',
+  }
+}
+```
diff --git a/config.js b/config.js
@@ -0,0 +1,24 @@
+module.exports = {
+  path: {
+    html: {
+      src: 'source/ejs',
+      dst: 'compiled/html',
+    },
+    css: {
+      src: 'source/scss',
+      dst: 'compiled/css',
+    },
+    js: {
+      src: 'source/js',
+      dst: 'compiled/js',
+    },
+  },
+  server: {
+    host: '127.0.0.1',
+    port: 3000,
+    watch: 'compiled',
+    verbose: false,
+  },
+  useDartSass: false,
+  customConfig: 'eses.config.js',
+}
diff --git a/example/eses.config.js b/example/eses.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  server: {
+    port: 8080,
+  }
+}
diff --git a/example/eses.libraries.js b/example/eses.libraries.js
@@ -0,0 +1,9 @@
+module.exports = {
+  dst: 'compiled/lib',
+  lib: {
+    'bootstrap': 'node_modules/bootstrap/dist/js/bootstrap.bundle.j*',
+    'jquery': ['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.slim.js'],
+    'photoswipe': ['node_modules/photoswipe/dist/*', '!node_modules/photoswipe/dist/*.min.js'],
+    'photoswipe/default-skin': 'node_modules/photoswipe/dist/default-skin',
+  }
+}
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,15 @@
+{
+  "scripts": {
+    "dev": "eses --dev",
+    "build": "eses",
+    "lib": "eses --lib"
+  },
+  "devDependencies": {
+    "eses": "^1.0.0"
+  },
+  "dependencies": {
+    "bootstrap": "^4.6.0",
+    "jquery": "^3.6.0",
+    "photoswipe": "^4.1.3"
+  }
+}
diff --git a/example/source/ejs/data.json b/example/source/ejs/data.json
@@ -0,0 +1,3 @@
+{
+  "title": "Eses"
+}
diff --git a/example/source/ejs/include/_css.ejs b/example/source/ejs/include/_css.ejs
@@ -0,0 +1 @@
+<link rel="stylesheet" href="../css/main.css">
diff --git a/example/source/ejs/include/_js.ejs b/example/source/ejs/include/_js.ejs
@@ -0,0 +1 @@
+<script src="../js/main.js"></script>
diff --git a/example/source/ejs/index.ejs b/example/source/ejs/index.ejs
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <%- include('include/_css') %>
+  <title><%= title %></title>
+</head>
+<body>
+  <div class="container py-3">
+    <div class="card border-0 shadow-sm">
+      <div class="card-body">
+        <p>Welcome to <%= title %></p>
+      </div>
+    </div>
+  </div>
+
+  <%- include('include/_js') %>
+</body>
+</html>
diff --git a/example/source/js/main.js b/example/source/js/main.js
@@ -0,0 +1,8 @@
+import { getTransitionDuration } from './modules/_util'
+
+function init() {
+  console.log('hello world')
+}
+init()
+
+console.log(getTransitionDuration(document.body))
diff --git a/example/source/js/modules/_util.js b/example/source/js/modules/_util.js
@@ -0,0 +1,7 @@
+const getTransitionDuration = element => {
+  return parseFloat(window.getComputedStyle(element).transitionDuration) * 1000
+}
+
+export {
+  getTransitionDuration,
+}
diff --git a/example/source/scss/_variables.scss b/example/source/scss/_variables.scss
@@ -0,0 +1 @@
+$body-bg: #f1f1f1;
diff --git a/example/source/scss/main.scss b/example/source/scss/main.scss
@@ -0,0 +1,2 @@
+@import "variables";
+@import "../../node_modules/bootstrap/scss/bootstrap";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import "variables";
		@import "../../node_modules/bootstrap/scss/bootstrap";