seagulls/dogs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端代码

Browse Source
This commit is contained in:
ChloeChen0423
2025-05-12 16:42:36 +09:00
commit 7c63f2f07b
4531 changed files with 656010 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
node_modules/bs-recipes/recipes/grunt.html.injection/Gruntfile.js generated vendored Normal file
View File

@ -0,0 +1,43 @@
// This shows a full config file!
module.exports = function (grunt) {
grunt.initConfig({
watch: {
files: 'app/scss/**/*.scss',
tasks: ['bsReload:css']
},
sass: {
dev: {
files: {
'app/css/main.css': 'app/scss/main.scss'
}
}
},
browserSync: {
dev: {
options: {
watchTask: true,
server: './app',
plugins: [
{
module: "bs-html-injector",
options: {
files: "./app/*.html"
}
}
]
}
}
},
bsReload: {
css: "main.css"
}
});
// load npm tasks
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
// define default task
grunt.registerTask('default', ['browserSync', 'watch']);
};

8
node_modules/bs-recipes/recipes/grunt.html.injection/app/css/main.css generated vendored Normal file
View File

@ -0,0 +1,8 @@
body {
background: white;
color: black;
}
p.lede {
font-size: 2em;
}

16
node_modules/bs-recipes/recipes/grunt.html.injection/app/index.html generated vendored Normal file
View File

@ -0,0 +1,16 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Browsersync Grunt + HTML Injection Example</title>
<link rel='stylesheet' href='css/main.css'>
</head>
<body>
<header>
<h1>Browsersync Grunt, SASS & HTML injection Example</h1>
<p>Any changes you make to the HTML will be injected</p>
</header>
</body>
</html>

2
node_modules/bs-recipes/recipes/grunt.html.injection/desc.md generated vendored Normal file
View File

@ -0,0 +1,2 @@
To see the live HTML injecting, along with CSS injection, simply perform changes to either `index.html` or `css/main.css`

17
node_modules/bs-recipes/recipes/grunt.html.injection/package.json generated vendored Normal file
View File

@ -0,0 +1,17 @@
{
"name": "bs-recipes-grunt-html-injection",
"version": "1.0.0",
"description": "Grunt, SASS, HTML/CSS injection example",
"main": "Gruntfile.js",
"scripts": {
"start": "grunt"
},
"license": "MIT",
"devDependencies": {
"bs-html-injector": "3.0.1",
"grunt": "^0.4.5",
"grunt-browser-sync": "^2.0.0",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-watch": "^0.6.1"
}
}

79
node_modules/bs-recipes/recipes/grunt.html.injection/readme.md generated vendored Normal file
View File

@ -0,0 +1,79 @@
#Browsersync - Grunt, SASS, HTML/CSS injection 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/grunt.html.injection
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
To see the live HTML injecting, along with CSS injection, simply perform changes to either `index.html` or `css/main.css`
### Preview of `Gruntfile.js`:
```js
// This shows a full config file!
module.exports = function (grunt) {
grunt.initConfig({
watch: {
files: 'app/scss/**/*.scss',
tasks: ['bsReload:css']
},
sass: {
dev: {
files: {
'app/css/main.css': 'app/scss/main.scss'
}
}
},
browserSync: {
dev: {
options: {
watchTask: true,
server: './app',
plugins: [
{
module: "bs-html-injector",
options: {
files: "./app/*.html"
}
}
]
}
}
},
bsReload: {
css: "main.css"
}
});
// load npm tasks
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
// define default task
grunt.registerTask('default', ['browserSync', 'watch']);
};
```

62
node_modules/bs-recipes/recipes/grunt.sass.autoprefixer/Gruntfile.js generated vendored Normal file
View File

@ -0,0 +1,62 @@
module.exports = function (grunt) {
grunt.initConfig({
dirs: {
css: "app/css",
scss: "app/scss"
},
watch: {
options: {
spawn: false
},
sass: {
files: '<%= dirs.scss %>/**/*.scss',
tasks: ['sass', 'autoprefixer', 'bsReload:css']
},
html: {
files: 'app/*.html',
tasks: ['bsReload:all']
}
},
sass: {
dev: {
files: {
'<%= dirs.css %>/main.css': '<%= dirs.scss %>/main.scss'
}
}
},
autoprefixer: {
options: {
browsers: ['last 5 versions', 'ie 8']
},
css: {
src: '<%= dirs.css %>/main.css',
dest: '<%= dirs.css %>/main.css'
}
},
browserSync: {
dev: {
options: {
server: "./app",
background: true
}
}
},
bsReload: {
css: {
reload: "main.css"
},
all: {
reload: true
}
}
});
// load npm tasks
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-contrib-watch');
// define default task
grunt.registerTask('default', ['browserSync', 'watch']);
};

44
node_modules/bs-recipes/recipes/grunt.sass.autoprefixer/app/css/main.css generated vendored Normal file
View File

@ -0,0 +1,44 @@
@-webkit-keyframes bounce {
0%, 20%, 53%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
40%, 43% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0); }
70% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0); }
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0); } }
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
40%, 43% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0); }
70% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0); }
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0); } }
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom; }

11
node_modules/bs-recipes/recipes/grunt.sass.autoprefixer/app/index.html generated vendored Normal file
View File

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

25
node_modules/bs-recipes/recipes/grunt.sass.autoprefixer/app/scss/main.scss generated vendored Normal file
View File

@ -0,0 +1,25 @@
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
}
40%, 43% {
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -30px, 0);
}
70% {
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0,-4px,0);
}
}
.bounce {
animation-name: bounce;
transform-origin: center bottom;
}

17
node_modules/bs-recipes/recipes/grunt.sass.autoprefixer/desc.md generated vendored Normal file
View File

@ -0,0 +1,17 @@
This example shows how you can chain potentially slow-running tasks, but still achieve CSS
Injection. The trick, as seen below, is to use the `bsReload` task that now comes
bundled with `grunt-browser-sync` since `2.1.0`
Don't forget the `spawn: false` option for the watch task - it's a requirement
that allows Browsersync to work correctly
```js
watch: {
options: {
spawn: false // Important, don't remove this!
},
files: 'app/**/*.scss',
tasks: ['sass', 'autoprefixer', 'bsReload:css']
},
```

18
node_modules/bs-recipes/recipes/grunt.sass.autoprefixer/package.json generated vendored Normal file
View File

@ -0,0 +1,18 @@
{
"name": "grunt.sass.autoprefixer",
"version": "1.0.0",
"description": "Grunt, SASS & Autoprefixer",
"main": "Gruntfile.js",
"scripts": {
"start": "grunt"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-autoprefixer": "^2.2.0",
"grunt-browser-sync": "^2.1.1",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-watch": "^0.6.1"
}
}

114
node_modules/bs-recipes/recipes/grunt.sass.autoprefixer/readme.md generated vendored Normal file
View File

@ -0,0 +1,114 @@
#Browsersync - Grunt, SASS &amp; Autoprefixer
## 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/grunt.sass.autoprefixer
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
This example shows how you can chain potentially slow-running tasks, but still achieve CSS
Injection. The trick, as seen below, is to use the `bsReload` task that now comes
bundled with `grunt-browser-sync` since `2.1.0`
Don't forget the `spawn: false` option for the watch task - it's a requirement
that allows Browsersync to work correctly
```js
watch: {
options: {
spawn: false // Important, don't remove this!
},
files: 'app/**/*.scss',
tasks: ['sass', 'autoprefixer', 'bsReload:css']
},
```
### Preview of `Gruntfile.js`:
```js
module.exports = function (grunt) {
grunt.initConfig({
dirs: {
css: "app/css",
scss: "app/scss"
},
watch: {
options: {
spawn: false
},
sass: {
files: '<%= dirs.scss %>/**/*.scss',
tasks: ['sass', 'autoprefixer', 'bsReload:css']
},
html: {
files: 'app/*.html',
tasks: ['bsReload:all']
}
},
sass: {
dev: {
files: {
'<%= dirs.css %>/main.css': '<%= dirs.scss %>/main.scss'
}
}
},
autoprefixer: {
options: {
browsers: ['last 5 versions', 'ie 8']
},
css: {
src: '<%= dirs.css %>/main.css',
dest: '<%= dirs.css %>/main.css'
}
},
browserSync: {
dev: {
options: {
server: "./app",
background: true
}
}
},
bsReload: {
css: {
reload: "main.css"
},
all: {
reload: true
}
}
});
// load npm tasks
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-contrib-watch');
// define default task
grunt.registerTask('default', ['browserSync', 'watch']);
};
```

38
node_modules/bs-recipes/recipes/grunt.sass/Gruntfile.js generated vendored Normal file
View File

@ -0,0 +1,38 @@
// This shows a full config file!
module.exports = function (grunt) {
grunt.initConfig({
watch: {
files: 'app/scss/**/*.scss',
tasks: ['sass']
},
sass: {
dev: {
files: {
'app/css/main.css': 'app/scss/main.scss'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : [
'app/css/*.css',
'app/*.html'
]
},
options: {
watchTask: true,
server: './app'
}
}
}
});
// load npm tasks
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
// define default task
grunt.registerTask('default', ['browserSync', 'watch']);
};

4
node_modules/bs-recipes/recipes/grunt.sass/app/css/main.css generated vendored Normal file
View File

@ -0,0 +1,4 @@
body {
background: orange; }
/*# sourceMappingURL=main.css.map */

11
node_modules/bs-recipes/recipes/grunt.sass/app/index.html generated vendored Normal file
View File

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

3
node_modules/bs-recipes/recipes/grunt.sass/app/scss/main.scss generated vendored Normal file
View File

@ -0,0 +1,3 @@
body {
background: orange;
}

0
node_modules/bs-recipes/recipes/grunt.sass/desc.md generated vendored Normal file
View File

17
node_modules/bs-recipes/recipes/grunt.sass/package.json generated vendored Normal file
View File

@ -0,0 +1,17 @@
{
"name": "grunt.sass",
"version": "1.0.0",
"description": "Grunt & SASS",
"main": "Gruntfile.js",
"scripts": {
"start": "grunt"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-browser-sync": "^2.0.0",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-watch": "^0.6.1"
}
}

72
node_modules/bs-recipes/recipes/grunt.sass/readme.md generated vendored Normal file
View File

@ -0,0 +1,72 @@
#Browsersync - Grunt &amp; SASS
## 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/grunt.sass
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
### Preview of `Gruntfile.js`:
```js
// This shows a full config file!
module.exports = function (grunt) {
grunt.initConfig({
watch: {
files: 'app/scss/**/*.scss',
tasks: ['sass']
},
sass: {
dev: {
files: {
'app/css/main.css': 'app/scss/main.scss'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : [
'app/css/*.css',
'app/*.html'
]
},
options: {
watchTask: true,
server: './app'
}
}
}
});
// load npm tasks
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
// define default task
grunt.registerTask('default', ['browserSync', 'watch']);
};
```

4
node_modules/bs-recipes/recipes/gulp.browserify/app/css/main.css generated vendored Normal file
View File

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

15
node_modules/bs-recipes/recipes/gulp.browserify/app/index.html generated vendored Normal file
View File

@ -0,0 +1,15 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Browsersync Browserify Example</title>
<link rel='stylesheet' href='css/main.css'>
</head>
<body>
<h1>Browsersync Browserify Example</h1>
<div id="example"></div>
<script src="js/dist/bundle.js"></script>
</body>
</html>

1
node_modules/bs-recipes/recipes/gulp.browserify/app/js/app.js generated vendored Normal file
View File

@ -0,0 +1 @@
let app = 'awesome';

1
node_modules/bs-recipes/recipes/gulp.browserify/app/js/dist/.npmignore generated vendored Normal file
View File

@ -0,0 +1 @@
*.js

15
node_modules/bs-recipes/recipes/gulp.browserify/app/js/dist/bundle.js.map generated vendored Normal file
View File

