coffeescript scaffold

.gitignore

@@ -1,2 +1,4 @@
+/dist
 /vendor
 /composer.lock
+/node_modules

masonry.php

@@ -34,12 +34,8 @@ function masonryslides_js($hook) {
     plugins_url('main.css', __FILE__)
   );
   wp_enqueue_script(
-    'masonryslides_enquirejs',
-    'https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.6/enquire.min.js'
-  );
-  wp_enqueue_script(
-    'masonryslides_libjs',
-    'https://cdnjs.cloudflare.com/ajax/libs/savvior/0.6.0/savvior.min.js'
+    'masonryslides_js',
+    plugins_url('dist/main.js', __FILE__)
   );
 }
 
@@ -54,7 +50,8 @@ function masonryslides_newslide() {
     $images[$i] = str_replace(__DIR__.'/', '', $images[$i]);
   }
 ?>
-<div id="masonryslide">
+<div id="masonryslide"><canvas id="slide"></canvas></div>
+<div id="masonrylibrary" style="display: none;">
 <?php
   foreach($images as $k => $v) : ?>
     <div>
@@ -62,15 +59,6 @@ function masonryslides_newslide() {
     </div>
 <?php endforeach; ?>
 </div>
-<style>
-.column { float: left; }
-.size-1of2 { width: 50%; }
-.size-1of3 { width: 33.33333%; }
-.size-1of4 { width: 25%; }
-#masonryslide div img {
-  width: 100%;
-}
-</style>
 <script>
   savvior.init("#masonryslide", {
     "screen and (max-width: 20em)": { columns: 2 },

package.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "coffee-loader": "^0.9.0",
+    "coffeescript": "^2.0.2",
+    "d3": "^4.12.0",
+    "layout-bin-packer": "^1.3.0",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "webpack": "^3.8.1"
+  }
+}

webpack.config.js

@@ -0,0 +1,23 @@
+const path = require('path');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+module.exports = {
+  entry: {
+    js: './js/main.coffee'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.coffee$/,
+        loader: 'coffee-loader'
+      }
+    ]
+  },
+  plugins: [
+    new UglifyJsPlugin()
+  ],
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'main.js'
+  }
+};