Template Upload

This commit is contained in:
SOUTHERNCO\x2mjbyrn
2017-05-17 13:45:25 -04:00
parent 415b9c25f3
commit 7efe7605b8
11476 changed files with 2170865 additions and 34 deletions

View File

@ -0,0 +1,40 @@
/**
* 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
});

View File

@ -0,0 +1,4 @@
body {
background: white;
color: blue;
}

View File

@ -0,0 +1,11 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Browsersync Server Example</title>
<link rel='stylesheet' href='css/main.less'>
</head>
<body>
<h1>Browsersync Middleware CSS injection Example</h1>
</body>
</html>

View File

@ -0,0 +1 @@
- Perform changes to `app/css/main.less` to see live css injection

View File

@ -0,0 +1,14 @@
{
"name": "bs-recipes-server",
"version": "1.0.0",
"description": "Middleware + CSS example",
"main": "app.js",
"scripts": {
"start": "node app.js"
},
"license": "MIT",
"dependencies": {
"browser-sync": "^2.1.6",
"less": "^2.4.0"
}
}

View File

@ -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
});
```