I have problem with BrowserSync on my XAMPP apache.
It is my gulpfile.js (I removed unnecessary code - is only necessary to solve the problem):
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('watch', function() {
browserSync({
startPath: '/test',
proxy: 'localhost:80'
});
});
gulp.task('default', ['watch']);
When I run the correct path to the directory of my project I have no connections. In the code of page is not JS file from BrowserSync:
project page
When I given the wrong path on in code of page 404 is JS from BrowserSync:
error 404 page
I used latest version Gulp, BrowserSync & XAMPP.
Please help me!
You are missing a couple of things:
var browserSync = require('browser-sync').create();
and in your task:
browserSync.init ({
Try those and see if that helps.
Related
I am trying to set up very simple gulp file. I am using sass and browser sync there and I move everything to the build folder. But for unknown reason the browser does not sync.
I tried solutions from many resources but nothing seem to work so far. Maybe some of you would have any idea how to fix that.
var gulp = require('gulp');
var sass = require('gulp-sass');
var bs = require('browser-sync').create();
var reload = bs.reload;
gulp.task('styles', function() {
gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('build/css'))
.pipe(bs.reload({stream:true}));
});
gulp.task('serve', ['styles'], function() {
bs.init({
server: "./build"
});
gulp.watch('./sass/*.scss', ['styles']);
gulp.watch('build/css/*.css').on('change', reload);
gulp.watch("*.html").on('change', reload);
});
gulp.task('default', ['serve']);
My folder structure is:
- build
- css
- index.html
- sass
- index.html
And the command prompt shows this after running gulp:
Thank you so much for any help!
Browsersync works by injecting an asynchronous script tag (<script async>...</script>) right after the <body> tag during initial request. In order for this to work properly the <body> tag must be present.
check this out: https://browsersync.io/docs/#requirements
My goal is to run gulp LiveReload with PhpStorm (LiveEdit is not good for me since I use complex framework)
I have created this gulpfile.js
var gulp = require('gulp'),
livereload = require('gulp-livereload');
gulp.task('watch', function() {
livereload.listen();
gulp.watch('*', function() {
livereload();
console.log('changed !')
});
});
I run it in PhpStorm
[02:20:02] Starting 'watch'...
I've installed the LiveReload Chrome plugin and connected it: (it says connected)
Any time I make a change on a file, I got a 'changed' message in PhpStorm's terminal. But browser is not refreshed automatically.
Using gulp and the new Microsoft bash shell, I am trying to set up a gulp watch to compile my scss into css, in a way that the watch doesn't stop when there is an error compiling it.
I've set up a gulp task called sass to do this, and I can run it fine from the command line with gulp sass, but when I try to run my gulp watch command with gulp watch I get an EPERM error which I've been unable to fix in a way to get my gulp.watch working. Here is the error messages output to the command line, below.
I've tried changing permissions on my node_modules folder, as well using sudo to do, but I still get this error. Help would be greatly appreciated.
var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
gulp.task('watch', ['sass'], function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
})
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(customPlumber('Error Running Sass'))
.pipe(sass())
.pipe(gulp.dest('app/css'))
})
function customPlumber(errTitle){
return plumber({
//use notify plugin to report error as windows toaster message
errorHandler:notify.onError({
//Customizing error title
title:errTitle || "Error running Gulp",
message: "Error: <%= error.message %>",
})
});
}
WSL doesn't support FS notify syscalls in Slow/Preview/Production rings. In the Fast ring, it supports tracking changes made inside WSL. Devs promise support for tracking changes made in Windows will be added soon enough.
Related links:
GitHub issue
UserVoice ticket
I've got liveReload working fine with scss and js, but not with html. here are my tasks...
var gulp = require('gulp'),
liveReload = require('gulp-livereload');
gulp.task('watchFiles', function () {
liveReload.listen();
gulp.watch('src/**/*.scss', ['compileSass']);
gulp.watch('src/**/*.html', ['watchHtmlFiles']);
gulp.watch('src/**/*.js', ['bundle-app']);
});
I needed to use run-sequence to assure my templates were built before bundling..and replaceIndex is a simple pipe for index.html over from 'src' to 'dist'
var gulp = require('gulp'),
runSequence = require('run-sequence'),
liveReload = require('gulp-livereload');
gulp.task('watchHtmlFiles', function (callback) {
runSequence('templates', 'bundle-app', 'replaceIndex', callback);
});
I get an error if I include ".pipe(liveReload())" as part of the callback...so I added it to the bundle-app and replaceIndex tasks. But this doesn't work....
this is now working, with no additional changes! The only thing I can attribute this sudden shift is that I was running another angular project with karma running. When that was shut down, live Reload for html files works fine....
When I change some scss file everything seems to work (scss is compiled to css file and the source files are watched):
[21:19:46] Starting 'sass'...
[BS] 1 file changed (principal.css)
[21:19:46] Finished 'sass' after 18 ms
But I need to reload the browser by hand to reflect the changes. This is my gulpfile:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('default', ['sass'], function() {
browserSync.init({
proxy: "huertajalon/"
});
gulp.watch("./sass/**/*.scss", ['sass']);
gulp.watch("./*.php").on('change', browserSync.reload);
gulp.watch("./style.css").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("sass/principal.scss")
.pipe(sass())
.pipe(gulp.dest("./css"))
.pipe(browserSync.stream());
});
In other cases (for example, when I modify and save style.css) the browser reloads well.
What am I doing wrong? Thanks!
Are you using browser-sync version 2.6.0 or higher, since this is required to use browserSync.stream().
http://www.browsersync.io/docs/api/#api-stream
If not then you should update or you could try browserSync.reload({stream: true}) instead, which was the previous way to handle streams with browser-sync. If I remember correctly.
Try something like this.
gulp.task(default, ['sass'], browserSync.reload);
Also refer to http://www.browsersync.io/docs/gulp/#gulp-reload