@ -0,0 +1,15 @@
{
"version": 3,
"sources": [
"node_modules/browserify/node_modules/browser-pack/_prelude.js",
"app.js"
],
"names": [],
"mappings": "AAAA;;;ACAA,IAAI,GAAG,GAAG,SAAS,CAAC;AACpB,SAAS",
"file": "generated.js",
"sourceRoot": "",
"sourcesContent": [
"(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})",
"let app = 'awesome';\ndebugger;"
]
}

3
node_modules/bs-recipes/recipes/gulp.browserify/desc.md generated vendored Normal file
View File

@ -0,0 +1,3 @@
This one is a beast. Write your React JSX code, in ES6, compiled by Browserify and auto-reload all devices
when the compilation is complete.

54
node_modules/bs-recipes/recipes/gulp.browserify/gulpfile.js generated vendored Normal file
View File

@ -0,0 +1,54 @@
var gulp = require('gulp');
var gutil = require('gulp-util');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
var watchify = require('watchify');
var exorcist = require('exorcist');
var browserify = require('browserify');
var browserSync = require('browser-sync').create();
// Watchify args contains necessary cache options to achieve fast incremental bundles.
// See watchify readme for details. Adding debug true for source-map generation.
watchify.args.debug = true;
// Input file.
var bundler = watchify(browserify('./app/js/app.js', watchify.args));
// Babel transform
bundler.transform(babelify.configure({
sourceMapRelative: 'app/js'
}));
// On updates recompile
bundler.on('update', bundle);
function bundle() {
gutil.log('Compiling JS...');
return bundler.bundle()
.on('error', function (err) {
gutil.log(err.message);
browserSync.notify("Browserify Error!");
this.emit("end");
})
.pipe(exorcist('app/js/dist/bundle.js.map'))
.pipe(source('bundle.js'))
.pipe(gulp.dest('./app/js/dist'))
.pipe(browserSync.stream({once: true}));
}
/**
* Gulp task alias
*/
gulp.task('bundle', function () {
return bundle();
});
/**
* First bundle, then serve from the ./app directory
*/
gulp.task('default', ['bundle'], function () {
browserSync.init({
server: "./app"
});
});

20
node_modules/bs-recipes/recipes/gulp.browserify/package.json generated vendored Normal file
View File

@ -0,0 +1,20 @@
{
"name": "gulp.browserify",
"version": "1.0.0",
"description": "Browserify, Babelify + Watchify + Sourcemaps Example",
"main": "gulpfile.js",
"scripts": {
"start": "gulp"
},
"license": "MIT",
"devDependencies": {
"exorcist": "^0.4.0",
"babelify": "^6.1.2",
"browser-sync": "^2.2.1",
"browserify": "^8.1.3",
"gulp": "^3.8.11",
"gulp-util": "^3.0.3",
"vinyl-source-stream": "^1.0.0",
"watchify": "^2.3.0"
}
}

91
node_modules/bs-recipes/recipes/gulp.browserify/readme.md generated vendored Normal file
View File

@ -0,0 +1,91 @@
#Browsersync - Browserify, Babelify + Watchify + Sourcemaps 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/gulp.browserify
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
This one is a beast. Write your React JSX code, in ES6, compiled by Browserify and auto-reload all devices
when the compilation is complete.
### Preview of `gulpfile.js`:
```js
var gulp = require('gulp');
var gutil = require('gulp-util');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
var watchify = require('watchify');
var exorcist = require('exorcist');
var browserify = require('browserify');
var browserSync = require('browser-sync').create();
// Watchify args contains necessary cache options to achieve fast incremental bundles.
// See watchify readme for details. Adding debug true for source-map generation.
watchify.args.debug = true;
// Input file.
var bundler = watchify(browserify('./app/js/app.js', watchify.args));
// Babel transform
bundler.transform(babelify.configure({
sourceMapRelative: 'app/js'
}));
// On updates recompile
bundler.on('update', bundle);
function bundle() {
gutil.log('Compiling JS...');
return bundler.bundle()
.on('error', function (err) {
gutil.log(err.message);
browserSync.notify("Browserify Error!");
this.emit("end");
})
.pipe(exorcist('app/js/dist/bundle.js.map'))
.pipe(source('bundle.js'))
.pipe(gulp.dest('./app/js/dist'))
.pipe(browserSync.stream({once: true}));
}
/**
* Gulp task alias
*/
gulp.task('bundle', function () {
return bundle();
});
/**
* First bundle, then serve from the ./app directory
*/
gulp.task('default', ['bundle'], function () {
browserSync.init({
server: "./app"
});
});
```

3
node_modules/bs-recipes/recipes/gulp.pug/.npmignore generated vendored Normal file
View File

@ -0,0 +1,3 @@
node_modules
npm-debug.log
dist

10
node_modules/bs-recipes/recipes/gulp.pug/app/index.pug generated vendored Normal file
View File

@ -0,0 +1,10 @@
html
head
title Gulp, SASS + Pug Templates
link(href='/css/main.css', rel='stylesheet')
body
h1 Gulp, SASS + Pug Templates
p Your gulpfile provides some context for Pug:
ul
each val, index in locals
li= index + ': ' + val

3
node_modules/bs-recipes/recipes/gulp.pug/app/scss/main.scss generated vendored Normal file
View File

@ -0,0 +1,3 @@
body {
background: white;
}

11
node_modules/bs-recipes/recipes/gulp.pug/desc.md generated vendored Normal file
View File

