mirror of
https://github.com/fooflington/selfdefined.git
synced 2025-06-10 21:01:41 +00:00
update
This commit is contained in:
tatianamac
1
node_modules/bs-recipes/index.js
generated
vendored
Normal file
1
node_modules/bs-recipes/index.js
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
/* Module resolution */
|
||||
638
node_modules/bs-recipes/manifest.json
generated
vendored
Normal file
638
node_modules/bs-recipes/manifest.json
generated
vendored
Normal file
@ -0,0 +1,638 @@
|
||||
[
|
||||
{
|
||||
"dir": "grunt.html.injection",
|
||||
"name": [
|
||||
"grunt",
|
||||
"html",
|
||||
"injection"
|
||||
],
|
||||
"pkg": {
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/grunt.html.injection",
|
||||
"title": "Grunt Html Injection"
|
||||
},
|
||||
{
|
||||
"dir": "grunt.sass",
|
||||
"name": [
|
||||
"grunt",
|
||||
"sass"
|
||||
],
|
||||
"pkg": {
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/grunt.sass",
|
||||
"title": "Grunt Sass"
|
||||
},
|
||||
{
|
||||
"dir": "grunt.sass.autoprefixer",
|
||||
"name": [
|
||||
"grunt",
|
||||
"sass",
|
||||
"autoprefixer"
|
||||
],
|
||||
"pkg": {
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/grunt.sass.autoprefixer",
|
||||
"title": "Grunt Sass Autoprefixer"
|
||||
},
|
||||
{
|
||||
"dir": "gulp.browserify",
|
||||
"name": [
|
||||
"gulp",
|
||||
"browserify"
|
||||
],
|
||||
"pkg": {
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/gulp.browserify",
|
||||
"title": "Gulp Browserify"
|
||||
},
|
||||
{
|
||||
"dir": "gulp.pug",
|
||||
"name": [
|
||||
"gulp",
|
||||
"pug"
|
||||
],
|
||||
"pkg": {
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/gulp.pug",
|
||||
"title": "Gulp Pug"
|
||||
},
|
||||
{
|
||||
"dir": "gulp.ruby.sass",
|
||||
"name": [
|
||||
"gulp",
|
||||
"ruby",
|
||||
"sass"
|
||||
],
|
||||
"pkg": {
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/gulp.ruby.sass",
|
||||
"title": "Gulp Ruby Sass"
|
||||
},
|
||||
{
|
||||
"dir": "gulp.sass",
|
||||
"name": [
|
||||
"gulp",
|
||||
"sass"
|
||||
],
|
||||
"pkg": {
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/gulp.sass",
|
||||
"title": "Gulp Sass"
|
||||
},
|
||||
{
|
||||
"dir": "gulp.swig",
|
||||
"name": [
|
||||
"gulp",
|
||||
"swig"
|
||||
],
|
||||
"pkg": {
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/gulp.swig",
|
||||
"title": "Gulp Swig"
|
||||
},
|
||||
{
|
||||
"dir": "gulp.task.sequence",
|
||||
"name": [
|
||||
"gulp",
|
||||
"task",
|
||||
"sequence"
|
||||
],
|
||||
"pkg": {
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/gulp.task.sequence",
|
||||
"title": "Gulp Task Sequence"
|
||||
},
|
||||
{
|
||||
"dir": "html.injection",
|
||||
"name": [
|
||||
"html",
|
||||
"injection"
|
||||
],
|
||||
"pkg": {
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/html.injection",
|
||||
"title": "Html Injection"
|
||||
},
|
||||
{
|
||||
"dir": "middleware.css.injection",
|
||||
"name": [
|
||||
"middleware",
|
||||
"css",
|
||||
"injection"
|
||||
],
|
||||
"pkg": {
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/middleware.css.injection",
|
||||
"title": "Middleware Css Injection"
|
||||
},
|
||||
{
|
||||
"dir": "proxy.custom-css",
|
||||
"name": [
|
||||
"proxy",
|
||||
"custom-css"
|
||||
],
|
||||
"pkg": {
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/proxy.custom-css",
|
||||
"title": "Proxy Custom-css"
|
||||
},
|
||||
{
|
||||
"dir": "server",
|
||||
"name": [
|
||||
"server"
|
||||
],
|
||||
"pkg": {
|
||||
"name": "bs-recipes-server",
|
||||
"version": "1.0.0",
|
||||
"description": "Server example",
|
||||
"main": "app.js",
|
||||
"scripts": {
|
||||
"start": "node app.js"
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"browser-sync": "^2.1.6"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/server",
|
||||
"title": "Server"
|
||||
},
|
||||
{
|
||||
"dir": "server.gzipped.assets",
|
||||
"name": [
|
||||
"server",
|
||||
"gzipped",
|
||||
"assets"
|
||||
],
|
||||
"pkg": {
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/server.gzipped.assets",
|
||||
"title": "Server Gzipped Assets"
|
||||
},
|
||||
{
|
||||
"dir": "server.includes",
|
||||
"name": [
|
||||
"server",
|
||||
"includes"
|
||||
],
|
||||
"pkg": {
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/server.includes",
|
||||
"title": "Server Includes"
|
||||
},
|
||||
{
|
||||
"dir": "server.middleware",
|
||||
"name": [
|
||||
"server",
|
||||
"middleware"
|
||||
],
|
||||
"pkg": {
|
||||
"name": "bs-recipes-server",
|
||||
"version": "1.0.0",
|
||||
"description": "Server + Logging + History API fallback middlewares Example",
|
||||
"main": "app.js",
|
||||
"scripts": {
|
||||
"start": "node app.js"
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"browser-sync": "^2.1.6",
|
||||
"connect-logger": "0.0.1",
|
||||
"connect-history-api-fallback": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/server.middleware",
|
||||
"title": "Server Middleware"
|
||||
},
|
||||
{
|
||||
"dir": "webpack.babel",
|
||||
"name": [
|
||||
"webpack",
|
||||
"babel"
|
||||
],
|
||||
"pkg": {
|
||||
"name": "webpack.babel",
|
||||
"version": "1.0.0",
|
||||
"description": "Webpack + Babel",
|
||||
"main": "app.js",
|
||||
"author": "Shane Osbourne",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "node app"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.1.2",
|
||||
"babel-loader": "^6.1.0",
|
||||
"babel-plugin-transform-runtime": "^6.1.2",
|
||||
"babel-preset-es2015": "^6.1.2",
|
||||
"babel-preset-stage-0": "^6.1.2",
|
||||
"browser-sync": "^2.8.0",
|
||||
"bs-fullscreen-message": "^1.0.0",
|
||||
"strip-ansi": "^3.0.0",
|
||||
"webpack": "^1.10.5",
|
||||
"webpack-dev-middleware": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/webpack.babel",
|
||||
"title": "Webpack Babel"
|
||||
},
|
||||
{
|
||||
"dir": "webpack.monkey-hot-loader",
|
||||
"name": [
|
||||
"webpack",
|
||||
"monkey-hot-loader"
|
||||
],
|
||||
"pkg": {
|
||||
"name": "webpack.monkey-hot-loader",
|
||||
"version": "1.0.0",
|
||||
"description": "Webpack + Monkey Hot Loader",
|
||||
"main": "app.js",
|
||||
"author": "Sergey Slipchenko <faergeek@gmail.com>",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "node ."
|
||||
},
|
||||
"dependencies": {
|
||||
"browser-sync": "^2.8.0",
|
||||
"monkey-hot-loader": "0.0.3",
|
||||
"webpack": "^1.10.5",
|
||||
"webpack-dev-middleware": "^1.2.0",
|
||||
"webpack-hot-middleware": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/webpack.monkey-hot-loader",
|
||||
"title": "Webpack Monkey-hot-loader"
|
||||
},
|
||||
{
|
||||
"dir": "webpack.preact-hot-loader",
|
||||
"name": [
|
||||
"webpack",
|
||||
"preact-hot-loader"
|
||||
],
|
||||
"pkg": {
|
||||
"name": "webpack.preact-hot-loader",
|
||||
"version": "1.0.0",
|
||||
"description": "Webpack + Preact Hot Loader",
|
||||
"main": "app.js",
|
||||
"author": "Shane Osbourne",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "node .",
|
||||
"build": "webpack"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel": "^6.5.2",
|
||||
"babel-core": "^6.14.0",
|
||||
"babel-eslint": "^7.0.0",
|
||||
"babel-loader": "^6.2.5",
|
||||
"babel-plugin-transform-decorators-legacy": "^1.3.4",
|
||||
"babel-plugin-transform-react-jsx": "^6.8.0",
|
||||
"babel-preset-es2015": "^6.14.0",
|
||||
"babel-register": "^6.14.0",
|
||||
"babel-runtime": "^6.11.6",
|
||||
"browser-sync": "^2.8.0",
|
||||
"compression-webpack-plugin": "^0.3.2",
|
||||
"preact": "^6.4.0",
|
||||
"webpack": "^1.10.5",
|
||||
"webpack-dev-middleware": "^1.2.0",
|
||||
"webpack-hot-middleware": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/webpack.preact-hot-loader",
|
||||
"title": "Webpack Preact-hot-loader"
|
||||
},
|
||||
{
|
||||
"dir": "webpack.react-hot-loader",
|
||||
"name": [
|
||||
"webpack",
|
||||
"react-hot-loader"
|
||||
],
|
||||
"pkg": {
|
||||
"name": "webpack.react-hot-loader",
|
||||
"version": "1.0.0",
|
||||
"description": "Webpack + React Hot Loader",
|
||||
"main": "app.js",
|
||||
"author": "Sergey Slipchenko <faergeek@gmail.com>",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "node ."
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-core": "^6.21.0",
|
||||
"babel-loader": "^6.2.10",
|
||||
"babel-preset-es2015": "^6.9.0",
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"browser-sync": "^2.8.0",
|
||||
"react": "^15.4.1",
|
||||
"react-dom": "^15.4.1",
|
||||
"react-hot-loader": "^1.2.8",
|
||||
"webpack": "^1.10.5",
|
||||
"webpack-dev-middleware": "^1.2.0",
|
||||
"webpack-hot-middleware": "^2.13.2"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/webpack.react-hot-loader",
|
||||
"title": "Webpack React-hot-loader"
|
||||
},
|
||||
{
|
||||
"dir": "webpack.react-transform-hmr",
|
||||
"name": [
|
||||
"webpack",
|
||||
"react-transform-hmr"
|
||||
],
|
||||
"pkg": {
|
||||
"name": "webpack.react-transform-hmr",
|
||||
"version": "1.0.0",
|
||||
"description": "Webpack + React Transform HMR",
|
||||
"main": "app.js",
|
||||
"author": "Sergey Slipchenko <faergeek@gmail.com>",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "node ."
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-core": "^6.21.0",
|
||||
"babel-loader": "^6.2.10",
|
||||
"babel-plugin-react-transform": "^2.0.2",
|
||||
"babel-preset-es2015": "^6.9.0",
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"browser-sync": "^2.8.0",
|
||||
"react": "^15.4.1",
|
||||
"react-dom": "^15.4.1",
|
||||
"react-transform-hmr": "^1.0.0",
|
||||
"webpack": "^1.10.5",
|
||||
"webpack-dev-middleware": "^1.2.0",
|
||||
"webpack-hot-middleware": "^2.13.2"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/webpack.react-transform-hmr",
|
||||
"title": "Webpack React-transform-hmr"
|
||||
},
|
||||
{
|
||||
"dir": "webpack.typescript",
|
||||
"name": [
|
||||
"webpack",
|
||||
"typescript"
|
||||
],
|
||||
"pkg": {
|
||||
"name": "webpack.typescript",
|
||||
"version": "1.0.0",
|
||||
"description": "Webpack + TypeScript",
|
||||
"main": "app.js",
|
||||
"author": "Shane Osbourne and John Lindquist",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "node app"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"ts-loader": "^0.8.1",
|
||||
"typescript": "^1.7.5",
|
||||
"browser-sync": "^2.8.0",
|
||||
"bs-fullscreen-message": "^1.0.0",
|
||||
"strip-ansi": "^3.0.0",
|
||||
"webpack": "^1.10.5",
|
||||
"webpack-dev-middleware": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/webpack.typescript",
|
||||
"title": "Webpack Typescript"
|
||||
},
|
||||
{
|
||||
"dir": "webpack.typescript.react",
|
||||
"name": [
|
||||
"webpack",
|
||||
"typescript",
|
||||
"react"
|
||||
],
|
||||
"pkg": {
|
||||
"name": "webpack.typescript.react",
|
||||
"version": "1.0.0",
|
||||
"description": "Webpack, TypeScript + React",
|
||||
"main": "app.js",
|
||||
"author": "Shane Osbourne",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "node app",
|
||||
"build": "webpack",
|
||||
"preview": "npm run build && node preview"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"browser-sync": "^2.8.0",
|
||||
"bs-fullscreen-message": "^1.0.0",
|
||||
"compression": "1.6.1",
|
||||
"react": "0.14.7",
|
||||
"react-dom": "0.14.7",
|
||||
"react-lite": "0.15.3",
|
||||
"strip-ansi": "^3.0.0",
|
||||
"ts-loader": "^0.8.1",
|
||||
"typescript": "^1.7.5",
|
||||
"typings": "0.7.9",
|
||||
"webpack": "^1.10.5",
|
||||
"webpack-dev-middleware": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"link": "https://github.com/Browsersync/recipes/tree/master/recipes/webpack.typescript.react",
|
||||
"title": "Webpack Typescript React"
|
||||
}
|
||||
]
|
||||
62
node_modules/bs-recipes/package.json
generated
vendored
Normal file
62
node_modules/bs-recipes/package.json
generated
vendored
Normal file
@ -0,0 +1,62 @@
|
||||
{
|
||||
"_args": [
|
||||
[
|
||||
"bs-recipes@1.3.4",
|
||||
"/Users/tatiana/selfdefined"
|
||||
]
|
||||
],
|
||||
"_from": "bs-recipes@1.3.4",
|
||||
"_id": "bs-recipes@1.3.4",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha1-DS1NSKcYyMBEdp/cT4lZLci2lYU=",
|
||||
"_location": "/bs-recipes",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "version",
|
||||
"registry": true,
|
||||
"raw": "bs-recipes@1.3.4",
|
||||
"name": "bs-recipes",
|
||||
"escapedName": "bs-recipes",
|
||||
"rawSpec": "1.3.4",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "1.3.4"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"/browser-sync"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/bs-recipes/-/bs-recipes-1.3.4.tgz",
|
||||
"_spec": "1.3.4",
|
||||
"_where": "/Users/tatiana/selfdefined",
|
||||
"author": {
|
||||
"name": "Shane Osbourne"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/BrowserSync/recipes/issues"
|
||||
},
|
||||
"description": "Fully working project examples showing how to use BrowserSync in various ways",
|
||||
"devDependencies": {
|
||||
"crossbow": "^0.4.5",
|
||||
"node-dir": "^0.1.6"
|
||||
},
|
||||
"files": [
|
||||
"recipes",
|
||||
"index.js",
|
||||
"manifest.json"
|
||||
],
|
||||
"homepage": "http://www.browsersync.io/docs/recipes/",
|
||||
"license": "ISC",
|
||||
"main": "index.js",
|
||||
"name": "bs-recipes",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/BrowserSync/recipes.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "node crossbow.js",
|
||||
"clean:nm": "find ./recipes -name node_modules | xargs rm -rf",
|
||||
"clean:other": "find . -name .sass-cache | xargs rm -rf && find . -name .idea | xargs rm -rf",
|
||||
"prepublish": "npm run clean:nm && npm run clean:other",
|
||||
"test": "npm run-script build"
|
||||
},
|
||||
"version": "1.3.4"
|
||||
}
|
||||
97
node_modules/bs-recipes/readme.md
generated
vendored
Normal file
97
node_modules/bs-recipes/readme.md
generated
vendored
Normal file
@ -0,0 +1,97 @@
|
||||
## Browsersync recipes.
|
||||
|
||||
There are endless amounts of possible integrations and workflow scenarios when using Browsersync, so this project is an
|
||||
attempt to highlight as many of them as we can, whilst providing full, working examples.
|
||||
|
||||
Here's what we have currently...
|
||||
|
||||
- [Grunt, SASS, HTML/CSS injection example](https://github.com/Browsersync/recipes/tree/master/recipes/grunt.html.injection)
|
||||
- [Grunt & SASS](https://github.com/Browsersync/recipes/tree/master/recipes/grunt.sass)
|
||||
- [Grunt, SASS & Autoprefixer](https://github.com/Browsersync/recipes/tree/master/recipes/grunt.sass.autoprefixer)
|
||||
- [Browserify, Babelify + Watchify + Sourcemaps Example](https://github.com/Browsersync/recipes/tree/master/recipes/gulp.browserify)
|
||||
- [Gulp, SASS + Pug Templates](https://github.com/Browsersync/recipes/tree/master/recipes/gulp.pug)
|
||||
- [Gulp & Ruby SASS](https://github.com/Browsersync/recipes/tree/master/recipes/gulp.ruby.sass)
|
||||
- [Gulp & SASS](https://github.com/Browsersync/recipes/tree/master/recipes/gulp.sass)
|
||||
- [Gulp & Swig Templates](https://github.com/Browsersync/recipes/tree/master/recipes/gulp.swig)
|
||||
- [Gulp, SASS + Slow running tasks](https://github.com/Browsersync/recipes/tree/master/recipes/gulp.task.sequence)
|
||||
- [HTML/CSS injection example](https://github.com/Browsersync/recipes/tree/master/recipes/html.injection)
|
||||
- [Middleware + CSS example](https://github.com/Browsersync/recipes/tree/master/recipes/middleware.css.injection)
|
||||
- [Proxy example + injecting custom css file](https://github.com/Browsersync/recipes/tree/master/recipes/proxy.custom-css)
|
||||
- [Server example](https://github.com/Browsersync/recipes/tree/master/recipes/server)
|
||||
- [Server with pre-gzipped assets example](https://github.com/Browsersync/recipes/tree/master/recipes/server.gzipped.assets)
|
||||
- [Server includes example](https://github.com/Browsersync/recipes/tree/master/recipes/server.includes)
|
||||
- [Server + Logging + History API fallback middlewares Example](https://github.com/Browsersync/recipes/tree/master/recipes/server.middleware)
|
||||
- [Webpack + Babel](https://github.com/Browsersync/recipes/tree/master/recipes/webpack.babel)
|
||||
- [Webpack + Monkey Hot Loader](https://github.com/Browsersync/recipes/tree/master/recipes/webpack.monkey-hot-loader)
|
||||
- [Webpack + Preact Hot Loader](https://github.com/Browsersync/recipes/tree/master/recipes/webpack.preact-hot-loader)
|
||||
- [Webpack + React Hot Loader](https://github.com/Browsersync/recipes/tree/master/recipes/webpack.react-hot-loader)
|
||||
- [Webpack + React Transform HMR](https://github.com/Browsersync/recipes/tree/master/recipes/webpack.react-transform-hmr)
|
||||
- [Webpack + TypeScript](https://github.com/Browsersync/recipes/tree/master/recipes/webpack.typescript)
|
||||
- [Webpack, TypeScript + React](https://github.com/Browsersync/recipes/tree/master/recipes/webpack.typescript.react)
|
||||
|
||||
... each one is a full, working example - just have a look at the `readme.md` in each one for installation
|
||||
instructions.
|
||||
|
||||
|
||||
### Contributions / Feedback
|
||||
|
||||
Spotted an error? Couldn't get one of the examples running? Have your own sweet setup that you want to show off to the world?
|
||||
We'd love to receive your feedback and contributions - so please get in touch! We aim to make this project the canonical source
|
||||
of example projects & code snippets related to running Browsersync.
|
||||
|
||||
### How to contribute an example
|
||||
|
||||
First thing you should do, is take a look at our [simplest example here](https://github.com/Browsersync/recipes/tree/master/recipes/server) -
|
||||
this will give you a great head-start on setting up your code.
|
||||
|
||||
Then, `fork` this repo and `clone` your fork down to your local machine. Now create a new folder inside `recipes`
|
||||
(note the naming structure). This is where you create your awesome example. You're free to do as you like,
|
||||
but there are a couple of rules you'll need to follow to ensure the project can build.
|
||||
|
||||
**Required Files**
|
||||
|
||||
- `package.json` (see below for requirements)
|
||||
- `app.js` (or any JS file showing the example)
|
||||
- `./app` directory. Always include the minimum HTML, JS & CSS needed to prove your example.
|
||||
|
||||
**Do NOT include**
|
||||
- `readme.md` (this is created dynamically for you)
|
||||
- any other files that are not related to your example.
|
||||
|
||||
|
||||
### package.json requirements
|
||||
|
||||
|
||||
**start command**: For consistency, ensure your example can be run with the command `npm start`. To
|
||||
do this, you just need to provide something along these lines:
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"start": "node app.js"
|
||||
},
|
||||
```
|
||||
|
||||
**main file**: We inline your main Javascript file into the `readme.md`, so
|
||||
don't miss this field.
|
||||
|
||||
```json
|
||||
"main": "app.js" // or gulpfile.js etc
|
||||
```
|
||||
|
||||
**description**: We use this as the Title. So make it short and descriptive, such as
|
||||
|
||||
```json
|
||||
"description": "Server example"
|
||||
```
|
||||
|
||||
### Finally, build.
|
||||
After you've added your example in the recipes folder, return to the root and run
|
||||
|
||||
```bash
|
||||
npm install && npm run build
|
||||
```
|
||||
|
||||
This will install [Crossbow.js](https://github.com/shakyShane/crossbow.js) and compile the project.
|
||||
Commit everything that has changed and push it up to your fork. Send a Pull Request when you're
|
||||
ready, or if you'd like us to have a look over your code before that, just ping us [twitter](https://twitter.com/browsersync) and we'll
|
||||
take a look!
|
||||
43
node_modules/bs-recipes/recipes/grunt.html.injection/Gruntfile.js
generated
vendored
Normal file
43
node_modules/bs-recipes/recipes/grunt.html.injection/Gruntfile.js
generated
vendored
Normal 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
8
node_modules/bs-recipes/recipes/grunt.html.injection/app/css/main.css
generated
vendored
Normal 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
16
node_modules/bs-recipes/recipes/grunt.html.injection/app/index.html
generated
vendored
Normal 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
2
node_modules/bs-recipes/recipes/grunt.html.injection/desc.md
generated
vendored
Normal 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
17
node_modules/bs-recipes/recipes/grunt.html.injection/package.json
generated
vendored
Normal 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
79
node_modules/bs-recipes/recipes/grunt.html.injection/readme.md
generated
vendored
Normal 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
62
node_modules/bs-recipes/recipes/grunt.sass.autoprefixer/Gruntfile.js
generated
vendored
Normal 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
44
node_modules/bs-recipes/recipes/grunt.sass.autoprefixer/app/css/main.css
generated
vendored
Normal 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
11
node_modules/bs-recipes/recipes/grunt.sass.autoprefixer/app/index.html
generated
vendored
Normal 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
25
node_modules/bs-recipes/recipes/grunt.sass.autoprefixer/app/scss/main.scss
generated
vendored
Normal 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
17
node_modules/bs-recipes/recipes/grunt.sass.autoprefixer/desc.md
generated
vendored
Normal 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
18
node_modules/bs-recipes/recipes/grunt.sass.autoprefixer/package.json
generated
vendored
Normal 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
114
node_modules/bs-recipes/recipes/grunt.sass.autoprefixer/readme.md
generated
vendored
Normal file
@ -0,0 +1,114 @@
|
||||
#Browsersync - Grunt, SASS & 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
38
node_modules/bs-recipes/recipes/grunt.sass/Gruntfile.js
generated
vendored
Normal 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
4
node_modules/bs-recipes/recipes/grunt.sass/app/css/main.css
generated
vendored
Normal 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
11
node_modules/bs-recipes/recipes/grunt.sass/app/index.html
generated
vendored
Normal 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
3
node_modules/bs-recipes/recipes/grunt.sass/app/scss/main.scss
generated
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
body {
|
||||
background: orange;
|
||||
}
|
||||
0
node_modules/bs-recipes/recipes/grunt.sass/desc.md
generated
vendored
Normal file
0
node_modules/bs-recipes/recipes/grunt.sass/desc.md
generated
vendored
Normal file
17
node_modules/bs-recipes/recipes/grunt.sass/package.json
generated
vendored
Normal file
17
node_modules/bs-recipes/recipes/grunt.sass/package.json
generated
vendored
Normal 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
72
node_modules/bs-recipes/recipes/grunt.sass/readme.md
generated
vendored
Normal file
@ -0,0 +1,72 @@
|
||||
#Browsersync - Grunt & 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
4
node_modules/bs-recipes/recipes/gulp.browserify/app/css/main.css
generated
vendored
Normal 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
15
node_modules/bs-recipes/recipes/gulp.browserify/app/index.html
generated
vendored
Normal 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
1
node_modules/bs-recipes/recipes/gulp.browserify/app/js/app.js
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
let app = 'awesome';
|
||||
1
node_modules/bs-recipes/recipes/gulp.browserify/app/js/dist/.npmignore
generated
vendored
Normal file
1
node_modules/bs-recipes/recipes/gulp.browserify/app/js/dist/.npmignore
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
*.js
|
||||
15
node_modules/bs-recipes/recipes/gulp.browserify/app/js/dist/bundle.js.map
generated
vendored
Normal file
15
node_modules/bs-recipes/recipes/gulp.browserify/app/js/dist/bundle.js.map
generated
vendored
Normal 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
3
node_modules/bs-recipes/recipes/gulp.browserify/desc.md
generated
vendored
Normal 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
54
node_modules/bs-recipes/recipes/gulp.browserify/gulpfile.js
generated
vendored
Normal 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
20
node_modules/bs-recipes/recipes/gulp.browserify/package.json
generated
vendored
Normal 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
91
node_modules/bs-recipes/recipes/gulp.browserify/readme.md
generated
vendored
Normal 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
3
node_modules/bs-recipes/recipes/gulp.pug/.npmignore
generated
vendored
Normal 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
10
node_modules/bs-recipes/recipes/gulp.pug/app/index.pug
generated
vendored
Normal 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
3
node_modules/bs-recipes/recipes/gulp.pug/app/scss/main.scss
generated
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
11
node_modules/bs-recipes/recipes/gulp.pug/desc.md
generated
vendored
Normal file
11
node_modules/bs-recipes/recipes/gulp.pug/desc.md
generated
vendored
Normal 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
49
node_modules/bs-recipes/recipes/gulp.pug/gulpfile.js
generated
vendored
Normal 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
17
node_modules/bs-recipes/recipes/gulp.pug/package.json
generated
vendored
Normal 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
94
node_modules/bs-recipes/recipes/gulp.pug/readme.md
generated
vendored
Normal 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
6
node_modules/bs-recipes/recipes/gulp.ruby.sass/app/css/main.css
generated
vendored
Normal 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
1
node_modules/bs-recipes/recipes/gulp.ruby.sass/app/css/main.css.map
generated
vendored
Normal 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
11
node_modules/bs-recipes/recipes/gulp.ruby.sass/app/index.html
generated
vendored
Normal 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
3
node_modules/bs-recipes/recipes/gulp.ruby.sass/app/scss/main.scss
generated
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
5
node_modules/bs-recipes/recipes/gulp.ruby.sass/desc.md
generated
vendored
Normal file
5
node_modules/bs-recipes/recipes/gulp.ruby.sass/desc.md
generated
vendored
Normal 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
54
node_modules/bs-recipes/recipes/gulp.ruby.sass/gulpfile.js
generated
vendored
Normal 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
19
node_modules/bs-recipes/recipes/gulp.ruby.sass/package.json
generated
vendored
Normal 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
93
node_modules/bs-recipes/recipes/gulp.ruby.sass/readme.md
generated
vendored
Normal file
@ -0,0 +1,93 @@
|
||||
#Browsersync - Gulp & 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
2
node_modules/bs-recipes/recipes/gulp.sass/app/css/main.css
generated
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
body {
|
||||
background: white; }
|
||||
11
node_modules/bs-recipes/recipes/gulp.sass/app/index.html
generated
vendored
Normal file
11
node_modules/bs-recipes/recipes/gulp.sass/app/index.html
generated
vendored
Normal 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
3
node_modules/bs-recipes/recipes/gulp.sass/app/scss/main.scss
generated
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
3
node_modules/bs-recipes/recipes/gulp.sass/desc.md
generated
vendored
Normal file
3
node_modules/bs-recipes/recipes/gulp.sass/desc.md
generated
vendored
Normal 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
31
node_modules/bs-recipes/recipes/gulp.sass/gulpfile.js
generated
vendored
Normal 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
16
node_modules/bs-recipes/recipes/gulp.sass/package.json
generated
vendored
Normal 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
70
node_modules/bs-recipes/recipes/gulp.sass/readme.md
generated
vendored
Normal file
@ -0,0 +1,70 @@
|
||||
#Browsersync - Gulp & 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
1
node_modules/bs-recipes/recipes/gulp.swig/.npmignore
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
dist/
|
||||
2
node_modules/bs-recipes/recipes/gulp.swig/app/css/main.css
generated
vendored
Normal file
2
node_modules/bs-recipes/recipes/gulp.swig/app/css/main.css
generated
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
body {
|
||||
background: white; }
|
||||
11
node_modules/bs-recipes/recipes/gulp.swig/app/index.html
generated
vendored
Normal file
11
node_modules/bs-recipes/recipes/gulp.swig/app/index.html
generated
vendored
Normal 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
3
node_modules/bs-recipes/recipes/gulp.swig/app/scss/main.scss
generated
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
3
node_modules/bs-recipes/recipes/gulp.swig/desc.md
generated
vendored
Normal file
3
node_modules/bs-recipes/recipes/gulp.swig/desc.md
generated
vendored
Normal 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
40
node_modules/bs-recipes/recipes/gulp.swig/gulpfile.js
generated
vendored
Normal 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
17
node_modules/bs-recipes/recipes/gulp.swig/package.json
generated
vendored
Normal 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
77
node_modules/bs-recipes/recipes/gulp.swig/readme.md
generated
vendored
Normal file
@ -0,0 +1,77 @@
|
||||
#Browsersync - Gulp & 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
2
node_modules/bs-recipes/recipes/gulp.task.sequence/app/css/main.css
generated
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
body {
|
||||
background: white; }
|
||||
11
node_modules/bs-recipes/recipes/gulp.task.sequence/app/index.html
generated
vendored
Normal file
11
node_modules/bs-recipes/recipes/gulp.task.sequence/app/index.html
generated
vendored
Normal 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
3
node_modules/bs-recipes/recipes/gulp.task.sequence/app/scss/main.scss
generated
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
5
node_modules/bs-recipes/recipes/gulp.task.sequence/desc.md
generated
vendored
Normal file
5
node_modules/bs-recipes/recipes/gulp.task.sequence/desc.md
generated
vendored
Normal 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
57
node_modules/bs-recipes/recipes/gulp.task.sequence/gulpfile.js
generated
vendored
Normal 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
17
node_modules/bs-recipes/recipes/gulp.task.sequence/package.json
generated
vendored
Normal 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
97
node_modules/bs-recipes/recipes/gulp.task.sequence/readme.md
generated
vendored
Normal 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
20
node_modules/bs-recipes/recipes/html.injection/app.js
generated
vendored
Normal 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
8
node_modules/bs-recipes/recipes/html.injection/app/css/main.css
generated
vendored
Normal 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
16
node_modules/bs-recipes/recipes/html.injection/app/index.html
generated
vendored
Normal 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
2
node_modules/bs-recipes/recipes/html.injection/desc.md
generated
vendored
Normal 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
14
node_modules/bs-recipes/recipes/html.injection/package.json
generated
vendored
Normal 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
56
node_modules/bs-recipes/recipes/html.injection/readme.md
generated
vendored
Normal 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
40
node_modules/bs-recipes/recipes/middleware.css.injection/app.js
generated
vendored
Normal 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
4
node_modules/bs-recipes/recipes/middleware.css.injection/app/css/main.less
generated
vendored
Normal 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
11
node_modules/bs-recipes/recipes/middleware.css.injection/app/index.html
generated
vendored
Normal 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
1
node_modules/bs-recipes/recipes/middleware.css.injection/desc.md
generated
vendored
Normal 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
14
node_modules/bs-recipes/recipes/middleware.css.injection/package.json
generated
vendored
Normal 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
75
node_modules/bs-recipes/recipes/middleware.css.injection/readme.md
generated
vendored
Normal 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
22
node_modules/bs-recipes/recipes/proxy.custom-css/app.js
generated
vendored
Normal 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
3
node_modules/bs-recipes/recipes/proxy.custom-css/app/static/_custom.css
generated
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
body {
|
||||
background: black;
|
||||
}
|
||||
2
node_modules/bs-recipes/recipes/proxy.custom-css/desc.md
generated
vendored
Normal file
2
node_modules/bs-recipes/recipes/proxy.custom-css/desc.md
generated
vendored
Normal 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
13
node_modules/bs-recipes/recipes/proxy.custom-css/package.json
generated
vendored
Normal 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
59
node_modules/bs-recipes/recipes/proxy.custom-css/readme.md
generated
vendored
Normal 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
19
node_modules/bs-recipes/recipes/server.gzipped.assets/app.js
generated
vendored
Normal 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
BIN
node_modules/bs-recipes/recipes/server.gzipped.assets/app/css/main.css.gz
generated
vendored
Normal file
Binary file not shown.
11
node_modules/bs-recipes/recipes/server.gzipped.assets/app/index.html
generated
vendored
Normal file
11
node_modules/bs-recipes/recipes/server.gzipped.assets/app/index.html
generated
vendored
Normal 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
3
node_modules/bs-recipes/recipes/server.gzipped.assets/desc.md
generated
vendored
Normal 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
14
node_modules/bs-recipes/recipes/server.gzipped.assets/package.json
generated
vendored
Normal 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
56
node_modules/bs-recipes/recipes/server.gzipped.assets/readme.md
generated
vendored
Normal 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
25
node_modules/bs-recipes/recipes/server.includes/app.js
generated
vendored
Normal 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
4
node_modules/bs-recipes/recipes/server.includes/app/css/main.css
generated
vendored
Normal 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
3
node_modules/bs-recipes/recipes/server.includes/app/footer.html
generated
vendored
Normal 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
3
node_modules/bs-recipes/recipes/server.includes/app/header.html
generated
vendored
Normal 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
13
node_modules/bs-recipes/recipes/server.includes/app/index.html
generated
vendored
Normal 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
0
node_modules/bs-recipes/recipes/server.includes/desc.md
generated
vendored
Normal file
13
node_modules/bs-recipes/recipes/server.includes/package.json
generated
vendored
Normal file
13
node_modules/bs-recipes/recipes/server.includes/package.json
generated
vendored
Normal 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"
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user