I would like to ask you for a help. I have a problem with browsersync. I want to learn this tool, and working with tutorial on the WEB, i typed a code but it works only once. Namely, while i put any changes in HTML file, it browser doesn't reload. It realoads only once and never more.
Below is my code. TIA
const gulp = require('gulp');
const browserSync = require('browser-sync');
gulp.task('reload', function(){
browserSync.reload();
});
gulp.task('serve', function(){
browserSync({
server: 'src'
});
gulp.watch('src/*.html', gulp.series('reload'));
});
gulp.task('default', gulp.series('serve'));
gulp.task('reload', function(done){
browserSync.reload();
done();
});
gulp.task('serve', function(done){
browserSync({
server: 'src'
});
gulp.watch('src/*.html', gulp.series('reload'));
done();
});
You can see in the above code I have added done() callbacks - you need those to signal async completion so that the tasks can be fired a second, etc. time.
Related
I try to get a simple workflow running where changes in the sass-file are immediately translated into css and displayed in the browser (using this tutorial: https://css-tricks.com/gulp-for-beginners/)
I looked through multiple answers to simliar questions here but couldn't find a solution.
This is my gulpfile:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('app/**/*.sass') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
var browserSync = require('browser-sync').create();
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
gulp.task('watch', gulp.series(['browserSync'], ['sass']), function(){
gulp.watch('app/**/*.sass', gulp.series(['sass']));
})
When I call gulp sass it works perfectly fine. Also, when I remove the browsersync and only use the following code the watching itself works:
gulp.task('watch', function(){
gulp.watch('app/scss/*.sass', gulp.series(['sass']));
})
There must be something wrong with the way the browsersyncing is (not) happening. Can someone help me out? Many thanks in advance!
The following is not in gulp v4 syntax:
gulp.task('watch', gulp.series(['browserSync'], ['sass']), function(){
gulp.watch('app/**/*.sass', gulp.series(['sass']));
})
Move the function into the series arguments. So try this instead:
gulp.task('watch', gulp.series('browserSync', 'sass', function(){
gulp.watch('app/**/*.sass', gulp.series('sass'));
}));
In this way gulp.task() takes 2 arguments instead of 3 - that is the gulp v4 way. That article was written in v3 syntax unfortunately, with a few warnings to change the code for v4.
When I start gulp Google Chrome doesn't open my http://localhost:3000 and doesn't update my css file automaticaly. I have no idea what am I doing wrong.
It's my first time using Gulp, guys. Any idea to fix it? Thanks
var gulp = require('gulp')
var browserSync = require('browser-sync').create()
var sass = require('gulp-sass')
//compile sass
gulp.task('sass', function() {
return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
.pipe(sass())
.pipe(gulp.dest("src/css"))
.pipe(browserSync.stream())
})
//move js to src/js
gulp.task('js', function(){
return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js',
'node_modules/popper.js/dist/umd/popper.min.js'])
.pipe(gulp.dest("src/js"))
.pipe(browserSync.stream())
})
//gulp html and scss
gulp.task('serve', gulp.parallel('sass'), function(){
browserSync.init({
server: "./src"
})
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass'])
gulp.watch("src/*.html").on('change', browserSync.reload)
})
gulp.task('default', gulp.series('js', 'serve'))
Change this line:
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass'])
to
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'))
Your version was gulp v3, not gulp v4.
Also I would change
gulp.task('default', gulp.series('js', 'serve'))
to
gulp.task('default', gulp.series('js', 'sass', 'serve'))
so that you can simplify to:
gulp.task('serve', function(){ // removed the parallel part.
The first time you run gulp.default you may need refresh the browser if you have some changes already made to your files. Best to start the default task first and then make changes to your files.
This is my gulpfile.js file. It doesn't reload when I change and save my css or html, but it shows the "Connected to Browser-sync" message when I use gulp serve. I can't seem to figure out what is wrong.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var gulp = require('gulp');
gulp.task('styles', function() {
gulp.src('./css/*.css')
.pipe(gulp.dest('./css'))
});
//Watch task
gulp.task('default',function() {
gulp.watch('./css/*.css',['styles']);
});
gulp.task('js', function () {
return gulp.src('./js/*.js')
// .pipe(concat('all.js'))
.pipe(gulp.dest('./js'));
});
gulp.task('html', function () {
return gulp.src('./*.html')
.pipe(gulp.dest('./'));
});
gulp.task('js-watch', ['js'], browserSync.reload);
gulp.task('html-watch', ['html'], browserSync.reload);
gulp.task('css-watch', ['css'], browserSync.reload);
gulp.task('serve', ['js', 'html', 'styles'], function () {
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.watch("./*.js", ['js-watch']);
gulp.watch("./*.html", ['html-watch']);
gulp.watch("./css/*.css", ['css-watch']);
});
Try this.
All i did was add a new dependency.. run-sequence, to make it easy to organize how things are run. All you need is to run gulp to start the script and everything should run perfectly.
Aside from that i created a site folder at the root of my project. just because it seems more organize that way, and if you ever think of using jade, or sass, scss, etc. in your project and all you have to do is change the src path and keep the rendered output in the site folder..
Aside from that, everything is the same.
EDIT
I forgot to mention that i also added the pipe(bs.stream()); line at the end of each task such as HTML, styles, and JS, so that the browser reloads every time you make a change.
In case you don't want to make the server folder to keep your project organized, the all you have to do is delete the site/ path where ever you see it. and for server: 'site' just replace site with ./. Port you can delete it or define your own port
var gulp = require('gulp'),
bs = require('browser-sync').create(),
sequence = require('run-sequence');
gulp.task('styles', function() {
gulp.src('site/css/*.css')
.pipe(gulp.dest('site/css'))
.pipe(bs.stream());
});
gulp.task('js', function() {
gulp.src(['site/js/*.js'])
// .pipe(concat('all.js'))
.pipe(gulp.dest('site/js'))
.pipe(bs.stream());
});
gulp.task('html', function() {
gulp.src('site/*.html')
.pipe(gulp.dest('site'))
.pipe(bs.stream());
});
gulp.task('browser-sync', function() {
bs.init({
server: 'site',
port: 3010
});
});
gulp.task('watch', ['build'], function() {
gulp.watch(['site/css/*.css'], ['styles']);
gulp.watch(['site/js/*.js'], ['js']);
gulp.watch(['site/*.html'], ['html']);
});
gulp.task('build', function(done) {
sequence(
['html', 'js', 'styles'],
'browser-sync',
done);
});
gulp.task('default', ['watch']);
I have the following gulp file setup for testing purposes of small ideas etc..
My project is setup the following way
Project
site
CSS
img
js
index.html
gulpfile.js
package.json
Every time a save a html, css, or js from the site directory, instead of my browser refreshing, my atom text editor refreshes. Its kind of annoying. I have other projects setup similarly but they are work just fine. its just this one i can't seem to figure out.
is it my code, or something else?
var gulp = require('gulp'),
bs = require('browser-sync').create(),
sequence = require('run-sequence');
gulp.task('styles', function() {
gulp.src('site/css/*.css')
.pipe(gulp.dest('site/css'))
.pipe(bs.stream());
});
gulp.task('js', function() {
gulp.src(['site/js/*.js'])
// .pipe(concat('all.js'))
.pipe(gulp.dest('site/js'))
.pipe(bs.stream());
});
gulp.task('html', function() {
gulp.src('site/*.html')
.pipe(gulp.dest('site/'))
.pipe(bs.stream());
});
gulp.task('browser-sync', function() {
bs.init({
server: 'site'
});
});
gulp.task('watch', ['build'], function() {
gulp.watch(['site/css/*.css'], ['styles']);
gulp.watch(['site/js/*.js'], ['js']);
gulp.watch(['site/*.html'], ['html']);
});
gulp.task('build', function(done) {
sequence(
['html', 'js', 'styles'],
'browser-sync',
done);
});
gulp.task('default', ['watch']);
The issue was that I didn't have a body tag in my index file. Once I added it, atom stopped refreshing and browser-sync started working properly
this is my gulpfile.js
var gulp = require('gulp'),
browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: './',
}
})
})
then i started "gulp browser-sync" and it listening on port 3000
and i opened the url in browser.
While editing html or css and document saved, the browser won't reload.
If I used browser-sync to monitoring files, it works.
Anything wrong with my gulpfile.js ?
You'll need to trigger the reload yourself. I recommend a setup like this one; watch your files for changes, run the optimisation tasks and then call the reload method at the end of the pipeline. Something like this:
gulp.task('styles', function() {
return gulp.src('assets/sass/*.scss')
.pipe(sass())
.pipe(csso())
.pipe(gulp.dest('web/css'))
.pipe(browserSync.reload({stream:true})); // Make sure this is called!
});
gulp.task('browser-sync', function() {
browserSync.init(null, {
server: {
baseDir: './'
}
});
});
gulp.task('watch', ['browser-sync'], function() {
gulp.watch(['assets/sass/*.scss'], ['styles']);
});
Edit: To reload your HTML, use a task like this:
gulp.task('watch', ['browser-sync'], function () {
// add browserSync.reload to the tasks array to make
// all browsers reload after tasks are complete.
gulp.watch("html/*.html", ['htmlTasks', browserSync.reload]);
});
From here: http://www.browsersync.io/docs/gulp/#gulp-reload