@ -0,0 +1,11 @@
This is an upgraded version of [gulp.jade recipe](https://github.com/Browsersync/recipes/tree/master/recipes/gulp.jade) from [BrowserSync](https://github.com/browsersync/browser-sync) .
Some useful links:
- template engine : [pug documentation](https://pugjs.org/api/reference.html)
(was: Jade)
- and its integration with gulp: [gulp-pug](https://www.npmjs.com/package/gulp-pug)
- css preprocessing : [node-sass](https://www.npmjs.com/package/node-sass)
- and its integration with
gulp: [gulp-sass](https://www.npmjs.com/package/gulp-pug)
- and of course [gulp](https://github.com/gulpjs/gulp/blob/master/docs/README.md)

49
node_modules/bs-recipes/recipes/gulp.pug/gulpfile.js generated vendored Normal file
View File

@ -0,0 +1,49 @@
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var pug = require('gulp-pug');
var reload = browserSync.reload;
/**
* Compile pug files into HTML
*/
gulp.task('templates', function() {
var YOUR_LOCALS = {
"message": "This app is powered by gulp.pug recipe for BrowserSync"
};
return gulp.src('./app/*.pug')
.pipe(pug({
locals: YOUR_LOCALS
}))
.pipe(gulp.dest('./dist/'));
});
/**
* Important!!
* Separate task for the reaction to `.pug` files
*/
gulp.task('pug-watch', ['templates'], reload);
/**
* Sass task for live injecting into all browsers
*/
gulp.task('sass', function () {
return gulp.src('./app/scss/*.scss')
.pipe(sass()).on('error', sass.logError)
.pipe(gulp.dest('./dist/css'))
.pipe(reload({stream: true}));
});
/**
* Serve and watch the scss/pug files for changes
*/
gulp.task('default', ['sass', 'templates'], function () {
browserSync({server: './dist'});
gulp.watch('./app/scss/*.scss', ['sass']);
gulp.watch('./app/*.pug', ['pug-watch']);
});

17
node_modules/bs-recipes/recipes/gulp.pug/package.json generated vendored Normal file
View File

@ -0,0 +1,17 @@
{
"name": "gulp.pug",
"version": "1.0.0",
"description": "Gulp, SASS + Pug Templates",
"main": "gulpfile.js",
"scripts": {
"start": "gulp"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.17.5",
"gulp": "^3.9.1",
"gulp-pug": "^3.1.0",
"gulp-sass": "^2.3.2"
}
}

94
node_modules/bs-recipes/recipes/gulp.pug/readme.md generated vendored Normal file
View File

@ -0,0 +1,94 @@
#Browsersync - Gulp, SASS + Pug Templates
## 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/gulp.pug
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
This is an upgraded version of [gulp.jade recipe](https://github.com/Browsersync/recipes/tree/master/recipes/gulp.jade) from [BrowserSync](https://github.com/browsersync/browser-sync) .
Some useful links:
- template engine : [pug documentation](https://pugjs.org/api/reference.html)
(was: Jade)
- and its integration with gulp: [gulp-pug](https://www.npmjs.com/package/gulp-pug)
- css preprocessing : [node-sass](https://www.npmjs.com/package/node-sass)
- and its integration with
gulp: [gulp-sass](https://www.npmjs.com/package/gulp-pug)
- and of course [gulp](https://github.com/gulpjs/gulp/blob/master/docs/README.md)
### Preview of `gulpfile.js`:
```js
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var pug = require('gulp-pug');
var reload = browserSync.reload;
/**
* Compile pug files into HTML
*/
gulp.task('templates', function() {
var YOUR_LOCALS = {
"message": "This app is powered by gulp.pug recipe for BrowserSync"
};
return gulp.src('./app/*.pug')
.pipe(pug({
locals: YOUR_LOCALS
}))
.pipe(gulp.dest('./dist/'));
});
/**
* Important!!
* Separate task for the reaction to `.pug` files
*/
gulp.task('pug-watch', ['templates'], reload);
/**
* Sass task for live injecting into all browsers
*/
gulp.task('sass', function () {
return gulp.src('./app/scss/*.scss')
.pipe(sass()).on('error', sass.logError)
.pipe(gulp.dest('./dist/css'))
.pipe(reload({stream: true}));
});
/**
* Serve and watch the scss/pug files for changes
*/
gulp.task('default', ['sass', 'templates'], function () {
browserSync({server: './dist'});
gulp.watch('./app/scss/*.scss', ['sass']);
gulp.watch('./app/*.pug', ['pug-watch']);
});
```

6
node_modules/bs-recipes/recipes/gulp.ruby.sass/app/css/main.css generated vendored Normal file
View File

@ -0,0 +1,6 @@
body {
background: white; }
/*# sourceMappingURL=main.css.map */

1
node_modules/bs-recipes/recipes/gulp.ruby.sass/app/css/main.css.map generated vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"mappings":"AAAA,IAAK;EACD,UAAU,EAAE,GAAG","sources":["main.scss"],"names":[],"file":"main.css","sourceRoot":"/app/scss"}

11
node_modules/bs-recipes/recipes/gulp.ruby.sass/app/index.html generated vendored Normal file
View File

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

3
node_modules/bs-recipes/recipes/gulp.ruby.sass/app/scss/main.scss generated vendored Normal file
View File

@ -0,0 +1,3 @@
body {
background: white;
}

5
node_modules/bs-recipes/recipes/gulp.ruby.sass/desc.md generated vendored Normal file
View File

@ -0,0 +1,5 @@
This example highlights both the stream support for injecting CSS, aswell
as the support for calling `reload` directly following html changes.
We also need to filter out any source maps created by ruby-sass.

54
node_modules/bs-recipes/recipes/gulp.ruby.sass/gulpfile.js generated vendored Normal file
View File

@ -0,0 +1,54 @@
var gulp = require('gulp');
var browserSync = require('browser-sync');
var filter = require('gulp-filter');
var sass = require('gulp-ruby-sass');
var sourcemaps = require('gulp-sourcemaps');
var reload = browserSync.reload;
var src = {
scss: 'app/scss/*.scss',
css: 'app/css',
html: 'app/*.html'
};
/**
* Kick off the sass stream with source maps + error handling
*/
function sassStream () {
return sass('app/scss', {sourcemap: true})
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(sourcemaps.write('./', {
includeContent: false,
sourceRoot: '/app/scss'
}));
}
/**
* Start the Browsersync Static Server + Watch files
*/
gulp.task('serve', ['sass'], function() {
browserSync({
server: "./app"
});
gulp.watch(src.scss, ['sass']);
gulp.watch(src.html).on('change', reload);
});
/**
* Compile sass, filter the results, inject CSS into all browsers
*/
gulp.task('sass', function() {
return sassStream()
.pipe(gulp.dest(src.css))
.pipe(filter("**/*.css"))
.pipe(reload({stream: true}));
});
/**
* Default task
*/
gulp.task('default', ['serve']);

19
node_modules/bs-recipes/recipes/gulp.ruby.sass/package.json generated vendored Normal file
View File

@ -0,0 +1,19 @@
{
"name": "gulp.ruby.sass",
"version": "1.0.0",
"description": "Gulp & Ruby SASS",
"main": "gulpfile.js",
"scripts": {
"start": "gulp"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.2.0",
"gulp": "^3.8.11",
"gulp-filter": "^2.0.2",
"gulp-ruby-sass": "^1.0.1",
"gulp-sass": "^1.3.3",
"gulp-sourcemaps": "^1.5.1"
}
}

93
node_modules/bs-recipes/recipes/gulp.ruby.sass/readme.md generated vendored Normal file
View File

@ -0,0 +1,93 @@
#Browsersync - Gulp &amp; Ruby SASS
## 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/gulp.ruby.sass
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
This example highlights both the stream support for injecting CSS, aswell
as the support for calling `reload` directly following html changes.
We also need to filter out any source maps created by ruby-sass.
### Preview of `gulpfile.js`:
```js
var gulp = require('gulp');
var browserSync = require('browser-sync');
var filter = require('gulp-filter');
var sass = require('gulp-ruby-sass');
var sourcemaps = require('gulp-sourcemaps');
var reload = browserSync.reload;
var src = {
scss: 'app/scss/*.scss',
css: 'app/css',
html: 'app/*.html'
};
/**
* Kick off the sass stream with source maps + error handling
*/
function sassStream () {
return sass('app/scss', {sourcemap: true})
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(sourcemaps.write('./', {
includeContent: false,
sourceRoot: '/app/scss'
}));
}
/**
* Start the Browsersync Static Server + Watch files
*/
gulp.task('serve', ['sass'], function() {
browserSync({
server: "./app"
});
gulp.watch(src.scss, ['sass']);
gulp.watch(src.html).on('change', reload);
});
/**
* Compile sass, filter the results, inject CSS into all browsers
*/
gulp.task('sass', function() {
return sassStream()
.pipe(gulp.dest(src.css))
.pipe(filter("**/*.css"))
.pipe(reload({stream: true}));
});
/**
* Default task
*/
gulp.task('default', ['serve']);
```

2
node_modules/bs-recipes/recipes/gulp.sass/app/css/main.css generated vendored Normal file
View File

@ -0,0 +1,2 @@
body {
background: white; }

11
node_modules/bs-recipes/recipes/gulp.sass/app/index.html generated vendored Normal file
View File

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

3
node_modules/bs-recipes/recipes/gulp.sass/app/scss/main.scss generated vendored Normal file
View File

@ -0,0 +1,3 @@
body {
background: white;
}

3
node_modules/bs-recipes/recipes/gulp.sass/desc.md generated vendored Normal file
View File

@ -0,0 +1,3 @@
This example highlights both the stream support for injecting CSS, as well
as the support for calling `reload` directly following html changes.

31
node_modules/bs-recipes/recipes/gulp.sass/gulpfile.js generated vendored Normal file
View File

@ -0,0 +1,31 @@
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var reload = browserSync.reload;
var src = {
scss: 'app/scss/*.scss',
css: 'app/css',
html: 'app/*.html'
};
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch(src.scss, ['sass']);
gulp.watch(src.html).on('change', reload);
});
// Compile sass into CSS
gulp.task('sass', function() {
return gulp.src(src.scss)
.pipe(sass())
.pipe(gulp.dest(src.css))
.pipe(reload({stream: true}));
});
gulp.task('default', ['serve']);

16
node_modules/bs-recipes/recipes/gulp.sass/package.json generated vendored Normal file
View File

@ -0,0 +1,16 @@
{
"name": "gulp.sass",
"version": "1.0.0",
"description": "Gulp & SASS",
"main": "gulpfile.js",
"scripts": {
"start": "gulp"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.2.0",
"gulp": "^3.8.11",
"gulp-sass": "^2.2.0"
}
}

70
node_modules/bs-recipes/recipes/gulp.sass/readme.md generated vendored Normal file
View File

@ -0,0 +1,70 @@
#Browsersync - Gulp &amp; SASS
## 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/gulp.sass
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
This example highlights both the stream support for injecting CSS, as well
as the support for calling `reload` directly following html changes.
### Preview of `gulpfile.js`:
```js
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var reload = browserSync.reload;
var src = {
scss: 'app/scss/*.scss',
css: 'app/css',
html: 'app/*.html'
};
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch(src.scss, ['sass']);
gulp.watch(src.html).on('change', reload);
});
// Compile sass into CSS
gulp.task('sass', function() {
return gulp.src(src.scss)
.pipe(sass())
.pipe(gulp.dest(src.css))
.pipe(reload({stream: true}));
});
gulp.task('default', ['serve']);
```

1
node_modules/bs-recipes/recipes/gulp.swig/.npmignore generated vendored Normal file
View File

@ -0,0 +1 @@
dist/

2
node_modules/bs-recipes/recipes/gulp.swig/app/css/main.css generated vendored Normal file
View File

@ -0,0 +1,2 @@
body {
background: white; }

11
node_modules/bs-recipes/recipes/gulp.swig/app/index.html generated vendored Normal file
View File

@ -0,0 +1,11 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Browsersync, Gulp + Swig templates</title>
<link rel='stylesheet' href='css/main.css'>
</head>
<body>
<h1>Browsersync, Gulp + Swig templates</h1>
</body>
</html>

3
node_modules/bs-recipes/recipes/gulp.swig/app/scss/main.scss generated vendored Normal file
View File

@ -0,0 +1,3 @@
body {
background: white;
}

3
node_modules/bs-recipes/recipes/gulp.swig/desc.md generated vendored Normal file
View File

@ -0,0 +1,3 @@
This example will build HTML files from `./app` with `gulp-swig`
and place them into the `dist` folder. Browsersync then serves from that
folder and reloads after the templates are compiled.

40
node_modules/bs-recipes/recipes/gulp.swig/gulpfile.js generated vendored Normal file
View File

@ -0,0 +1,40 @@
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var swig = require('gulp-swig');
var reload = browserSync.reload;
var src = {
scss: 'app/scss/*.scss',
css: 'app/css',
html: 'app/*.html'
};
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync({
server: "./dist"
});
gulp.watch(src.scss, ['sass']);
gulp.watch(src.html, ['templates']);
});
// Swig templates
gulp.task('templates', function() {
return gulp.src(src.html)
.pipe(swig())
.pipe(gulp.dest('./dist'))
.on("end", reload);
});
// Compile sass into CSS
gulp.task('sass', function() {
return gulp.src(src.scss)
.pipe(sass())
.pipe(gulp.dest(src.css))
.pipe(reload({stream: true}));
});
gulp.task('default', ['serve']);

17
node_modules/bs-recipes/recipes/gulp.swig/package.json generated vendored Normal file
View File

@ -0,0 +1,17 @@
{
"name": "gulp.swig",
"version": "1.0.0",
"description": "Gulp & Swig Templates",
"main": "gulpfile.js",
"scripts": {
"start": "gulp"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.2.0",
"gulp": "^3.8.11",
"gulp-sass": "^1.3.3",
"gulp-swig": "^0.7.4"
}
}

77
node_modules/bs-recipes/recipes/gulp.swig/readme.md generated vendored Normal file
View File

@ -0,0 +1,77 @@
#Browsersync - Gulp &amp; Swig Templates
## 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/gulp.swig
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
This example will build HTML files from `./app` with `gulp-swig`
and place them into the `dist` folder. Browsersync then serves from that
folder and reloads after the templates are compiled.
### Preview of `gulpfile.js`:
```js
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var swig = require('gulp-swig');
var reload = browserSync.reload;
var src = {
scss: 'app/scss/*.scss',
css: 'app/css',
html: 'app/*.html'
};
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync({
server: "./dist"
});
gulp.watch(src.scss, ['sass']);
gulp.watch(src.html, ['templates']);
});
// Swig templates
gulp.task('templates', function() {
return gulp.src(src.html)
.pipe(swig())
.pipe(gulp.dest('./dist'))
.on("end", reload);
});
// Compile sass into CSS
gulp.task('sass', function() {
return gulp.src(src.scss)
.pipe(sass())
.pipe(gulp.dest(src.css))
.pipe(reload({stream: true}));
});
gulp.task('default', ['serve']);
```

2
node_modules/bs-recipes/recipes/gulp.task.sequence/app/css/main.css generated vendored Normal file
View File

@ -0,0 +1,2 @@
body {
background: white; }

11
node_modules/bs-recipes/recipes/gulp.task.sequence/app/index.html generated vendored Normal file
View File

@ -0,0 +1,11 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Browsersync, Gulp, SASS + Slow tasks example</title>
<link rel='stylesheet' href='css/main.css'>
</head>
<body>
<h1>Browsersync, Gulp, SASS + Slow tasks example</h1>
</body>
</html>

3
node_modules/bs-recipes/recipes/gulp.task.sequence/app/scss/main.scss generated vendored Normal file
View File

@ -0,0 +1,3 @@
body {
background: white;
}

5
node_modules/bs-recipes/recipes/gulp.task.sequence/desc.md generated vendored Normal file
View File

@ -0,0 +1,5 @@
This example highlights a common problem where you don't want to reload
the browser until a 2 or more slow-running tasks have completed. The solution
is to create the intermediate task that ensures `browserSync.reload` is not
called until both slow tasks are complete.

57
node_modules/bs-recipes/recipes/gulp.task.sequence/gulpfile.js generated vendored Normal file
View File

@ -0,0 +1,57 @@
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var reload = browserSync.reload;
var through = require("through2");
/**
* A slow task
*/
gulp.task('slow1', function () {
return gulp.src('./app/*.html')
.pipe(slowStream());
});
/**
* Another Slow task
*/
gulp.task('slow2', function () {
return gulp.src('./app/*.html')
.pipe(slowStream());
});
/**
* Separate task for the reaction to a file change
*/
gulp.task('html-watch', ['slow1', 'slow2'], reload);
/**
* Sass task for live injecting into all browsers
*/
gulp.task('sass', function () {
return gulp.src('./app/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./app/css'))
.pipe(reload({stream: true}));
});
/**
* Serve and watch the html files for changes
*/
gulp.task('default', function () {
browserSync({server: './app'});
gulp.watch('./app/scss/*.scss', ['sass']);
gulp.watch('./app/*.html', ['html-watch']);
});
/**
* Simulate a slow task
*/
function slowStream () {
return through.obj(function (file, enc, cb) {
this.push(file);
setTimeout(cb, 2000);
});
}

17
node_modules/bs-recipes/recipes/gulp.task.sequence/package.json generated vendored Normal file
View File

@ -0,0 +1,17 @@
{
"name": "gulp.sass",
"version": "1.0.0",
"description": "Gulp, SASS + Slow running tasks",
"main": "gulpfile.js",
"scripts": {
"start": "gulp"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.2.0",
"gulp": "^3.8.11",
"gulp-sass": "^1.3.3",
"through2": "^0.6.3"
}
}

97
node_modules/bs-recipes/recipes/gulp.task.sequence/readme.md generated vendored Normal file
View File

@ -0,0 +1,97 @@
#Browsersync - Gulp, SASS + Slow running tasks
## 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/gulp.task.sequence
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
This example highlights a common problem where you don't want to reload
the browser until a 2 or more slow-running tasks have completed. The solution
is to create the intermediate task that ensures `browserSync.reload` is not
called until both slow tasks are complete.
### Preview of `gulpfile.js`:
```js
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var reload = browserSync.reload;
var through = require("through2");
/**
* A slow task
*/
gulp.task('slow1', function () {
return gulp.src('./app/*.html')
.pipe(slowStream());
});
/**
* Another Slow task
*/
gulp.task('slow2', function () {
return gulp.src('./app/*.html')
.pipe(slowStream());
});
/**
* Separate task for the reaction to a file change
*/
gulp.task('html-watch', ['slow1', 'slow2'], reload);
/**
* Sass task for live injecting into all browsers
*/
gulp.task('sass', function () {
return gulp.src('./app/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./app/css'))
.pipe(reload({stream: true}));
});
/**
* Serve and watch the html files for changes
*/
gulp.task('default', function () {
browserSync({server: './app'});
gulp.watch('./app/scss/*.scss', ['sass']);
gulp.watch('./app/*.html', ['html-watch']);
});
/**
* Simulate a slow task
*/
function slowStream () {
return through.obj(function (file, enc, cb) {
this.push(file);
setTimeout(cb, 2000);
});
}
```

20
node_modules/bs-recipes/recipes/html.injection/app.js generated vendored Normal file
View File

@ -0,0 +1,20 @@
/**
* Require Browsersync
*/
var bs = require('browser-sync').create();
/**
* Run Browsersync with server config
*/
bs.init({
server: "app",
files: ["app/css/*.css"],
plugins: [
{
module: "bs-html-injector",
options: {
files: ["app/*.html"]
}
}
]
});

8
node_modules/bs-recipes/recipes/html.injection/app/css/main.css generated vendored Normal file
View File

@ -0,0 +1,8 @@
body {
background: white;
color: black;
}
p.lede {
font-size: 2em;
}

16
node_modules/bs-recipes/recipes/html.injection/app/index.html generated vendored Normal file
View File

@ -0,0 +1,16 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Browsersync Server Example</title>
<link rel='stylesheet' href='css/main.css'>
</head>
<body>
<header>
<h1>Browsersync HTML injection Examples</h1>
<p>Any changes you make to the HTML will be injected</p>
</header>
</body>
</html>

2
node_modules/bs-recipes/recipes/html.injection/desc.md generated vendored Normal file
View File

@ -0,0 +1,2 @@
To see the live HTML injecting, along with CSS injection, simply perform changes to either `index.html` or `css/main.css`

14
node_modules/bs-recipes/recipes/html.injection/package.json generated vendored Normal file
View File

@ -0,0 +1,14 @@
{
"name": "bs-recipes-html-injection",
"version": "1.0.0",
"description": "HTML/CSS injection example",
"main": "app.js",
"scripts": {
"start": "node app.js"
},
"license": "MIT",
"devDependencies": {
"bs-html-injector": "^2.0.3",
"browser-sync": "^2.1.6"
}
}

56
node_modules/bs-recipes/recipes/html.injection/readme.md generated vendored Normal file
View File

@ -0,0 +1,56 @@
#Browsersync - HTML/CSS injection 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/html.injection
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
To see the live HTML injecting, along with CSS injection, simply perform changes to either `index.html` or `css/main.css`
### Preview of `app.js`:
```js
/**
* Require Browsersync
*/
var bs = require('browser-sync').create();
/**
* Run Browsersync with server config
*/
bs.init({
server: "app",
files: ["app/css/*.css"],
plugins: [
{
module: "bs-html-injector",
options: {
files: ["app/*.html"]
}
}
]
});
```

40
node_modules/bs-recipes/recipes/middleware.css.injection/app.js generated vendored Normal file
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
});

4
node_modules/bs-recipes/recipes/middleware.css.injection/app/css/main.less generated vendored Normal file
View File

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

11
node_modules/bs-recipes/recipes/middleware.css.injection/app/index.html generated vendored Normal file
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>

1
node_modules/bs-recipes/recipes/middleware.css.injection/desc.md generated vendored Normal file
View File

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

14
node_modules/bs-recipes/recipes/middleware.css.injection/package.json generated vendored Normal file
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"
}
}

75
node_modules/bs-recipes/recipes/middleware.css.injection/readme.md generated vendored Normal file
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
});
```

22
node_modules/bs-recipes/recipes/proxy.custom-css/app.js generated vendored Normal file
View File

@ -0,0 +1,22 @@
/**
* Require Browsersync
*/
var browserSync = require('browser-sync').create();
/**
* Run Browsersync with server config
* You can use an arrays for files to specify multiple files
*/
browserSync.init({
proxy: "example.com",
serveStatic: ["app/static"],
files: "app/static/_custom.css",
snippetOptions: {
rule: {
match: /<\/head>/i,
fn: function (snippet, match) {
return '<link rel="stylesheet" type="text/css" href="/_custom.css"/>' + snippet + match;
}
}
}
});

3
node_modules/bs-recipes/recipes/proxy.custom-css/app/static/_custom.css generated vendored Normal file
View File

@ -0,0 +1,3 @@
body {
background: black;
}

2
node_modules/bs-recipes/recipes/proxy.custom-css/desc.md generated vendored Normal file
View File

@ -0,0 +1,2 @@
To see the live-updating and CSS injecting, simply perform changes to `app/static/_custom.css`

13
node_modules/bs-recipes/recipes/proxy.custom-css/package.json generated vendored Normal file
View File

@ -0,0 +1,13 @@
{
"name": "bs-recipes-server",
"version": "1.0.0",
"description": "Proxy example + injecting custom css file",
"main": "app.js",
"scripts": {
"start": "node app.js"
},
"license": "MIT",
"dependencies": {
"browser-sync": "^2.11.2"
}
}

59
node_modules/bs-recipes/recipes/proxy.custom-css/readme.md generated vendored Normal file
View File

@ -0,0 +1,59 @@
#Browsersync - Proxy example + injecting custom css file
## 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/proxy.custom-css
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
To see the live-updating and CSS injecting, simply perform changes to `app/static/_custom.css`
### Preview of `app.js`:
```js
/**
* Require Browsersync
*/
var browserSync = require('browser-sync').create();
/**
* Run Browsersync with server config
* You can use an arrays for files to specify multiple files
*/
browserSync.init({
proxy: "example.com",
serveStatic: ["app/static"],
files: "app/static/_custom.css",
snippetOptions: {
rule: {
match: /<\/head>/i,
fn: function (snippet, match) {
return '<link rel="stylesheet" type="text/css" href="/_custom.css"/>' + snippet + match;
}
}
}
});
```

19
node_modules/bs-recipes/recipes/server.gzipped.assets/app.js generated vendored Normal file
View File

@ -0,0 +1,19 @@
/**
* Require Browsersync
*/
var browserSync = require('browser-sync').create();
var middleware = require('connect-gzip-static')('./app');
/**
* Run Browsersync with server config
* Add middleware with override:true to ensure all files are
* picked up.
*/
browserSync.init({
server: 'app',
files: ['app/*.html', 'app/css/*.css']
}, function (err, bs) {
bs.addMiddleware("*", middleware, {
override: true
});
});

BIN
node_modules/bs-recipes/recipes/server.gzipped.assets/app/css/main.css.gz generated vendored Normal file
View File

Binary file not shown.

11
node_modules/bs-recipes/recipes/server.gzipped.assets/app/index.html generated vendored Normal file
View File

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

3
node_modules/bs-recipes/recipes/server.gzipped.assets/desc.md generated vendored Normal file
View File

@ -0,0 +1,3 @@
This example shows how you can use the `connect-gzip-static` middleware
to serve already-gzipped assets.

14
node_modules/bs-recipes/recipes/server.gzipped.assets/package.json generated vendored Normal file
View File

@ -0,0 +1,14 @@
{
"name": "bs-recipes-server-with-gzipped-assets",
"version": "1.0.0",
"description": "Server with pre-gzipped assets example",
"main": "app.js",
"scripts": {
"start": "node app.js"
},
"license": "MIT",
"dependencies": {
"browser-sync": "^2.4.0",
"connect-gzip-static": "^1.0.0"
}
}

56
node_modules/bs-recipes/recipes/server.gzipped.assets/readme.md generated vendored Normal file
View File

@ -0,0 +1,56 @@
#Browsersync - Server with pre-gzipped assets 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/server.gzipped.assets
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
This example shows how you can use the `connect-gzip-static` middleware
to serve already-gzipped assets.
### Preview of `app.js`:
```js
/**
* Require Browsersync
*/
var browserSync = require('browser-sync').create();
var middleware = require('connect-gzip-static')('./app');
/**
* Run Browsersync with server config
* Add middleware with override:true to ensure all files are
* picked up.
*/
browserSync.init({
server: 'app',
files: ['app/*.html', 'app/css/*.css']
}, function (err, bs) {
bs.addMiddleware("*", middleware, {
override: true
});
});
```

25
node_modules/bs-recipes/recipes/server.includes/app.js generated vendored Normal file
View File

@ -0,0 +1,25 @@
/**
* Require Browsersync
*/
var browserSync = require('browser-sync').create();
var fs = require('fs');
/**
* Run Browsersync with server config
*/
browserSync.init({
server: 'app',
files: ['app/*.html', 'app/css/*.css'],
rewriteRules: [
{
match: /@include\("(.+?)"\)/g,
fn: function (match, filename) {
if (fs.existsSync(filename)) {
return fs.readFileSync(filename);
} else {
return '<span style="color: red">'+filename+' could not be found</span>';
}
}
}
]
});

4
node_modules/bs-recipes/recipes/server.includes/app/css/main.css generated vendored Normal file
View File

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

3
node_modules/bs-recipes/recipes/server.includes/app/footer.html generated vendored Normal file
View File

@ -0,0 +1,3 @@
<footer>
<p class="copyright">Copyright</p>
</footer>

3
node_modules/bs-recipes/recipes/server.includes/app/header.html generated vendored Normal file
View File

@ -0,0 +1,3 @@
<header>
<h1>Some title!</h1>
</header>

13
node_modules/bs-recipes/recipes/server.includes/app/index.html generated vendored Normal file
View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Browsersync Server Includes Example</title>
<link rel='stylesheet' href='css/main.css'>
</head>
<body>
@include("app/header.html")
<h1>Browsersync Server Includes Example</h1>
@include("app/footer.html")
</body>
</html>

0
node_modules/bs-recipes/recipes/server.includes/desc.md generated vendored Normal file
View File

13
node_modules/bs-recipes/recipes/server.includes/package.json generated vendored Normal file
View File

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

59
node_modules/bs-recipes/recipes/server.includes/readme.md generated vendored Normal file
View File

@ -0,0 +1,59 @@
#Browsersync - Server includes 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/server.includes
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
### Preview of `app.js`:
```js
/**
* Require Browsersync
*/
var browserSync = require('browser-sync').create();
var fs = require('fs');
/**
* Run Browsersync with server config
*/
browserSync.init({
server: 'app',
files: ['app/*.html', 'app/css/*.css'],
rewriteRules: [
{
match: /@include\("(.+?)"\)/g,
fn: function (match, filename) {
if (fs.existsSync(filename)) {
return fs.readFileSync(filename);
} else {
return '<span style="color: red">'+filename+' could not be found</span>';
}
}
}
]
});
```

14
node_modules/bs-recipes/recipes/server.middleware/app.js generated vendored Normal file
View File

@ -0,0 +1,14 @@
/**
* Require Browsersync
*/
var browserSync = require('browser-sync').create();
var historyApiFallback = require('connect-history-api-fallback')
/**
* Run Browsersync with server config
*/
browserSync.init({
server: "app",
files: ["app/*.html", "app/css/*.css"],
middleware: [require("connect-logger")(), historyApiFallback()]
});

4
node_modules/bs-recipes/recipes/server.middleware/app/css/main.css generated vendored Normal file
View File

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

11
node_modules/bs-recipes/recipes/server.middleware/app/index.html generated vendored Normal file
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.css'>
</head>
<body>
<h1>Browsersync Server Example</h1>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More