No browser-sync-client.js is loaded and browser-sync with gulp isn't reloading nor injecting any changes and BrowserSync UI isn't showing any current connections #1617
Comments
|
Does your page contain a <body> tag?
…On Tue, 9 Oct 2018 at 12:06, Ralf Koller ***@***.***> wrote:
Issue details
I've set up a package.json file and a gulp.js file, like shown below, in
a project folder. When I start Gulp (
https://gist.github.com/rpkoller/07e13364a71f7d2560e19692a84f07e6) the
site is opening in a new browser window. The tasks are also applied
properly so css and js files are generated. Problem is as shown in the gist
even that the Browsersync tasks states Reloading Browser... no browser
window is reloaded nor are any changes injected into the CSS for the
Compass task. If I take a look into the BrowserSync UI there aren't any
current connections listed.
[image: bildschirmfoto 2018-10-09 um 12 00 28]
<https://user-images.githubusercontent.com/1665422/46662180-06e82480-cbbb-11e8-9a9c-421f687aea0e.png>
even that the page was opened via localhost:3000 in a Chrome as well as a
Safari window. And if i search in the DOM for browser-sync-client.js there
isn't any loading listed.
Steps to reproduce/test case
*Please provide necessary steps for reproduction of this issue, or better
the reduced test case (without any external dependencies)*.
Please specify which version of Browsersync, node and npm you're running
- Browsersync [ 2.26.0 ]
- Node [ 10.11.0 ]
- Npm [ 6.4.1 ]
Affected platforms
- linux
- windows
- OS X
- freebsd
- solaris
- other *(please specify which)*
Browsersync use-case
- API
- Gulp
- Grunt
- CLI
If CLI, please paste the entire command below
{cli command here}
for all other use-cases, (gulp, grunt etc), please show us exactly how
you're using Browsersync
the loaded dependencies in the package.json of the project:
├── ***@***.***
├── ***@***.***
├── ***@***.***
├── ***@***.***
├── ***@***.***
├── ***@***.***
├── ***@***.***
└── ***@***.***
the used gulp.js file:
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
var browserSync = require('browser-sync').create();
var devDomain = "http://mysite.test";
var themePath = "./wp-content/themes/mysite/";
var cssPath = "./wp-content/themes/mysite/css/";
var scssPath = "./wp-content/themes/mysite/scss/";
var jsPath = "./wp-content/themes/mysite/js/";
var jsPathRaw = "./wp-content/themes/mysite/js/raw/";
var mainMin = "main.min.js";
var overtureMin = "overture.min.js";
gulp.task('compass', function(){
return gulp.src( scssPath + '*.scss' )
.pipe(plugins.plumber())
.pipe(plugins.compass({
config_file: './config.rb',
css: cssPath,
sass: scssPath
}))
.pipe(plugins.autoprefixer('last 2 versions'))
.pipe(gulp.dest(cssPath))
.pipe(browserSync.stream({match: '**/*.css'}));
});
gulp.task('js-overture', function() {
return gulp.src([
jsPathRaw + 'vendor/matchmedia.js',
jsPathRaw + 'vendor/picturefill.js',
jsPathRaw + 'overture.js'
])
.pipe(plugins.concat(overtureMin))
.pipe(plugins.uglify())
.pipe(gulp.dest(jsPath))
.pipe(browserSync.stream());
});
gulp.task('js-main', function() {
return gulp.src([
jsPathRaw + 'vendor/jquery.js',
jsPathRaw + 'vendor/enquire.js',
jsPathRaw + 'vendor/jquery.smooth-scroll.js',
jsPathRaw + 'main.js'
])
.pipe(plugins.concat(mainMin))
.pipe(plugins.uglify())
.pipe(gulp.dest(jsPath))
.pipe(browserSync.stream());
});
gulp.task('js-watch', ['js-overture','js-main'], function (done) {
browserSync.reload();
done();
});
gulp.task('watch', function () {
browserSync.init({
logLevel: "debug",
browser: "google chrome",
open: 'external',
proxy: devDomain,
injectChanges: true
});
gulp.watch([scssPath + '**/*.scss'], ['compass']);
gulp.watch([jsPathRaw + '*.js'], ['js-watch']);
});
gulp.task('default', ['watch']);
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#1617>, or mute the
thread
<https://github.com/notifications/unsubscribe-auth/ABkUAqQWwy5Mh_VppCMWfCi0EKBoAHGIks5ujHU8gaJpZM4XSqQK>
.
|
|
yes it contains a And on a side note. I've tried the same with |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Issue details
I've set up a
package.jsonfile and agulp.jsfile, like shown below, in a project folder. When I start Gulp (https://gist.github.com/rpkoller/07e13364a71f7d2560e19692a84f07e6) the site is opening in a new browser window. The tasks are also applied properly so css and js files are generated. Problem is as shown in the gist even that the Browsersync tasks statesReloading Browser...no browser window is reloaded nor are any changes injected into the CSS for the Compass task. If I take a look into the BrowserSync UI there aren't any current connections listed.even that the page was opened via
localhost:3000in a Chrome as well as a Safari window. And if i search in the DOM for browser-sync-client.js there isn't any loading listed.Steps to reproduce/test case
Please provide necessary steps for reproduction of this issue, or better the
reduced test case (without any external dependencies).
Please specify which version of Browsersync, node and npm you're running
Affected platforms
Browsersync use-case
If CLI, please paste the entire command below
{cli command here}
for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync
the loaded dependencies in the
package.jsonof the project:the used
gulp.jsfile:The text was updated successfully, but these errors were encountered: