I serve a site in development via browser-sync and have tried to wire up the sub-directories, so that the browser on files changes reloads. -- However the browser does not reload when I kick of the server with
$ gulp serve
and load the site in a browser and then change index.html. After this the display in the browser does not update by itself.
Do I do something wrong in my gulpfile?:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var site = "site"
function browser_sync_init() {
browserSync.init({
server: {
baseDir: site,
index: "index.html"
},
port: 8080,
ui: false,
open: false,
});
}
gulp.task('serve', function() {
browser_sync_init();
gulp.watch(site+"/scripts/*.js").on('change', browserSync.reload);
gulp.watch(site+"/*.html").on('change', browserSync.reload);
});
gulp.task('default', gulp.series('serve'));
Thanks for any pointers!
Related
Newbie to using Gulp and Browser-Sync and I seem to be stuck in an infinite loop when using browserSync.reload() with files stored on a network drive.
If I run the following code for files stored on my local machine it works perfectly fine, but if I run the code on files that are on the networked drive, the 'refresh' task keeps getting run over and over again with out me making any changes to files.
var gulp = require('gulp'),
browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync.init({
open: 'external',
host: 'test.dev',
proxy: 'test.dev',
port: 3000
});
});
gulp.task('refresh', function () {
browserSync.reload();
// console.log('Refresh');
});
gulp.task('watch', function () {
gulp.watch('**/*.{php,inc,info}', { usePolling: true },['refresh']);
});
gulp.task('default', ['browser-sync', 'watch']);
I found a few post that seem to have a similar issue, those were resolved by updating to the latest version of Browser Sync or using { usePolling: true } on the watch task but I have had no such luck.
Any help is appreciated! Thanks!
What is wrong with this gulp file? When it opens the browser, it does not show index.html. Instead, it lists the contents of 'dist', the directory containing index.html.
"use strict";
var gulp = require('gulp');
var connect = require('gulp-connect'); // Runs a local dev server
var open = require('gulp-open');
var config = {
port: 9005,
devBaseUrl: 'http://localhost',
paths: {
html: './src/*.html',
dist: './dist'
}
};
//Start a local development server
gulp.task('connect', function() {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true
});
});
gulp.task('open', ['connect'], function () {
gulp.src('dist/index.html')
.pipe(open({
uri: config.devBaseUrl + ':' + config.port + '/',
app: 'chrome' }));
});
gulp.task('html', function() {
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload());
});
gulp.task('watch', function() {
gulp.watch(config.paths.html, ['html']);
});
gulp.task('default', ['html', 'open', 'watch']);
The solution was to restrict the version of gulp-connect to "gulp-connect": "^2.2.0", The latest version works differently, but I do not know the correct syntax of the latest. When I tried the answer from the other poster, the page was displayed as expected, but the watch features did not work with it.
At the time of this writing, the current version is ^3.0.0.
I am on Windows 7 if that makes a difference.
[Update] As per #SteveDavis, this was fixed in version 3.2.0.
Hello problem is with your open task you basically telling gulp to open dist directory instead of just index.html
To install the correct version of the gulp-connect plugin make sure you type in
npm install --save-dev gulp-connect#2.2.0 I had the same problem and changing back to that version solved it.
Make sure index.html is under src not psadmin project folder, so it can find it there when it executes
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist)
after reading alot and trying to make my own gulpfile.js I figured out how to make it compile my "scss" to a "css", the problem is that my browser-sync doesn't work because I need a proxy (because im using .php not .html), If I write this on CMD: "browser-sync start --proxy localhost:8080/app" I can see my files, but I need it to sync every time I modify something on my "scss". All I need now is to implement the proxy thing on it and reloads everytime I save/modify the ".scss", this is my currently gulpfile.js :
var gulp = require('gulp');
var httpProxy = require('http-proxy');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var paths = {
scss: '.sass/*.scss'
};
gulp.task('sass', function () {
gulp.src('scss/style.scss')
.pipe(sass({
includePaths: ['scss']
}))
.pipe(gulp.dest('css'));
});
gulp.task('browser-sync', function() {
browserSync.init(["css/*.css", "js/*.js"], {
server: {
baseDir: "./"
}
});
});
gulp.task('watch', ['sass', 'browser-sync'], function () {
gulp.watch(["scss/*.scss", "scss/base/*.scss", "scss/sections/*.scss", "scss/style/*.scss"], ['sass']);
});
This gulpfile.js is watching my "scss/syle.scss" and updates my "css/style.css" everytime I modify the scss file.
Have you taken a look at the browserSync options? This should give you a pretty good idea on how to set it up. It doesn't seem like you implemented it in the gulpfile you provided.
Hey guys i am new to angularJs so i am learning. i have used xampp before on port 8080 and now when i set up a gulp server it says that it started successfully but nothing appeared on browser. tried to change port but didnt work. what did i do wrong? here is my gulpfile.js
var gulp = require('gulp'),
connect = require('gulp-connect'),
historyApiFallback = require('connect-history-api-fallback');
//Development Web Server
gulp.task('server', function(){
connect.server({
root: './app',
hostname: 'localhost',
port: 2020,
liverload: true,
middleware: function(connect, opt){
return [ historyApiFallback ];
}
});
});
var stylus = require('gulp-stylus'),
nib = require('nib');
//Preprocess Stylus files to CSS and reload changes
gulp.task('css', function(){
gulp.src('./app/stylesheets/main.styl')
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app/stylesheets'))
.pipe(connect.reload());
});
//Reload the browser on HTML changes
gulp.task('html', function(){
gulp.src('./app/**/*.html')
.pipe(connect.reload());
});
//watch code changes and to run related tasks
gulp.task('watch' , function(){
gulp.watch(['./app/**/*.html'],['html']);
gulp.watch(['./app/stylesheets/**/*.styl'],['css']);
});
gulp.task('default', ['server', 'watch']);
I'm using Gulp + BrowserSync and I'm trying to reload my development website when changes are made to my HTML files, but I can't seem to get it working.
I'm getting no errors in the command line, my page seems to reload but the changes I've made don't appear in the browser, unless I quit the gulp task and run it again.
This is my current setup:
var gulp = require('gulp');
var browserify = require('browserify');
var swig = require('gulp-swig');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('serve', function () {
browserSync({
server: {
baseDir: './Build'
}
});
});
gulp.task('templates', function() {
return gulp.src('./src/*.html')
.pipe(swig())
.pipe(gulp.dest('./Build'))
.pipe(reload({stream: true}))
});
// Default task
gulp.task('default', ['serve', 'templates', 'sass', 'js'], function() {
gulp.watch('./src/*.html', ['templates']);
gulp.watch(['./src/scss/*.scss', './src/scss/**/*.scss'], ['sass']);
gulp.watch('./src/js/*.js', ['js']);
});
Any help with this is appreciated. Thanks in advance!
The problem in this setup seems to be swig. When you check the files in ./Build, they haven't changed, so the browser is loading the files correctly. But swig does not get the changes. Disabling swig's caching feature should resolve this:
gulp.task('templates', function() {
return gulp.src('./src/*.html')
.pipe(swig({
defaults: { cache: false }
}))
.pipe(gulp.dest('./Build'))
.pipe(reload({stream: true}));
});