Add JS build process

.babelrc

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env", {
+        "targets": {
+          "browsers": [
+            "last 2 versions",
+            "ie >= 11"
+          ]
+        },
+        "loose": true,
+        "modules": false
+      }
+    ]
+  ]
+}

.browser-sync.js

@@ -1,5 +1,5 @@
 module.exports = {
-  proxy: '172.17.0.3',
+  proxy: 'windycoys.local',
   files: [
     'theme/**/*',
   ],

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "airbnb-base",
+  "env": {
+    "browser": true
+  }
+}

README.md

@@ -5,6 +5,7 @@ A modern Wordpress theme written for [WindyCOYS.com](http://windycoys.com).
 Built using:
 
 * [PostCSS](https://postcss.org)
+* [Rollup.js](https://rollupjs.org) & [Babel](https://babeljs.io/)
 
 ## Requirements
 
@@ -13,14 +14,13 @@ Built using:
 
 ## Building
 
-At the moment, the only step of the build process is to compile `styles.css`,
-this is done by running:
+The CSS and JavaScript is built with the following command:
 
 ```
-npm run css:compile
+npm run build
 ```
 
-*Note: CSS will only be minified if NODE_ENV='production'*
+*Note: Files will only be minified if NODE_ENV='production'*
 
 ## Developing
 
@@ -36,6 +36,30 @@ To build and watch the theme files for changes, run:
 npm start
 ```
 
+*Note: You will either need to set up a host file entry to point
+`windycoys.local` to the container's IP or update `.browser-sync.json` to the
+container's IP*
+
+## Linting
+
+### CSS
+
+CSS is linted with [stylelint](https://stylelint.io) using
+[stylelint-selector-bem-pattern](https://github.com/simonsmith/stylelint-selector-bem-pattern)
+
+```
+npm run css:lint
+```
+
+### JavaScript
+
+JavaScript is linted with [eslint](https://eslint.org/) using
+[Airbnb's base config](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base)
+
+```
+npm run js:lint
+```
+
 ## License
 
 The WindyCOYS theme is licensed under the [MIT license](http://opensource.org/licenses/MIT)

package.json

@@ -3,9 +3,13 @@
   "version": "0.1.0",
   "description": "Wordpress theme for windycoys.com",
   "scripts": {
-    "css": "run-s css:*",
+    "build": "run-p css:compile js:compile",
+    "css": "run-p css:*",
     "css:compile": "postcss -o theme/style.css css/index.css",
     "css:lint": "stylelint --config .stylelintrc \"css/**/*.css\"",
+    "js": "run-p js:*",
+    "js:compile": "rollup --config rollup.config.js",
+    "js:lint": "eslint js/",
     "serve": "browser-sync start --config .browser-sync.js",
     "start": "run-p watch serve",
     "watch": "npm-watch"
@@ -14,6 +18,9 @@
   "license": "MIT",
   "devDependencies": {
     "browser-sync": "^2.23.6",
+    "eslint": "^4.17.0",
+    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-plugin-import": "^2.8.0",
     "npm-run-all": "^4.1.2",
     "npm-watch": "^0.3.0",
     "stylelint": "^8.4.0",
@@ -21,13 +28,19 @@
     "stylelint-selector-bem-pattern": "^2.0.0"
   },
   "dependencies": {
+    "@babel/cli": "^7.0.0-beta.39",
+    "@babel/core": "^7.0.0-beta.39",
+    "@babel/preset-env": "^7.0.0-beta.39",
     "autoprefixer": "^7.2.5",
     "cssnano": "^3.10.0",
     "normalize.css": "^7.0.0",
     "postcss-cli": "^4.1.1",
     "postcss-custom-media": "^6.0.0",
     "postcss-custom-properties": "^6.2.0",
-    "postcss-import": "^11.0.0"
+    "postcss-import": "^11.0.0",
+    "rollup": "^0.55.5",
+    "rollup-plugin-babel": "^4.0.0-beta.1",
+    "rollup-plugin-uglify": "^3.0.0"
   },
   "watch": {
     "css": {
@@ -35,6 +48,12 @@
         "css"
       ],
       "extensions": "css"
+    },
+    "js": {
+      "patterns": [
+        "js"
+      ],
+      "extensions": "js"
     }
   }
 }

rollup.config.js

@@ -0,0 +1,21 @@
+const { resolve } = require('path');
+const babel = require('rollup-plugin-babel');
+const uglify = require('rollup-plugin-uglify');
+
+const production = process.env.NODE_ENV === 'production';
+
+module.exports = {
+  input: resolve(__dirname, 'js/index.js'),
+  output: {
+    file: resolve(__dirname, 'theme/bundle.js'),
+    format: 'iife',
+    name: 'windycoys',
+    sourcemap: !production && 'inline',
+  },
+  plugins: [
+    babel({
+      exclude: 'node_modules/**',
+    }),
+    production && uglify(),
+  ].filter(Boolean),
+};