Develop Reference

Task never defined: browserSync.reload

I upgraded from Gulp 3.x.x to Gulp 4.0.2 and began editing my gulpfile to make it compatible, but I'm stuck on this error I get when I try to run gulp:
AssertionError [ERR_ASSERTION]: Task never defined: browserSync.reload
Here is what I believe is the relevant portion of my gulpfile:
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app'
},
browser: 'Chrome'
})
})
gulp.task('sass', function() {
return gulp.src('app/styles/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass().on('error', sass.logError)) // Passes it through a gulp-sass, log errors to console
.pipe(gulp.dest('app/styles')) // Outputs it in the css folder
.pipe(browserSync.reload({ // Reloading with Browser Sync
stream: true
}));
})
// Watchers
gulp.task('watch', function() {
gulp.watch('app/styles/**/*.scss', gulp.series('sass'));
gulp.watch('app/*.html', gulp.series('browserSync.reload'));
gulp.watch('app/js/**/*.js', gulp.series('browserSync.reload'));
})
I'm using node version 11.15.0. Later versions were giving me problems.

Your immediate error is a result of these two lines:
gulp.watch('app/*.html', gulp.series('browserSync.reload'));
gulp.watch('app/js/**/*.js', gulp.series('browserSync.reload'));
Simply remove the quotes around the browserSync.reload calls:
gulp.watch('app/*.html', gulp.series(browserSync.reload));
gulp.watch('app/js/**/*.js', gulp.series(browserSync.reload));
If those calls were calls to tasks then it would be correct to put them into quotes. But your calls are not to tasks but to your const browserSync = require('browser-sync) package.
So it is confusing and will probably lead to errors to use the same identifier - browserSync for both your package require name and the task name as it appears you did.
As can be seen here:
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app'
},
browser: 'Chrome'
})
})
The first use of browserSync is as a task name. The second, in the function body, is a reference to the package name. And the second is ultimately the one used in your watch tasks and would not be quoted there because it is not a task name. So using browserSync both ways is definitely confusing - just pick a different name for one like:
gulp.task('bSync', function() {
browserSync.init({......
Also note the init added to the above code. You will need it.

'gulp-jade' not working or compiling jade to html

So I'm working on this project, and I'm using gulp. I need it to be able to compile the jade that I write (in the _jadefiles folder) and output them as .html into the _includes folder of my project.
The things I'm currently compiling and running with gulp are:
- BrowserSync
- Sass (Scss, technically.)
- Autoprefixer
- Something called Child Process (I started with a 'kit on github' called jekyll-gulp-sass-browser-sync)
- And Obviously Jade.
Note: I'm also using Jekyll, however, that hopefully shouldn't matter.
I'm following a video by DevTips, called Design+Code Hour 4.1
Here's his current code:
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var cp = require('child_process');
var jade = require('gulp-jade');
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
/**
* Build the Jekyll Site
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Rebuild Jekyll & do page reload
*/
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
browserSync.reload();
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('browser-sync', ['sass', 'jekyll-build'], function() {
browserSync({
server: {
baseDir: '_site'
},
notify: false
});
});
/**
* Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
*/
gulp.task('sass', function () {
return gulp.src('assets/css/main.scss')
.pipe(sass({
includePaths: ['css'],
onError: browserSync.notify
}))
.pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
.pipe(gulp.dest('_site/assets/css'))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest('assets/css'));
});
His jade gulp stuff:
/*
* I'm trying to gulp stuff, too. -
*/
gulp.task('jade', function(){
return gulp.src('_jadefiles/*.jade')
.pipe(jade())
.pipe(gulp.dest('_includes'));
});
/**
* Watch scss files for changes & recompile
* Watch html/md files, run jekyll & reload BrowserSync
*/
gulp.task('watch', function () {
gulp.watch('assets/css/**', ['sass']);
gulp.watch(['index.html', '_layouts/*.html', '_includes/*'], ['jekyll-rebuild']);
gulp.watch('_jadefiles/*.jade', ['jade']);
});
/**
* Default task, running just `gulp` will compile the sass,
* compile the jekyll site, launch BrowserSync & watch files.
*/
gulp.task('default', ['browser-sync', 'watch']);
Everything else is working fine, exept this.

A bit late but hope it might help somebody who looks for a similar answer, I almost went crazy trying to figure out this for myself.
This sounds a little silly, but after having a similar problem
(jade-gulp runs with no errors but not outputting index.html) and searching throughout the web for an answer with no luck, I realized I just had a syntax mistake in my .jade file (extra space character), so it would not compile to anything.
try commenting out the entire content of your .jade file and then try to parse a very simple line (e.g. h1 hello) with gulp-jade. check if it works, if it does, start debugging your code. Alternatively you can create a new .jade file with a simple code instead of commenting out the original file.
Hope it helps!

can you expand on any errors your seeing?
Does gulp jade run on its own - i.e. standalone - or is it just within your watch that it's not running?
My gut feeling is there's more likely to be an error in your jade markup ( or pug as we need to start calling it )
Can you post any of that ?

gulp: how to update the browser without refresh (for css changes only)

I've setup gulp such that the browser reloads when I make changes. However, for css changes I want the browser to update without refresh, but I'm not sure how to do this. For my current setup I've used this tutorial:
var debug = require('gulp-debug'),
connect = require('gulp-connect'),
watch = require('gulp-watch'),
livereload = require('gulp-livereload');
gulp.task('webserver', function () {
connect.server({
livereload: true,
root: ['demo/']
});
});
gulp.task('livereload', function () {
gulp.src(['index.html', 'resources/**/*.js'])
.pipe(watch(['resources/**/*.html', 'index.html']))
//.pipe(debug({verbose: true}))
.pipe(connect.reload());
});
gulp.task('watch', function () {
livereload.listen();
gulp.watch('resources/**/*.scss', ['css']);
});
In my css task I also call
.pipe(livereload());
Any suggestions what I need to modify so css updates happen without a refresh ?
UPDATE: Here is my css task (a bit simplified):
gulp.task('css', function () {
...
return gulp.src('demo.scss')
.pipe($.sass({
errLogToConsole: true
}))
.pipe(gulp.dest('./target/')
.pipe(livereload());
});

You need to call livereload.changed(files) when change happens. To do that see gulp-watch doc.
watch('**/*.js', function (files) {
livereload.changed(files)
});

you might need a chrome extension for gulp-livereload

I had the same problem with you, i solved it.
I found it's uncontrolled to use embedded livereload support in gulp-connect.
So, i tried to make livereload work independently.
Just setup your gulp-connect config without livereload and call livereload.listen with specified host option(at most time it should be 'localhost'). Like
livereload.listen({ host: 'localhost' });
And then watch files you want to detect. Like
var changedFile = null;
gulp.task("livereload", function(cb){
return gulp.src(changedFile)
.pipe(plumber())
.pipe(livereload());
});
gulp.watch(['*.css']).on('change', function(file) {
changedFile = file.path;
// run specific task according to the given file's extension
// gulp.start(['livereload']);
});

gulp-livereload reloading before server process finishes restarting

I'm configuring my gulp.js gulpfile to watch my directory for file changes, and 1) reload my express server and 2) issue a livereload "change" event so that my browser (with the LiveReload chrome extension) will reload the page that I'm developing.
Here's my gulpfile:
var gulp = require('gulp')
, nodemon = require('gulp-nodemon')
, livereload = require('gulp-livereload');
gulp.task('startReloadServer', function() {
livereload.listen();
});
gulp.task('demon', function () {
nodemon({
script: 'server.js',
ext: 'js html',
env: {
'NODE_ENV': 'development'
}
})
.on('start', ['startReloadServer'])
.on('restart', function () {
console.log('restarted!');
livereload.changed();
});
});
gulp.task('default', ['demon']);
Yet when I make a change to one of my view (.html) files, my browser reloads the page before the node server process has had an opportunity to come back online:
How do I alter my gulpfile to have the livereload.changed() event be issued after nodemon is ready to receive requests?

I found similar question, then I write my solution.
Gulp to watch when node app.listen() is invoked or to port (livereload, nodejs and gulp)
nodemon({script: 'app.js',
nodeArgs: ['--harmony'],
stdout: false})
.on('readable', function(data) {
this.stdout.on('data', function(chunk) {
if (/koa server listening/.test(chunk)) {
console.log('livereload');
livereload.reload();
}
process.stdout.write(chunk);
});
this.stderr.pipe(process.stderr);
});

I also ran into this problem. This best I could come up with was to delay the call to livereload.changed() for one second.
nodemon.on('restart', function() {
setTimeout(livereload.changed, 1000);
});
docs: setTimeout

BrowserSync suddenly not connecting to browser

Last week I tried writing a gulpfile from scratch for a small javascript project. I chose to use BrowserSync to compile my code and reload the browser (Chrome). It was working well throughout the weekend and I got the done. However, I feel like I opened up the project yesterday and now when I run the 'gulp' command it doesn't connect to the browser, give the "Connected to BrowserSync" message, and provide the autoreload functionality. However in the console, I still get notified that my files are getting updated and compiled.
Does anyone have any idea how this could happen?
Here's the gulpfile I'm using:
var gulp = require('gulp'),
gutil = require('gulp-util'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
jshint = require('gulp-jshint'),
sass = require('gulp-sass');
gulp.task('browser-sync', function() {
var files = [
'app/**/*/.html',
'app/assets/css/**/*.css',
'app/assets/js/**/*.js'
];
browserSync.init(files, {
server: {
baseDir: './app'
}
});
});
// process JS files and reload all browsers when complete.
gulp.task('js', function () {
return gulp.src('app/assets/js/*js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest('app/assets/js'))
.pipe(browserSync.reload({stream:true}));
});
gulp.task('sass', function() {
return gulp.src('app/assets/sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/assets/css'))
.pipe(reload({stream: true}));
});
// Reload all Browsers
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('default', ['browser-sync'], function() {
gulp.watch('app/assets/js**/*.js', ['js']);
gulp.watch('app/assets/sass/*.scss', ['sass']);
gulp.watch('app/*html', ['bs-reload']);
});
Thanks for any advice!

It looks like the browsersync 'script' tag is not being injected in the html file you are serving from, re-check your html file , Sometimes i forget the body tag , If there is no body tag the script tag won't be injected.
when you run gulp , and your page loads up check out the source code (view page source) while it's opened up and check the html structure.
You can copy the tag from other project that you have working fine , run it and copy the script tag injected and paste it on your current project page.
the script tag looks like this (might be diffrent depending on BrowserSync version)
<body>
<script id="__bs_script__">
//<![CDATA[document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.18.5'><\/script>".replace("HOST", location.hostname));//]]>
</script>
Notice: In the above <script> tag browser-sync version is 2.18.5 make sure to replace that with your installed version of browser-sync