Set up file watcher for faster development

Gruntfile.js

@@ -0,0 +1,65 @@
+const path = require("path");
+
+module.exports = grunt => {
+    grunt.initConfig({
+        pkg: grunt.file.readJSON("package.json"),
+        focus: {
+            dev: {
+                include: ["css", "js"],
+            },
+        },
+        webpack: {
+            options: {
+                entry: "./src/main/js/Template.js",
+                module: {
+                    rules: [
+                        {
+                            test: /\.js$/i,
+                            exclude: /node_modules/,
+                        },
+                        {
+                            test: /\.css$/i,
+                            use: ["style-loader", "css-loader"],
+                        },
+                    ],
+                },
+                resolve: {
+                    extensions: [".js", ".css"],
+                },
+                output: {
+                    library: "fwdekker-template",
+                    libraryTarget: "umd",
+                    filename: "index.js",
+                    path: path.resolve(__dirname, "dist"),
+                }
+            },
+            dev: {
+                mode: "development",
+                devtool: "inline-source-map",
+            },
+            deploy: {
+                mode: "production",
+            },
+        },
+        watch: {
+            css: {
+                files: ["src/main/**/*.css"],
+                tasks: ["webpack:dev"],
+            },
+            js: {
+                files: ["src/main/**/*.js"],
+                tasks: ["webpack:dev"],
+            },
+        },
+    });
+
+    grunt.loadNpmTasks("grunt-contrib-watch");
+    grunt.loadNpmTasks("grunt-focus");
+    grunt.loadNpmTasks("grunt-webpack");
+
+    grunt.registerTask("dev", ["webpack:dev"]);
+    grunt.registerTask("dev:server", ["dev", "focus:dev"]);
+    grunt.registerTask("deploy", ["webpack:deploy"]);
+
+    grunt.registerTask("default", ["dev"]);
+};

README.md

@@ -17,9 +17,11 @@ $> npm ci
 
 ### Building
 ```shell script
-# Build the application in `build/` for development
+# Build the template in `dist/` for development
 $> npm run dev
-# Build the application in `build/` for deployment
+# Run the `dev` task and automatically rerun it whenever files are changed
+$> npm run dev:server
+# Build the template in `dist/` for deployment
 $> npm run deploy
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "0.0.7",
+    "version": "0.0.8",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Felix W. Dekker (https://fwdekker.com)",
     "license": "MIT",
@@ -14,8 +14,9 @@
     },
     "browser": "dist/index.js",
     "scripts": {
-        "dev": "webpack --mode=development",
-        "deploy": "webpack --mode=production"
+        "dev": "grunt dev",
+        "dev:server": "grunt dev:server",
+        "deploy": "grunt deploy"
     },
     "dependencies": {
         "hyperscript": "^2.0.2",
@@ -24,6 +25,11 @@
     },
     "devDependencies": {
         "css-loader": "^3.5.3",
+        "grunt": "^1.1.0",
+        "grunt-cli": "^1.3.2",
+        "grunt-contrib-watch": "^1.1.0",
+        "grunt-focus": "^1.0.0",
+        "grunt-webpack": "^3.1.3",
         "style-loader": "^1.2.1",
         "webpack": "^4.42.1",
         "webpack-cli": "^3.3.11"

webpack.config.js

@@ -1,26 +0,0 @@
-const path = require("path");
-
-module.exports = {
-    entry: "./src/main/js/Template.js",
-    module: {
-        rules: [
-            {
-                test: /\.js$/i,
-                exclude: /node_modules/,
-            },
-            {
-                test: /\.css$/i,
-                use: ["style-loader", "css-loader"],
-            },
-        ],
-    },
-    resolve: {
-        extensions: [".js", ".css"],
-    },
-    output: {
-        library: "fwdekker-template",
-        libraryTarget: "umd",
-        filename: "index.js",
-        path: path.resolve(__dirname, "dist"),
-    }
-};