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!
Related
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!
I want to add Browser Sync to the gulpfile.js, and got so far as below.
It is a Drupal 8 site on MAMP / apache 80.
I have this working script when I run gulp runbsync. I would like to add it to gulp watch.
I have tried various methods to include the task inside of gulp.task('watch:css', all of which simply failed.
var browserSync = require('browser-sync').create(),
reload = browserSync.reload;
//define task
gulp.task('bsync', function () {
//spin up dev server
browserSync.init({
proxy: "dev.sitename.local",
hostname: "dev.sitename.local",
port: 3000, //even if apache is running on 80 or something else
});
//when css files change, reload browserSync
gulp.watch('./css/*.css').on('change', function () {
browserSync.reload();
});
});
//call task with 'gulp runbsync'
gulp.task('runbsync', ['bsync']);
The watch parts are:
// The default task.
gulp.task('default', ['build']);
// Build everything.
gulp.task('build', ['sass', 'drush:cc', 'lint']);
// Default watch task.
// #todo needs to add a javascript watch task.
gulp.task('watch', ['watch:css']);
// Watch for changes for scss files and rebuild.
gulp.task('watch:css', ['sass', 'drush:cc', 'lint:sass'], function () {
return gulp.watch(options.theme.scss + '**/*.scss', options.gulpWatchOptions, ['sass', 'drush:cc', 'lint:sass']);
});
I dont know if other parts of the file are nessesary so I left them out here and made a repo (you can even send a pull request)
https://github.com/petergus/D8-zurb-foundation-gulp-browsersync/blob/master/gulpfile.js
I am scratching my head around but can't seem to figure out whats wrong with the following gulpfile which simply watch and compile less file.
This simply won't watch less changes, I have tried all gulp, gulp watch. I have to manually run gulp after each change to compile them. Is there something wrong that causing watch to not work as expected?
Gulp Version
CLI version 1.4.0
Local version 3.9.1
NPM 4.1.2
Node v7.7.2
var gulp = require('gulp');
var less = require('gulp-less');
// gulp compile paths
var paths = {
dist: 'assets/dist'
};
gulp.task('css', function() {
return gulp.src('assets/less/styles.less')
.pipe(less({
compress: true
}))
.pipe(gulp.dest(paths.dist))
});
gulp.task('watch', function() {
gulp.watch('assets/less/*.less', ['css']); // Watch all the .less files, then run the less task
});
gulp.task('default', ['watch']);
Make sure you have correct path to the .less files also you need to add bowersync.reload for it to work.
gulp.task('watch', function () {
gulp.watch('assets/less/*.less', ['css']);
// init server
browserSync.init({
server: {
proxy: "local.build",
baseDir: appPath.root
}
});
gulp.watch([appPath.root + '**'], browserSync.reload);
});
gulp.task('default', ['watch']);
I have been playing with gulp and babel for the past few days. I am getting a solid grasp of setting up babel with gulp through tutorials. I've noticed that the newer the tutorial the more changes that develop.
Here is one way I was able to set up es6 to es5 with a transpiler.
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
However, I do not want to rerun gulp each time, and I want the dist/ folder to update on each save.
I added browser-sync and delete.
var gulp = require('gulp');
var babel = require('gulp-babel');
var browserSync = require('browser-sync');
var del = require('del');
gulp.task('clean:dist', function() {
return del([
'dist/app.js'
]);
});
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
gulp.task("browserSync", function() {
browserSync({
server: {
baseDir: './dist'
}
});
});
gulp.task("copyIndex", ['clean:dist'], function() {
gulp.src("src/index.html")
.pipe(gulp.dest('./dist'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('watchFiles', function() {
gulp.watch('src/index.html', ['copyIndex']);
gulp.watch('src/**/*.js', ['babelIt']);
});
gulp.task('default', ['clean:dist', 'es6to5','browserSync','watchFiles']);
I set up a default that will clean out the dist folder then run es6to5. Afterwards I want it to sync and update. I called watchFiles last.
However, I am no longer getting updated js files. The files in the dist folder Are not compiling to es5 and everything is going to a 404.
The task
copyIndex seems to be the problem but I am not sure how to fix it or if it is the only problem. Any direction helps.
You have a typo.
It should be gulp.watch('src/**/*.js', ['es6to5']);, not gulp.watch('src/**/*.js', ['babelIt']);
Anyway i suggest to use gulp-watch instead of the built-in watch function. It has several advantages, mainly it recompile on new file creation.
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.