browsersync / recipes Goto Github PK
View Code? Open in Web Editor NEWFully working project examples showing how to use BrowserSync in various ways.
Fully working project examples showing how to use BrowserSync in various ways.
I've gotten BrowserSync working to the point where it tells me that it has injected CSS, but not to the point where it actually does. I tried the HTML/CSS injection example to get it working, but it seems like it and all the recipes involve script task runners, Sass, or both.
Is there any way to use BrowserSync just to watch a stylesheet with CLI? Or does using BrowserSync effectively also require a pretty thorough understanding of javascript task runners, CSS preprocessors, or both?
Hello! Is there any example of BrowserSync and PostCSS middleware?
In my JS:
document.write('hello world')
Now when I edit the HTML to inject it, hello world disappears.
bs-recipes (1.3.4) has a dependency to monkey-hot-loader. https://www.npmjs.com/package/monkey-hot-loader
monkey-hot-loader package and code is unlicensed code, which by default is copyrighted to the original author. You may not use these dependencies without first obtaining a license.
I am using webpack with the following config:
/**
* Require Browsersync along with webpack and middleware for it
*/
var browserSync = require('browser-sync');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
/**
* Require ./webpack.config.js and make a bundler from it
*/
var webpackConfig = require('./webpack.dev.config');
var bundler = webpack(webpackConfig);
console.log(webpackConfig.output.publicPath);
/**
* Run Browsersync and use middleware for Hot Module Replacement
*/
browserSync({
server: {
baseDir: 'app',
middleware: [
webpackDevMiddleware(bundler, {
// IMPORTANT: dev middleware can't access config, so we should
// provide publicPath by ourselves
publicPath: webpackConfig.output.publicPath,
// pretty colored output
stats: { colors: true }
// for other settings see
// http://webpack.github.io/docs/webpack-dev-middleware.html
}),
// bundler should be the same as above
webpackHotMiddleware(bundler)
]
},
// no need to watch '*.js' here, webpack will take care of it for us,
// including full page reloads if HMR won't work
files: [
'app/css/*.css',
'app/*.html'
]
});
webpack.dev.config.js
const path = require('path');
const webpack = require('webpack');
const phaserModule = path.join(__dirname, '/node_modules/phaser/');
const phaser = path.join(phaserModule, 'build/custom/phaser-split.js'),
pixi = path.join(phaserModule, 'build/custom/pixi.js'),
p2 = path.join(phaserModule, 'build/custom/p2.js');
module.exports = {
//context: path.join(__dirname, 'app/src'),
entry: {
app: path.resolve(__dirname, 'app/src/app.js'),
vendors: [
'phaser',
'webpack/hot/dev-server',
'webpack-hot-middleware/client',
]
},
output: {
publicPath: path.resolve(__dirname, 'app/build/'),
path: path.resolve(__dirname, 'app/build'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['env', 'es2015'],
cacheDirectory: true
}
}
],
test: [/\pixi.js/, /\p2.js/],
use: [
{
loader: 'script-loader'
}
]
}
]
},
resolve: {
alias: {
'phaser': phaser,
'pixi.js': pixi,
'p2': p2,
}
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors' // Specify the common bundle's name.
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
],
target: 'web'
}
When I do bundling with webpack
cli its ok, but it doesnt load my bundles after bundling from node devserver.js
I would like to start browser-sync via Gulp using the configuration specified in my bs-config.json file - this does not seem to work for me even though my bs-config.json is in the same directory as my gulpfile.js. My thought was that the .init() function might be able to accept a path to the bs-config.json file, but I cannot find a reference regarding if this is possible in the the BrowserSync documentation...
Is this possible? or is there a better way to accomplish what I'm trying to do?
Michaels-MBP-4:gulp.jade MichaelLeung$ npm start
[email protected] start /Users/MichaelLeung/bs-recipes/recipes/gulp.jade
gulp
/Users/MichaelLeung/bs-recipes/recipes/gulp.jade/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:22
throw new Error('libsass
bindings not found. Try reinstalling node-sass
?');
^
Error: libsass
bindings not found. Try reinstalling node-sass
?
at getBinding (/Users/MichaelLeung/bs-recipes/recipes/gulp.jade/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:22:11)
at Object. (/Users/MichaelLeung/bs-recipes/recipes/gulp.jade/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:188:23)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object. (/Users/MichaelLeung/bs-recipes/recipes/gulp.jade/node_modules/gulp-sass/index.js:3:17)
at Module._compile (module.js:435:26)
npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.2.4
npm ERR! npm v3.5.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: gulp
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'gulp'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the gulp.jade package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gulp
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs gulp.jade
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls gulp.jade
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/MichaelLeung/bs-recipes/recipes/gulp.jade/npm-debug.log
I followed the instructions like the ones here and got the following message above after running npm start.
The example for webpack.react-transform-webpack-hmr works perfectly. However I'm getting 404 errors when I try to use this with the proxy
option.
server.js
var webpack = require('webpack');
var config = require('./webpack.config');
var browserSync = require('browser-sync');
var compiler = webpack(config);
browserSync({
proxy: {
target: 'proxy-traget.dev',
middleware: [
require('webpack-dev-middleware')(compiler, {
noInfo: true, publicPath: config.output.publicPath
}),
require("webpack-hot-middleware")(compiler)
]
},
files: [
'css/style.css',
'**/*.php'
]
});
webpack config:
var webpack = require('webpack');
var path = require('path');
module.exports = {
devtool: 'eval-source-map',
entry: {
truckFilter: [
'webpack-hot-middleware/client?reload=true',
'./js/index.js'
]
},
output: {
path: path.join(__dirname, 'js/build'),
publicPath: "js/build",
filename: "bundle.js"
},
// Require the webpack and react-hot-loader plugins
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
__DEV__: true
}),
],
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
// Load the react-hot-loader
loaders: [ {
test: /\.jsx?$/,
loaders: ['babel'],
include: path.join(__dirname, 'js')
} ]
},
};
Everything loads fine except localhost:3000/__webpack_hmr
which 404s. Is the proxy setting sending that request to my proxy (php) server, or is it sending it to browser sync?
Doesn't even start. After: "npm run start" will quit with the error below.
> [email protected] start /Users/.../.../.../bs-recipes/recipes/grunt.sass.autoprefixer
> grunt
sh: grunt: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] start: `grunt`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/.../.npm/_logs/2017-11-24T13_04_08_593Z-debug.log
node version: v8.9.0
npm version: 5.5.1
0 info it worked if it ends with ok
1 verbose cli [ '/Users/.../.nvm/versions/node/v8.9.0/bin/node',
1 verbose cli '/Users/.../.nvm/versions/node/v8.9.0/bin/npm',
1 verbose cli 'run',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]prestart: [email protected]start: [email protected]
6 info lifecycle [email protected]
7 verbose lifecycle [email protected]start: unsafe-perm in lifecycle truestart: PATH: /Users/.../.nvm/versions/node/v8.9.0/lib/node_modules/npm/bin/node-gyp-bin:/Users/.../.../.../bs-recipes/recipes/grunt.sass.autoprefixer/node_modules/.bin:/Users/.../node_modules/.bin:/Users/.../.nvm/versions/node/v8.9.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
8 verbose lifecycle [email protected]
9 verbose lifecycle [email protected]start: CWD: /Users/.../.../.../bs-recipes/recipes/grunt.sass.autoprefixerstart: Args: [ '-c', 'grunt' ]
10 silly lifecycle [email protected]
11 info lifecycle [email protected]~start: Failed to exec start script
12 verbose stack Error: [email protected] start: grunt
12 verbose stack spawn ENOENT
12 verbose stack at ChildProcess. (/Users/.../.nvm/versions/node/v8.9.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack at emitTwo (events.js:126:13)
12 verbose stack at ChildProcess.emit (events.js:214:7)
12 verbose stack at maybeClose (internal/child_process.js:925:16)
12 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
13 verbose pkgid [email protected]
14 verbose cwd /Users/.../.../.../bs-recipes/recipes/grunt.sass.autoprefixer
15 verbose Darwin 17.2.0
16 verbose argv "/Users/.../.nvm/versions/node/v8.9.0/bin/node" "/Users/.../.nvm/versions/node/v8.9.0/bin/npm" "run" "start"
17 verbose node v8.9.0
18 verbose npm v5.5.1
19 error file sh
20 error code ELIFECYCLE
21 error errno ENOENT
22 error syscall spawn
23 error [email protected] start: grunt
23 error spawn ENOENT
24 error Failed at the [email protected] start script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]
The server Recipe uses the files
option instead of the the watch
options. Perhaps there is some reason for this, but I'm guessing that the Recipes do not reflect the current recommendations. For the sake of clarity and consistency It would be great if the Recipes could be updated with the best practices.
Thanks!
I am currently moving away from build tools such as Grunt and Gulp and moving more towards using npm run
directly. See http://substack.net/task_automation_with_npm_run & http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
My projects' development process often include the following:
./dist/*.html
, ./dist/assets/css/*.css
, ./dist/assets/js/*.js
files./src/assets/*.scss
./src/
and ./dist/
I have gotten it 'somewhat' working but I am pretty sure there are better ways to tie all this together with BS at the core..
Any ideas? If I figure this out I'd like to add it as a 'npm run
recipe'.
Example package.json
scripts
section:
"scripts": {
"server": "browser-sync start --files \"./dist/*.html,./dist/assets/js/*.js,./dist/assets/css/*.css\" --server dist",
"start": "npm run server",
"watch:css": "node-sass -w -r ./src/assets/css -o ./dist/assets/css --output-style compressed",
"watch:js": "sync-files -w ./src/assets/js ./dist/assets/js",
"watch:img": "sync-files -w ./src/assets/img ./dist/assets/img",
"watch:html": "sync-files -w -d 1 ./src ./dist",
"watch": "parallelshell \"npm run watch:css\" \"npm run watch:js\" \"npm run watch:html\" \"npm run watch:img\"",
"dev": "parallelshell \"npm run server\" \"npm run watch\""
},
Note The above simply copies HTML, JS and IMG files from ./src/
to ./dist/
and does not yet deal with browserify, autoprefixr etc...
Hello guys! First of all, browserSync is awesome, I've used a couple times in some projects that I've started with Yeoman's webapp. Congratulations in all your efforts in this tool, ok? :) thumbs up for you 👍!
Besides that, I'm used to mantain some websites that have been made in PHP, which doesn't have and never had a tool like BrowserSync with them. I'm actually making a project in PHP today and came here to see if there was any tips about configuring BrowserSync with a PHP project, but couldn't found much information about it, at least, the proxy option. Where I am now: I was able to configure my project with the proxy option and a virtual host, and until here, everything seems ok. So I was just wondering, maybe wouldn't it be interesting to put some information about this kind of project here in the recipes?
It'll be cool to hear about other programmers who may be using these technologies yet and already know about the wonderful world of BrowserSync, looking for to have the best of the two worlds.
If this discussion is not in the best spot, please, just let me know.
Regards, Gio.
i tried running the html.injection example and its throwing errors and not starting.
bash-5.0# yarn install
...
bash-5.0# yarn start
yarn run v1.21.1
$ node app.js
/app/browsersync/recipes/recipes/html.injection/node_modules/browser-sync/dist/plugins.js:151
throw e;
^
Error: Could not locate the bindings file. Tried:
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Debug/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Release/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Debug/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Debug/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Release/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Release/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/default/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/compiled/12.13.1/linux/x64/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/release/install-root/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/debug/install-root/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/default/install-root/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/lib/binding/node-v72-linux-x64/contextify.node
at bindings (/app/browsersync/recipes/recipes/html.injection/node_modules/bindings/bindings.js:126:9)
at Object.<anonymous> (/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/lib/contextify.js:1:34)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/app/browsersync/recipes/recipes/html.injection/node_modules/jsdom/lib/jsdom/browser/index.js:5:21)
at Module._compile (internal/modules/cjs/loader.js:959:30) {
tries: [
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Debug/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Release/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Debug/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Debug/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Release/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Release/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/default/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/compiled/12.13.1/linux/x64/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/release/install-root/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/debug/install-root/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/default/install-root/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/lib/binding/node-v72-linux-x64/contextify.node'
]
}
error Command failed with exit code 1.
From this https://github.com/BrowserSync/recipes/tree/master/recipes/server.includes instruction I successfully setup server includes but when I change template auto reload working but not update the template content.
The html.injection recipe failed after I edited index.html
(I added <h3>What's up?</h3>
after the <p>
).
$ node app.js
[BS] [HTML Injector] Running...
[BS] Access URLs:
---------------------------------------
Local: http://localhost:3000
External: http://192.168.10.101:3000
---------------------------------------
UI: http://localhost:3001
UI External: http://192.168.10.101:3001
---------------------------------------
[BS] Serving files from: app
[BS] Watching files...
/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/bs-html-injector/index.js:220
var valid = bs.io.of(bs.options.getIn(["socket", "namespace"])).sockets.map(function (client) {
^
TypeError: bs.io.of(...).sockets.map is not a function
at requestNew (/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/bs-html-injector/index.js:220:81)
at EventEmitter.fileChangedEvent (/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/bs-html-injector/index.js:190:9)
at emitOne (events.js:82:20)
at EventEmitter.emit (events.js:169:7)
at AnonymousObserver._onNext (/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/browser-sync/lib/file-watcher.js:19:17)
at AnonymousObserver.Rx.AnonymousObserver.AnonymousObserver.next (/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/rx/dist/rx.js:1828:12)
at AnonymousObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/rx/dist/rx.js:1762:31)
at Subject.Rx.Subject.addProperties.onNext (/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/rx/dist/rx.js:5998:19)
at FSWatcher.fn (/Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/browser-sync/lib/file-watcher.js:37:21)
at emitTwo (events.js:87:13)
i tried running the html.injection example and its throwing errors and not starting.
bash-5.0# yarn install
...
bash-5.0# yarn start
yarn run v1.21.1
$ node app.js
/app/browsersync/recipes/recipes/html.injection/node_modules/browser-sync/dist/plugins.js:151
throw e;
^
Error: Could not locate the bindings file. Tried:
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Debug/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Release/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Debug/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Debug/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Release/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Release/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/default/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/compiled/12.13.1/linux/x64/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/release/install-root/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/debug/install-root/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/default/install-root/contextify.node
→ /app/browsersync/recipes/recipes/html.injection/node_modules/contextify/lib/binding/node-v72-linux-x64/contextify.node
at bindings (/app/browsersync/recipes/recipes/html.injection/node_modules/bindings/bindings.js:126:9)
at Object.<anonymous> (/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/lib/contextify.js:1:34)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/app/browsersync/recipes/recipes/html.injection/node_modules/jsdom/lib/jsdom/browser/index.js:5:21)
at Module._compile (internal/modules/cjs/loader.js:959:30) {
tries: [
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Debug/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/Release/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Debug/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Debug/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/out/Release/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/Release/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/build/default/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/compiled/12.13.1/linux/x64/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/release/install-root/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/debug/install-root/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/addon-build/default/install-root/contextify.node',
'/app/browsersync/recipes/recipes/html.injection/node_modules/contextify/lib/binding/node-v72-linux-x64/contextify.node'
]
}
error Command failed with exit code 1.
Hi Guys, after upgrading my Mac to Sierra BrowserSync still works but the stream functionality has stop working.
Ive simplify my set just to make sure it isn't that.
var browserSync = require("browser-sync").create(),
reload = browserSync.reload;
gulp.task('watch', function () {
browserSync.init({
proxy: 'mywebsite.local'
});
gulp.watch(['./sass/style.scss'], ['scss']);
);
gulp.task('scss', function () {
return gulp.src('./sass/style.scss')
// lots of piping and stuff
.pipe(gulp.dest('./../public/css')).pipe(reload({stream: true}));
});
Just fyi, when I ran Crossbow, it generated the following path in the readme.md:
Note the ""
$ cd bs-recipes/recipes\webpack.typescript
Hi all,
Recipe gulp.browserify currently supports only one input file (./app/js/app.js
).
Any ideas how to extend the recipe to support multiple files or glob?
I tried the following code:
var glob = require('glob');
watchify.args.debug = true;
var b = browserify(watchify.args);
glob('./app/js/{app,worker}.js', {}, function(err, files) {
files.forEach(function(file) {
b.add(file);
});
});
var bundler = watchify(b);
The problem is that only one file is generated (bundle.js
).
So I changed source('bundle.js')
to source()
.
Now it throws new Error('No path specified! Can not get relative.'
I have a gzip server response that is send to clients by apache,
but not by browserSync proxy in development (its json encoded gzip content).
This is what i have now:
var browserSync = require('browser-sync');
browserSync({
notify: false,
logPrefix: packageJson.name,
proxy: 'localhost', //Apache
startPath: packageJson.appPath+'app',
files: ["api/app/**/*.php"],
middleware: require("connect-gzip")
});
And before i have tryed the recipe for static content.
https://github.com/BrowserSync/recipes/tree/master/recipes/server.gzipped.assets
Can you confirm me the right way to handle that with browserSync?
Any experiences?
See this
http://stackoverflow.com/questions/30213060/gulp-configuration-not-working
Api has changed this demo doesn't run.
When I change *.pug file first time it works fine. But when I change the file next time it doesn't reload the browser. But *.pug files compile.
Hello,
First of all, these were super helpful, so thanks for putting together! For my personal project however, I had to use some later versions of dependencies (react, babel, etc) which had some breaking changes.
Is there interest in updating the recipes to work with newer versions of deps? If so, I could make a pull request with bare minimum changes for bumping versions.
Hi,
I start using BrowserSync in actual version (2.26.7) and found that is some SyncOptions doesn't work:
Both "scroll", "forms:ALL" is fine on Edge (44.17763.1.0).
A I have updated version of Node.js (10.16.1), NPM (6.9.0), but problem appeared also on older version (I don't remember version number). It runs on Windows 10.
I've tested also simple clear HTML document with Lorem Ipsum text and simple form, without styles or any scripts.
Any solution for this?
Thank you in advance!
Martin
I can't seem to get the server.gzipped.assets Recipe to pick up my .html.gz
files. Gulp task looks like this:
gulp.task('serve', function () {
browserSync({
server: "./_site",
files: ['./_site/public/css/*.css', './_site/public/js/*.js', './_site/*.html', './_site/**/*.html'],
middleware: require("connect-gzip-static")("./_site")
});
});
Any help is appreciated. Thanks in advance!
Version:
Problem - When I run gulp, this message appears:
[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)
gulpfile.js
`gulp.task('serve', function() {
browserSync.init({
open: 'external',
proxy: 'site1.net',
watchTask: true,
port: 8080,
browser: "chrome"
});
});`
I have to manually input the URLs into the browser & it works with my current connections, but the message is still there. So how do I solve this issue? Any help would be highly appreciated, thanks
Screenshots:
History:
I had no issues with my Browsersync before & my gulp runs automatically until now. I think I had Windows 10 64bit update today and this issue came out. All seems normal, except the Browsersync Issue.
I tried these links, but nothing seemed to work:
tried1
tried2
Hello,
I'm testing webpack.react-transform-hmr and I noticed that it doesn't generate bundle.js in any directory. How can I achieve this?
The recipe still has a devDependency
on bs-html-injector
2.x, which fails with an error when installing with Node 7. The issue was resolved in bs-html-injector
3.x, so the recipe should update.
> [email protected] install /Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/contextify > node-gyp rebuildxcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
CXX(target) Release/obj.target/contextify/src/contextify.o
../src/contextify.cc:131:56: warning: 'NewInstance' is deprecated [-Wdeprecated-declarations]
Local wrapper = Nan::New(constructor)->NewInstance();
^
/Users/tony/.node-gyp/7.4.0/include/node/v8.h:3292:52: note: 'NewInstance' has been explicitly
marked deprecated here
V8_DEPRECATED("Use maybe version", Local NewInstance() const);
^
../src/contextify.cc:150:16: error: no member named 'SetAccessCheckCallbacks' in
'v8::ObjectTemplate'
otmpl->SetAccessCheckCallbacks(GlobalPropertyNamedAccessCheck,
~~~~~ ^
../src/contextify.cc:182:51: warning: 'GetRealNamedProperty' is deprecated
[-Wdeprecated-declarations]
Local rv = Nan::New(ctx->sandbox)->GetRealNamedProperty(property);
^
/Users/tony/.node-gyp/7.4.0/include/node/v8.h:2949:30: note: 'GetRealNamedProperty' has been
explicitly marked deprecated here
Local GetRealNamedProperty(Local key));
^
../src/contextify.cc:209:38: warning: 'GetRealNamedProperty' is deprecated
[-Wdeprecated-declarations]
if (!Nan::New(ctx->sandbox)->GetRealNamedProperty(property).IsEmpty() ||
^
/Users/tony/.node-gyp/7.4.0/include/node/v8.h:2949:30: note: 'GetRealNamedProperty' has been
explicitly marked deprecated here
Local GetRealNamedProperty(Local key));
^
../src/contextify.cc:210:42: warning: 'GetRealNamedProperty' is deprecated
[-Wdeprecated-declarations]
!Nan::New(ctx->proxyGlobal)->GetRealNamedProperty(property).IsEmpty()) {
^
/Users/tony/.node-gyp/7.4.0/include/node/v8.h:2949:30: note: 'GetRealNamedProperty' has been
explicitly marked deprecated here
Local GetRealNamedProperty(Local key));
^
4 warnings and 1 error generated.
make: *** [Release/obj.target/contextify/src/contextify.o] Error 1
gyp ERR! build error
gyp ERR! stack Error:make
failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:276:23)
gyp ERR! stack at emitTwo (events.js:106:13)
gyp ERR! stack at ChildProcess.emit (events.js:191:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)
gyp ERR! System Darwin 16.3.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/node_modules/contextify
gyp ERR! node -v v7.4.0
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok
[email protected] /Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection
└── (empty)npm WARN [email protected] No repository field.
npm ERR! Darwin 16.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "i"
npm ERR! node v7.4.0
npm ERR! npm v4.0.5
npm ERR! code ELIFECYCLEnpm ERR! [email protected] install:
node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node-gyp rebuild'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the contextify package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-gyp rebuild
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs contextify
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls contextify
npm ERR! There is likely additional logging output above.npm ERR! Please include the following file with any support request:
npm ERR! /Users/tony/src/tmp/browser-sync-recipes/recipes/html.injection/npm-debug.log
Do anybody have worked in BrowserSync?? I would like to know whether BrowserSync supports for Multiple mobile devices ??
Thanks in advance
Regards,
Kirthi
sandbox.home:8888
is a MAMP host on the local machineAm I not telling browsersync something by any chance? Or have I told it something incorrect?
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var sassSources = ['sass/**/*.scss'];
gulp.task('sass', function () {
return gulp.src(sassSources)
.pipe(sass({
includePaths: ['bower_components/compass-mixins/lib']}
))
.pipe(gulp.dest('./css'))
.pipe(reload({stream: true}))
})
gulp.task('watch-server', ['sass'], function() {
browserSync.init( {
// browsersync with a MAMP php server
// Note: BS still serves on port 3000
proxy: "sandbox.home:8888",
reloadOnRestart: true
});
gulp.watch(sassSources, ['sass']);
});
gulp.task('default', ['watch-server']);
When changing CSS files, they're changed without reloading the page. Would it be possible to do the same for JavaScript files (and leave it to the user to figure out how to implement it in their code)?
Following wiki steps:
There is no start script on package.json.
https://github.com/BrowserSync/recipes/blob/master/package.json#L13
To demo, show that I can signup/login via facebook to create a JWT that allows me to actually create the Request.
I have tried to run the html.injector example for a while now.. in the meantime, both npm and node has upgraded to new versions (in case that was the problem the first time), but even now, i get this long error that i got last time.
[BS] Serving files from: app
[BS] Watching files...
/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/bs-html-injector/index.js:220
var valid = bs.io.of(bs.options.getIn(["socket", "namespace"])).sockets.map(function (client) {
^
TypeError: bs.io.of(...).sockets.map is not a function
at requestNew (/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/bs-html-injector/index.js:220:81)
at EventEmitter.fileChangedEvent (/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/bs-html-injector/index.js:190:9)
at emitOne (events.js:101:20)
at EventEmitter.emit (events.js:188:7)
at AnonymousObserver._onNext (/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/browser-sync/lib/file-watcher.js:19:17)
at AnonymousObserver.Rx.AnonymousObserver.AnonymousObserver.next (/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/rx/dist/rx.all.js:1828:12)
at AnonymousObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/rx/dist/rx.all.js:1762:31)
at Subject.onNext (/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/rx/dist/rx.all.js:11944:19)
at FSWatcher.fn (/Users/sivilll/code/pt/bs-recipes/recipes/html.injection/node_modules/browser-sync/lib/file-watcher.js:37:21)
at emitTwo (events.js:106:13)
npm ERR! Darwin 15.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.5.0
npm ERR! npm v3.10.7
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node app.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node app.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the bs-recipes-html-injection package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node app.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs bs-recipes-html-injection
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls bs-recipes-html-injection
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/sivilll/code/pt/bs-recipes/recipes/html.injection/npm-debug.log
Anyone know what this means? The terminal runs correctly when i enter "npm start" but on the very first change, this error occurs.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.