gulpfile.js
var gulp = require('gulp')
var jade = require('gulp-jade')
var browserSync = require('browser-sync').create()
gulp.task('jade', function(){
gulp.src('app/shit*/*.jade', {base: 'app'})
.pipe(jade())
.pipe(gulp.dest('build'))
})
gulp.task('watch', function() {
gulp.watch('app/shit*/*.jade', ['jade'])
})
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "build"
}
})
gulp.watch("build/**/*.html", browserSync.reload)
gulp.watch("build/**/*.css", browserSync.reload)
})
gulp.task('default', ['watch', 'browser-sync'])
After saving the file, Console gives «Reloading Browsers ...», but in fact the browser does not refresh.
When opening the app in the browser, do you see the legend "Connected to BrowserSync"? otherwise the app wont reload.
Check the deployed app and browserSync are both working in the same port (by default 3000)
Related
It takes far too long usually. On my laptop it literally never finishes. The PHP watch is supposed to be checking for PHP saves in the root and in any sub-directories. I'm not sure if I have the glob correct there, and maybe that's what's causing the problem?
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var mmq = require('gulp-merge-media-queries');
var phpConnect = require('gulp-connect-php');
var autoPrefixer = require('gulp-autoprefixer');
gulp.task('sass', function() {
return gulp.src('assets/css/**/*.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(autoPrefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('assets/css'));
});
gulp.task('connect-sync', function() {
phpConnect.server({}, function (){
browserSync({
proxy: '127.0.0.1:8000'
});
});
});
gulp.task('mmq', ['sass'], function () {
gulp.src('assets/css/styles.css')
.pipe(mmq({
log: true
}))
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('watch', ['connect-sync', 'sass', 'mmq'], function(){
gulp.watch('assets/css/**/*.scss', ['sass', 'mmq']);
gulp.watch('/**/*.php', browserSync.reload);
gulp.watch('assets/js/**/*.js', browserSync.reload);
// Other watchers
});
Could be that gulp checks your node_modules folder? This is known to slow gulptasks down.
Try running each gulp statement from the console, i.e. First try gulp sass, then gulp connect.
Can you post the output from your console plz?
I want to be able to send the browserSync external URL as a parameter for an external node script in my gulp file. How can I get at that external URL through the browserSync object (or some other way)?
var gulp = require('gulp');
var shell = require('gulp-shell');
var browserSync = require('browser-sync').create();
gulp.task('default', ['browser-sync', 'config']);
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "localhost:8024",
open: "external"
});
});
gulp.task('config', shell.task([
"node scripts/someNodeScript.js browserSync.externalURL"
]));
UPDATE
Based on the excellent answer by #sven-shoenung below, I slightly tweaked his solution and am successfully using this:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var spawn = require('child_process').spawn;
var externalUrl;
var browserSyncDone = function () {
spawn('node', ['scripts/someNodeScript.js', externalUrl], {stdio:'inherit'});
};
gulp.task('default', ['browser-sync']);
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "localhost:8024",
open: "external"
}, function() {
externalUrl = browserSync.getOption('urls').get('external');
browserSyncDone();
});
});
You can use browserSync.getOptions('urls') to get a Map of all access URLs. It returns something like this:
Map {
"local": "http://localhost:3000",
"external": "http://192.168.0.125:3000",
"ui": "http://localhost:3001",
"ui-external": "http://192.168.0.125:3001"
}
Note that is only available after browser-sync is successfully initialized, so you need to pass a callback function to browserSync.init() or you'll try to get the value too soon.
You won't be able to use gulp-shell for the same reason. shell.task() will be set up before browser-sync has initialized, so browserSync.getOptions('urls') isn't available yet.
I recommend you use the standard nodejs child_process.spawn() instead.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var spawn = require('child_process').spawn;
var externalUrl;
gulp.task('default', ['browser-sync', 'config']);
gulp.task('browser-sync', function(done) {
browserSync.init({
proxy: "localhost:8024",
open: "external"
}, function() {
externalUrl = browserSync.getOption('urls').get('external');
done();
});
});
gulp.task('config', ['browser-sync'], function(done) {
spawn('node', ['scripts/someNodeScript.js', externalUrl], {stdio:'inherit'}).on('close', done);
});
I am following this tutorial, but having trouble getting browserSync to fire when I make CSS changes.
If I call gulp watch it reloads one time, and the SASS compiles to CSS automatically, but browserSync does not fire on change.
The below gist is the entire gulpfile.js
https://gist.github.com/RyanNovas/c940324270b57754e487
Looks like you are missing
var watch = require('gulp-watch');
not sure why that wouldn't throw an error. Anyway.
Here's a chunk of the below gulpfile, with relevant stuff.
// Gulpfile
var gulp = require('gulp');
var watch = require('gulp-watch');
// Server
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
// define the default task, call 'serve'.
gulp.task('default', ['serve']);
// Use BrowserSync to fire up a localhost server and start a livereload. We
// inject CSS changes, and reload fully for javascript and html changes.
// http://www.browsersync.io/docs/options/
gulp.task('serve', ['sass', 'webpack'], function() {
browserSync.init({
server: "./",
notify: false,
reloadOnRestart: true,
open: false,
});
// scss
gulp.watch("./css/sass/*.scss", ['sass']);
gulp.watch("./javascript/app/**/*.scss", ['sass']);
gulp.watch("./css/styles.css").on('change', reload);
// html
gulp.watch("./index.html").on('change', reload);
gulp.watch("./javascript/app/**/*.html").on('change', reload);
// js
gulp.watch('./javascript/app/**/*.js', ['webpack']);
gulp.watch('./javascript/dist/**/*.js').on('change', reload);
});
working gulpfile that reloads browsersync without issue
i had setup some gulp tasks and started gulp but gulp is running on port 3000 and my app config is to listen on port 4545 so it opens 3000 port but no any contents it displays output like Cannot GET /.
my project stucture is like
controllers
views
public
app.js
gulpfile.js
so i want gulp to listen on port defined in app.js and watch changes on public flder.
I have included gulp plugin like gulp-plumber,gulp-browser-sync
and its my gulpfile.js
var gulp = require('gulp'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
plumber = require('gulp-plumber')
gulp.task('scripts', function() {
return gulp.src('public/javascripts/**/*.js')
.pipe(plumber())
.pipe(reload({
stream: true
}));
});
gulp.task('styles', function() {
gulp.src('public/stylesheets/**/*.css')
.pipe(plumber())
.pipe(reload({
stream: true
}));
});
// gulp.task('html', function() {
// gulp.src('app/**/*.html')
// .pipe(reload({
// stream: true
// }));
// });
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
gulp.task('watch', function() {
gulp.watch('public/javascripts/**/*.js', ['styles']);
gulp.watch('public/stylesheets/**/*.css', ['scripts']);
});
gulp.task('default', ['scripts', 'styles', 'browser-sync', 'watch']);
You can use gulp-nodemon
var gulp = require('gulp'),
nodemon = require('gulp-nodemon')
gulp.task('develop', function () {
nodemon({
script: 'app.js',
ext: 'js',
}).on('restart', function () {
// a server restarted hook can be added here
});
});
gulp.task('default', ['develop']);
Basically it will restart automatically the server when you change a js file
I am starting live reload via Gulp:
var $$ = require('gulp-load-plugins')();
gulp.watch('*', function (file) {
$$.livereload().changed(file.path);
});
gulp.task('connect', function(){
var connect = require('connect');
return connect()
.use(require('connect-livereload')())
.use(connect.static(__dirname))
.listen(8000);
});
It had been working until I recently got this cryptic error in the browser console and reload stopped working:
Failed to load resource: net::ERR_CONNECTION_REFUSED
http://localhost:35729/livereload.js?snipver=1
Any idea what happens here?
I am behind proxy but localhost is excluded.
I've been using Browsersync for along time after I had issues with Live-Reload, and here's my setup for Browsersync ...
var browsersync = require('browser-sync'));
//BrowserSync Function
gulp.task('browser-sync', function() {
browsersync({
// Change the director name for static site
server: {
baseDir: "./builds/development"
}
});
});
// Browser Sync reload function
gulp.task('browsersync-reload', function () {
browsersync.reload();
});
// Server and Watch Function
gulp.task('server', ['browser-sync'], function() {
gulp.watch("components/sass/**/*.scss", ['sass']);
gulp.watch("html_pages/**/*.html", ['html']);
gulp.watch("builds/development/*.html", ['browsersync-reload']);
gulp.watch("components/scripts/**/*.js", ['js']);
});
Hope it helps.