update

node_modules/bs-recipes/recipes/middleware.css.injection/readme.md

@@ -0,0 +1,75 @@
+#Browsersync - Middleware + CSS example
+
+## Installation/Usage:
+
+To try this example, follow these 4 simple steps. 
+
+**Step 1**: Clone this entire repo
+```bash
+$ git clone https://github.com/Browsersync/recipes.git bs-recipes
+```
+
+**Step 2**: Move into the directory containing this example
+```bash
+$ cd bs-recipes/recipes/middleware.css.injection
+```
+
+**Step 3**: Install dependencies
+```bash
+$ npm install
+```
+
+**Step 4**: Run the example
+```bash
+$ npm start
+```
+
+### Additional Info:
+
+- Perform changes to `app/css/main.less` to see live css injection
+
+### Preview of `app.js`:
+```js
+/**
+ * Require Browsersync
+ */
+var browserSync = require("browser-sync");
+
+/**
+ * Run the middleware on files that contain .less
+ */
+function lessMiddleware (req, res, next) {
+    var parsed = require("url").parse(req.url);
+    if (parsed.pathname.match(/\.less$/)) {
+        return less(parsed.pathname).then(function (o) {
+            res.setHeader('Content-Type', 'text/css');
+            res.end(o.css);
+        });
+    }
+    next();
+}
+
+/**
+ * Compile less
+ */
+function less(src) {
+    var f = require('fs').readFileSync('app' + src).toString();
+    return require('less').render(f);
+}
+
+/**
+ * Run Browsersync with less middleware
+ */
+browserSync({
+    files: "app/css/*.less",
+    server: "app",
+    injectFileTypes: ["less"],
+    /**
+     * Catch all requests, if any are for .less files, recompile on the fly and
+     * send back a CSS response
+     */
+    middleware: lessMiddleware
+});
+
+```
+