When using a proxy for BrowserSync it takes about 5-6s for requests to complete.
Gulp:
gulp.task('watch', function() {
if (argv.serve) {
browserSync.init({
proxy: {
target: argv.serve,
}
});
}
gulp.watch(paths.themes.sass, ['sass']);
});
I have tried the suggestion on this question: BrowserSync extremely slow but all my hosts are already setup as .dev.
I am running this locally. I have an hosts entry in /etc/hosts. Running OSX 10.10.3.
I think there was an issue with my DNS.
The following gets around the issue:
gulp.task('watch', function() {
if (argv.serve) {
browserSync.init({
proxy: {
target: "192.168.10.10",
reqHeaders: function (config) {
return {
"host": argv.serve,
}
},
}
});
}
gulp.watch(paths.themes.sass, ['sass']);
});
Skipping the need to resolve host.
Related
I am learning the front-end build system currently gulp, i want to use brower-sync and the problem is it is not throwing an error in the commad line but instead when it brings up the browser it will not display my html file and it will say "Cannot GET /" error in the browser window. This is my gulpfile.js code
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
compass= require('gulp-compass'),
plumber = require('gulp-plumber'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
rename = require('gulp-rename');
gulp.task('scripts', function() {
gulp.src(['public/src/js/**/*.js', '!public/src/js/**/*.min.js'])
.pipe(plumber())
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('public/src/js/'));
});
gulp.task('styles', function() {
gulp.src('public/src/scss/main.scss')
.pipe(plumber())
.pipe(compass({
config_file: './config.rb',
css: './public/src/css/',
sass: './public/src/scss/'
}))
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest('public/src/css/'))
.pipe(reload({stream:true}));
});
gulp.task('html', function() {
gulp.src('public/**/*.html');
});
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./public/"
}
});
});
gulp.task('watch', function() {
gulp.watch('public/src/js/**/*.js', ['scripts']);
gulp.watch('public/src/scss/**/*.scss', ['styles']);
gulp.watch('public/**/*.html', ['html']);
});
gulp.task('default', ['scripts', 'styles', 'html', 'browser-sync', 'watch']);
i am using windows and git bash and version is "browser-sync": "^2.12.5" so what is the problem and try to explain for me in order to get something out of it.
Is there an index.html file in your ./public/ folder? If not, you need to tell browserSync what is your start page. You can also get browserSync to show the listing of the base directory, see update below.
You could also try to use public without the leading dot.
Edit: The startPath config directive does not seem to work, use index instead
...
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "public/",
index: "my-start-page.html"
}
});
});
...
Update: Actually you can get directory listing with browserSync. That way it would show a list of files in public, not the Cannot Get error
...
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "public/",
directory: true
}
});
});
...
I got this to work when the index.html file was inside the same folder:
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
},
port: 8080,
open: true,
notify: false
});
});
gulp.task('serve',['sass'], function() {
bs.init({
server: "./app",
startPath: "/index.html", // After it browser running
browser: 'chrome',
host: 'localhost',
port: 4000,
open: true,
tunnel: true
});
I solved my "Cannot GET" errors in browser-sync by always pointing to a .html file in code, or by having a folder structure ending with and index.html
About <!-- Cannot GET error-->
About <!-- same code as above, but works if your site structure is: ./about/index.html-->
About <!-- OK -->
My Gulp file for reference (using browser-sync with jekyll, so everything is in the ./_site folder, and the gulpfile is in ./)
var gulp = require('gulp');
var shell = require('gulp-shell');
var browserSync = require('browser-sync').create();
gulp.task('build', shell.task(['jekyll build --watch']));
// serving blog with Browsersync
gulp.task('serve', function () {
browserSync.init(
{
server: {baseDir: '_site/'}
}
);
// Reloads page when some of the already built files changed:
gulp.watch('_site/**/*.*').on('change', browserSync.reload);
});
gulp.task('default', ['build', 'serve']);
Hope it helps.
Michelangelo
May be you have not index.html in baseDir: '_site/'? In order to see your static web-page in the web-browser instead of that annoying message you have to rename a file your_file.html to index.html. This will solve Cannot GET/ problem.
In my case, this helped me:
server: {
baseDir: '.',
index: "index.html"
}
gulp.task('server', function()
{
browserSync.init(["public/src/css/","public/src/js"],{
server: "./",
startPath: "./index.html", // After it browser running
// browser: 'chrome',
host: 'localhost',
// port: 4000,
open: true,
tunnel: true });
});
gulp.task('default', ['scripts', 'styles', 'html', 'server', 'watch']);
In my build process I want to put the artifacts of the build steps into .tmp/serve directory.
I managed to set up gulp-watch to fire specific tasks when I modify files in my working directory. E.q. when I modify htmls, they are built and the artifacts are pasted into desired .tmp/serve directory
I'm having problems with reloading the files from .tmp/serve with browser-sync. When I save changes in my working directory multiple times, browser-sync refreshes only the previous changes (1 change delay). I guess the reload function fires before gulp-dest finishes. Note that if I refresh browser manually the current changes appear.
Am I doing something wrong?
Build htmls task
gulp.task('html', ['styles'], () => {
return gulp.src('app/*.html')
.pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
.pipe(gulp.dest('.tmp/serve'))
;
});
Sever task
const reload = browserSync.reload;
gulp.task('serve', ['styles', 'fonts', 'build:scripts', 'html', 'images'], () => {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp/serve'],
routes: {
'/bower_components': 'bower_components'
}
}
});
/*********** SEE THE LINES BELOW **************/
gulp.watch([
'.tmp/serve/**/*',
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('app/*.html', ['html']);
gulp.watch('app/scripts/**/*', ['build:scripts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});
You can use run-sequence to reload after a build.
Your gulpfile would become like this..
var gulp = require('gulp'),
runSeq = require('run-sequence')
...
;
gulp.task('build', ['styles', 'fonts', 'build:scripts', 'html', 'images']);
gulp.task('serve', ['build', 'watch'], () => {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp/serve'],
routes: {
'/bower_components': 'bower_components'
}
}
});
gulp.task('reload', function (callback) {
browserSync.reload();
callback();
});
gulp.task('watch', ['watch-styles', ...]);
gulp.task('watch-styles', function () {
gulp.watch('app/styles/**/*.scss', function () {
runSeq('styles', 'reload');
});
});
/* And so on for every watch task */
Note that run-sequence needs your tasks to either return a stream or to call a callback, otherwise it will cause gulp to pause indefinitely. Read the Doc to learn more.
I'd like to start my NodeJS application using BrowserSync but it seems not working.
Error message : Error: listen EADDRINUSE
Edit #1:
I found this way to resolve my issue.
gulp.task('sync', ['start', 'watch'], function(cb) {
browserSync.init({
files: ['**/*'],
proxy: 'http://localhost:3000',
port: 4000
});
});
gulp.task('start', function() {
var called = false;
return nodemon({
script: './bin/www',
watch: ['Application.js']
}).on('start', function onStart() {
if (!called) {
cb();
}
called = true;
}).on('restart', function onRestart() {
setTimeout(function reload() {
browserSync.reload({
stream: false
});
}, 500);
});
});
EADDRINUSE means that the port number which listen() tries to bind the server to is already in use. So, in your case, there must be running a server on port 80 already. If you have another webserver running on this port you will get the EADDRINUSE error.
var gulp = require('gulp');
var browserSync = require('browser-sync');
var nodemon = require('gulp-nodemon');
gulp.task('default', ['browser-sync'], function () {
});
gulp.task('browser-sync', ['nodemon'], function() {
browserSync.init(null, {
proxy: "http://localhost:5000",
files: ["**/*.*"],
browser: "google chrome",
port: 7000,
});
});
gulp.task('nodemon', function (cb) {
nodemon({
script: './bin/www/app.js'
})
.on('start', function () {
cb();
})
.on('error', function(err) {
// Make sure failure causes gulp to exit
throw err;
});
});
Hope it helps :)
I'm currently using gulp webserver with following config.
gulp.task('webserver', ['nodejs'], function () {
return gulp.src(config.client)
.pipe(webserver({
livereload: true,
port: 8001,
proxies: [
{
source: '/api',
target: 'http://localhost:3007/api'
}
],
directoryListing: false,
open: true
}));
});
So, it serves the static files and proxies request starting with /api to a nodeJs app on another port.
I want to do now the same with Browser-sync (instead of using livereload, so I want to get rid of gulp webserver), but don't find how I can configure this.
Thanks for giving some guidance.
Ok,I found a potential solution (please comment if you have improvements)
var browserSync = require('browser-sync');
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({});
gulp.task('bs', ['nodejs'], function () {
browserSync({
server: {
baseDir: "./client"
},
middleware: function (req, res, next) {
var url = req.url;
if (url.substring(0,5)==="/api/") {
proxy.web(req, res, { target: 'http://localhost:3007' });
} else {
next();
}
}
});
});
I'm looking to transition over from grunt to gulp. However I'm not finding a way to serve PHP files with livereload support, such as gateway (https://www.npmjs.org/package/gateway) using mounts. Are ther any plugins out there for running/server PHP using a gulp task?
I asked totally the same question few weeks ago. I want to start a native PHP server under Gulp, because I like the syntax better than Grunt. I also want to use PHP just to include other HTML files. :) It turns out there is a 'gulp-connect-php' plugn which has a very similar syntax to 'grunt-php' plugin.
https://www.npmjs.com/package/gulp-connect-php
https://www.npmjs.com/package/grunt-php
Here is my code to Gulp:
var gulp = require('gulp'),
livereload = require('gulp-livereload'),
connectPHP = require('gulp-connect-php');
gulp.task('connect', function() {
connectPHP.server({
hostname: '0.0.0.0',
bin: 'C:/php/php.exe',
ini: 'C:/php/php.ini',
port: 8000,
base: 'dev',
livereload: true
});
});
I also setted the exe and ini file location.
If you interested in, this is the code for Grunt:
php: {
watch: {
options: {
livereload: true,
bin: 'C:/php/php.exe',
ini: 'C:/php/php.ini',
base: '../development',
port: 8000
}
}
}
I hope it helps!
I ended up using gulp-connect-php with http-proxy. In the end, my php serve task looked like this:
gulp.task('php-serve', ['styles', 'fonts'], function () {
connect.server({
port: 9001,
base: 'app',
open: false
});
var proxy = httpProxy.createProxyServer({});
browserSync({
notify: false,
port : 9000,
server: {
baseDir : ['.tmp', 'app'],
routes : {
'/bower_components': 'bower_components'
},
middleware: function (req, res, next) {
var url = req.url;
if (!url.match(/^\/(styles|fonts|bower_components)\//)) {
proxy.web(req, res, { target: '{ip address taken out}:9001' });
} else {
next();
}
}
}
});
// watch for changes
gulp.watch([
'app/*.html',
'app/*.php',
'app/scripts/**/*.js',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});