Adds watching for less files -- closes #10

buildScripts/buildLess.js

@@ -9,6 +9,7 @@ import fs from 'fs';
 import less from 'less';
 import mkdirp from 'mkdirp';
 import path from 'path';
+import chokidar from 'chokidar';
 
 commander
   .version('0.0.1')
@@ -19,10 +20,34 @@ const prefixer = new LessPluginAutoPrefix({ browsers: ['last 2 versions'] });
 
 const compilePromises = [];
 
+const PATH_TO_WATCH = path.resolve('src/less/');
+
 if (commander.watch) {
   console.log(chalk.blue('Compiling less files and watch for changes...'));
-  console.log(chalk.red('--watch not yet implemented'));
-  process.exit(1);
+  chokidar.watch(PATH_TO_WATCH).on('all', (event, path) => {
+    if (event === "add" || event === "change") {
+      console.log(chalk.blue(event, path));
+      compileLessAndWriteToCSSFile(path)
+        .then(() => {
+          console.log(chalk.green('Done compiling ' + path));
+        });
+    }
+    if (event === "unlink") {
+      const cssFilename = Stylesheets.getDistCSSFileForLessFile(path);
+      const cssMapFilename = Stylesheets.getDistCSSMapFileForLessFile(path);
+      Promise.all([removeFile(cssFilename), removeFile(cssMapFilename)]);
+    }
+    if (event === "unlinkDir") {
+      const cssFilepath = Stylesheets.getDistCSSPathForLessPath(path);
+      removePath(cssFilepath);
+    }
+    if (event === "addDir" && path !== PATH_TO_WATCH) {
+      createCSSDirectory(path)
+        .catch(error => {
+          console.error(chalk.red(error));
+        });
+    }
+  });
 }
 else {
   console.log(chalk.blue('Compiling less files...'));
@@ -68,6 +93,22 @@ function compileLessAndWriteToCSSFile(filename) {
     });
 }
 
+/**
+ * Creates a new directory in the css folder to match that in the less folder
+ */
+function createCSSDirectory(pathname) {
+  return new Promise((resolve, reject) => {
+      const cssPathname = Stylesheets.getDistCSSPathForLessPath(pathname);
+      mkdirp(cssPathname, error => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        resolve();
+      });
+  });
+}
+
 /**
  * Takes a filename and returns a promise that is completed with a buffer containing the contents
  * of the file.
@@ -106,3 +147,35 @@ function writeFile(filename, buffer) {
     });
   });
 }
+
+/**
+ * Takes a filename to remove and returns a promise that is completed when the file has been
+ * deleted.
+ */
+function removeFile(filename) {
+  return new Promise((resolve, reject) => {
+    fs.unlink(filename, (error) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
+/**
+ * Takes a filepath to remove and returns a promise that is completed when the path has been
+ * deleted.
+ */
+function removePath(filepath) {
+  return new Promise((resolve, reject) => {
+    fs.rmdir(filepath, (error) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve();
+    });
+  });
+}

buildScripts/main.less

@@ -0,0 +1,11 @@
+
+@import 'node_modules/@blueprintjs/core/dist/variables';
+
+body {
+  background-color: @pt-app-background-color;
+  margin: 10px 0 0 20px;
+}
+
+.margin-all-8 {
+  margin: 8px;
+}

package.json

@@ -1,10 +1,11 @@
 {
-  "name": "StarterKit",
+  "name": "starterkit",
   "version": "1.0.0",
   "description": "Starter Kit for Web Apps Using PowerNote",
   "scripts": {
     "build": "npm-run-all build:*",
     "build:less": "babel-node buildScripts/buildLess",
+    "build-watch:less": "babel-node buildScripts/buildLess --watch",
     "build:js": "babel-node buildScripts/buildJS",
     "build-watch": "npm-run-all --parallel build-watch:*",
     "build-watch:js": "npm run build:js -- --watch",
@@ -48,7 +49,7 @@
     "eslint-plugin-import": "2.0.1",
     "eslint-plugin-react": "^6.10.3",
     "eslint-watch": "2.1.14",
-    "flow-bin": "^0.43.0",
+    "flow-bin": "^0.43.1",
     "html-webpack-plugin": "2.22.0",
     "http-server": "^0.9.0",
     "jest": "^19.0.2",
@@ -70,5 +71,14 @@
     "lint",
     "flow",
     "test"
-  ]
+  ],
+  "main": "howToWatch.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alfigureitout/StarterKit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/alfigureitout/StarterKit/issues"
+  },
+  "homepage": "https://github.com/alfigureitout/StarterKit#readme"
 }

utils/Stylesheets.js

@@ -24,6 +24,14 @@ const Stylesheets = {
     return path.resolve('dist/css', basenameNoExtension + '.css');
   },
 
+  /**
+   * For a given less path, get the name of the css path
+   */
+  getDistCSSPathForLessPath(pathname) {
+    const basename = path.basename(pathname);
+    return path.resolve('dist/css', basename);
+  },
+
   /**
    * For a given less filename, get the name of the css map file that is compiled from the less
    * file.