Adds watching for less files -- closes #10

buildScripts/buildLess.js

@@ -4,12 +4,14 @@ import LessPluginAutoPrefix from 'less-plugin-autoprefix';
 import Stylesheets from '../utils/Stylesheets';
 
 import chalk from 'chalk';
+import chokidar from 'chokidar';
 import commander from 'commander';
 import fs from 'fs';
 import less from 'less';
 import mkdirp from 'mkdirp';
 import path from 'path';
 
+
 commander
   .version('0.0.1')
   .option('-w, --watch', 'Watch for changes to less files')
@@ -19,10 +21,45 @@ 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) => {
+    switch(event){
+      case 'add':
+      case 'change':
+        console.log(chalk.blue(event, path));
+        compileLessAndWriteToCSSFile(path)
+          .then(() => {
+            console.log(chalk.green(`Done compiling  ${path}`));
+          });
+      break;
+
+      case 'unlink': {
+        const cssFilename = Stylesheets.getDistCSSFileForLessFile(path);
+        const cssMapFilename = Stylesheets.getDistCSSMapFileForLessFile(path);
+        Promise.all([removeFile(cssFilename), removeFile(cssMapFilename)]);
+        break;
+      }
+
+      case 'unlinkDir': {
+        const cssFilepath = Stylesheets.getDistCSSPathForLessPath(path);
+        removePath(cssFilepath);
+        break;
+      }
+
+      case 'addDir': {
+        if (path !== PATH_TO_WATCH) {
+          createCSSDirectory(path)
+          .catch(error => {
+            console.error(chalk.red(error));
+          });
+        }
+        break;
+      }
+    }
+  });
 }
 else {
   console.log(chalk.blue('Compiling less files...'));
@@ -68,6 +105,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 +159,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.