Merge pull request #5 from ryangittings/develop

Develop

.eslintrc

@@ -0,0 +1,12 @@
+{
+  "extends": [
+    "airbnb-base"
+  ],
+  "rules": {
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
+  },
+  "globals": {
+    "document": false,
+    "window": false
+  }
+}

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+assets/js/main.js.map

assets/src/js/main.js

@@ -0,0 +1,29 @@
+const components = {};
+
+const app = {
+  init: () => {
+    Object.entries(components).forEach(component => {
+      const key = component[0];
+      const value = component[1];
+
+      const nodes = document.querySelectorAll(`[data-${key}]`);
+      nodes.forEach(node => {
+        let options = node.getAttribute('data-options');
+
+        if (options) {
+          options = options.split(',').reduce((acc, cur) => {
+            const data = cur.split(':');
+            const option1 = data[0];
+            const option2 = data[1];
+            acc[option1] = option2;
+            return acc;
+          }, {});
+        }
+
+        new value(node, options);
+      });
+    });
+  },
+};
+
+app.init();

gulpfile.js

@@ -1,23 +1,21 @@
 // Grab our gulp packages
-var gulp = require('gulp');
-
 const $ = require('gulp-load-plugins')({
-  pattern: ['*'],
-  scope: ['devDependencies'],
+  pattern: ['*', '*/*'],
+  scope: ['devDependencies']
 });
 
 const browserSync = $.browserSync.create();
 
 const paths = {
-  url: "blyth.test",
+  url: "wool-factory.test",
   styles: {
     watch: ["./assets/src/css/**/*.css"],
     src: ["./assets/src/css/*.css"],
     dest: "./assets/css"
   },
   scripts: {
     watch: ["./assets/src/js/**/*.js"],
-    src: ["./assets/src/js/*.js"],
+    src: './assets/src/js',
     dest: "./assets/js"
   },
   assets: {
@@ -27,25 +25,26 @@ const paths = {
 };
 
 // Minify Javascript files
-gulp.task('scripts', function () {
-  return gulp.src(paths.scripts.src)
-    .pipe(
-      $.babel({
-        presets: ["@babel/env"]
-      })
-    )
-    .pipe($.minify({
-      ext: {
-        src: ".js",
-        min: ".min.js"
-      }
+$.gulp.task('scripts', function () {
+  return $.gulp.src(paths.scripts.src + '/main.js')
+    .pipe($.plumber())
+    .pipe($.webpackStream({
+      mode: 'production'
+    }))
+    .pipe($.sourcemaps.init())
+    .pipe($.babel({
+      presets: [ '@babel/env' ]
     }))
-    .pipe(gulp.dest(paths.scripts.dest))
+    .pipe($.concat('main.js'))
+    .pipe($.uglify())
+    .pipe($.sourcemaps.write('.'))
+    .pipe($.gulp.dest(paths.scripts.dest))
+    .pipe(browserSync.stream());
 });
 
 // Compiles sass into Assets
-gulp.task('css', function () {
-  return gulp
+$.gulp.task('css', function () {
+  return $.gulp
     .src(paths.styles.src)
     .pipe($.postcss([$.postcssImport(), $.cssnano({
       preset: ['default', {
@@ -55,32 +54,32 @@ gulp.task('css', function () {
     .pipe($.rename({
       suffix: '.min'
     }))
-    .pipe(gulp.dest(paths.styles.dest))
+    .pipe($.gulp.dest(paths.styles.dest))
     .pipe(browserSync.stream());
 });
 
 // Process and Optimizing Images
-gulp.task('assets', function () {
-  return gulp.src(paths.assets.src)
+$.gulp.task('assets', function () {
+  return $.gulp.src(paths.assets.src)
     .pipe($.cache($.imagemin({
       interlaced: true,
     })))
-    .pipe(gulp.dest(paths.assets.dest))
+    .pipe($.gulp.dest(paths.assets.dest))
 });
 
 // Watchers
-gulp.task('watch', function () {
+$.gulp.task('watch', function () {
   browserSync.init({
     proxy: paths.url,
-    open: true,
+    open: false,
     notify: false
   });
 
-  gulp.watch(paths.styles.watch, gulp.series('css'));
-  gulp.watch(paths.scripts.watch, gulp.series('scripts', reload));
-  gulp.watch("**/*.php", reload);
-  gulp.watch('**/*.html', reload);
-  gulp.watch(paths.assets.src, gulp.series('assets'));
+  $.gulp.watch(paths.styles.watch, $.gulp.series('css'));
+  $.gulp.watch(paths.scripts.watch, $.gulp.series('scripts'));
+  $.gulp.watch("**/*.php", reload);
+  $.gulp.watch('**/*.html', reload);
+  $.gulp.watch(paths.assets.src, $.gulp.series('assets'));
 });
 
 // Browsersync Helper
@@ -90,10 +89,10 @@ function reload(done) {
 }
 
 // Cleaning
-gulp.task('clean', function (done) {
+$.gulp.task('clean', function (done) {
   $.del.sync([paths.assets.dest]);
   done();
 });
 
 // Build Sequences
-gulp.task('default', gulp.parallel(['clean', 'css', 'assets', 'scripts']));
+$.gulp.task('default', $.gulp.parallel(['clean', 'css', 'assets', 'scripts']));

index.html

@@ -6,18 +6,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Site</title>
     <link rel="stylesheet" href="/assets/css/app.min.css">
+    <script src="assets/js/main.js" defer></script>
   </head>
   <body>
 
     <div class="wrapper">
-      <h1>Heading 1</h1>
-      <h2>Heading 2</h2>
+      <h1 data-test>Heading 1</h1>
+      <h2 data-test>Heading 2</h2>
       <h3>Heading 3</h3>
       <h4>Heading 4</h4>
       <h5>Heading 5</h5>
       <p>Paragraph text</p>
     </div>
-
-    <script src="assets/js/app.min.js"></script>
   </body>
 </html>

package.json

@@ -16,23 +16,25 @@
   "license": "GPL-2.0 AND MIT",
   "homepage": "https://github.com/ryangittings/blyth",
   "devDependencies": {
-    "@babel/core": "^7.8.7",
-    "@babel/preset-env": "^7.8.7",
+    "@babel/core": "^7.8.6",
+    "@babel/preset-env": "^7.8.6",
     "browser-sync": "^2.26.7",
     "cssnano": "^4.1.10",
     "del": "^5.1.0",
     "goron": "^0.1.1",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
     "gulp-cache": "^1.1.3",
+    "gulp-concat": "^2.6.1",
     "gulp-imagemin": "^7.1.0",
     "gulp-load-plugins": "^2.0.2",
     "gulp-minify": "^3.1.0",
+    "gulp-plumber": "^1.2.1",
     "gulp-postcss": "^8.0.0",
     "gulp-rename": "^2.0.0",
     "gulp-sourcemaps": "^2.6.5",
-    "postcss-css-variables": "^0.14.0",
-    "postcss-import": "^12.0.1"
-  },
-  "dependencies": {}
+    "gulp-uglify": "^3.0.2",
+    "postcss-import": "^12.0.1",
+    "webpack-stream": "^5.2.1"
+  }
 }