FreddyV (1) [Avatar] Offline
#1
CONSOLE OUTPUT:

[BS] Serving files from: dist
[BS] Serving files from: app
[14:48:22] Starting 'styles'...
[14:48:45] Finished 'styles' after 23 s
[14:48:46] Starting 'styles'...
[14:48:46] Starting '<anonymous>'...
[BS] Reloading Browsers...
[14:48:46] Finished 'styles' after 135 ms
[14:49:05] Starting 'styles'...
[14:49:06] Finished 'styles' after 114 ms
[14:49:25] Starting 'styles'...
[14:49:25] Finished 'styles' after 127 ms

As you can see, [BS] Reloading Browsers... only happens the first time after a change in styles.


gulpfile.js:

var gulp		= require('gulp');
var jshint		= require('gulp-jshint');
var uglify 		= require('gulp-uglify');
var concat	    = require('gulp-concat');
var less		= require('gulp-less');
var minifyCSS	= require('gulp-cssnano');
var prefix		= require('gulp-autoprefixer');

var del 		= require('del');
var bSync	    = require('browser-sync');

gulp.task('test', function() {
	return gulp.src(['app/scripts/**/*.js', '!app/scripts/vendor/**/*.js'])
		.pipe(jshint())
		.pipe(jshint.reporter('default'))
		.pipe(jshint.reporter('fail'));
});

gulp.task('scripts',
	gulp.series('test', function scriptsInternal() {
	return gulp.src('app/scripts/**/*.js')
		.pipe(concat('main-min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('dist/scripts'));
	})
);

gulp.task('styles', function() {
	return gulp.src('app/styles/main.less')
		.pipe(less())
		.pipe(minifyCSS())
		.pipe(prefix())
		.pipe(gulp.dest('dist/styles'));
});

gulp.task('clean', function() {
	return del(['dist']);
});

gulp.task('server', function(done) {
	bSync({
		server: {
			baseDir: ['dist', 'app']
		}
	});
	done();
});


gulp.task('default',
	gulp.series(
		'clean',
		gulp.parallel('styles', 'scripts'), 
		'server',
		function watcher(done) {
			gulp.watch(
				['app/scripts/**/*.js', '!app/scripts/vendor/**/*.js'],
				gulp.parallel('scripts')
			);
			gulp.watch(
				'app/styles/**/*.less',
				gulp.parallel('styles')
			);
			gulp.watch(
				'dist/**/*',
				bSync.reload
			);
			done();
		}
	)
);
Reuven Gampel (1) [Avatar] Offline
#2
I resolved the issue of browser-sync, by removing the name of the inline function in the end of the default task.
And adding bSync.reload to the on change event in every gulp.watch method.
It reloads the browser every time.

BUT There is another issue:

The less compiler will only recompile if you make the changes directly to the main.less file.
It will reload the browser on any changed less files, but the main.css file will not be recompiled,
unless you make the changes in the main.less itself.

This is some sort of caching I presume.

Here is the fixed code:

var gulp		= require('gulp');
var jshint		= require('gulp-jshint');
var uglify 		= require('gulp-uglify');
var concat	    = require('gulp-concat');
var less		= require('gulp-less');
var minifyCSS	= require('gulp-cssnano');
var prefix		= require('gulp-autoprefixer');

var del 		= require('del');
var bSync	    = require('browser-sync');

gulp.task('test', function() {
    return gulp.src(['app/scripts/**/*.js', '!app/scripts/vendor/**/*.js'])
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(jshint.reporter('fail'));
});

gulp.task('scripts',
    gulp.series('test', function scriptsInternal() {
        return gulp.src('app/scripts/**/*.js')
            .pipe(concat('main-min.js'))
            .pipe(uglify())
            .pipe(gulp.dest('dist/scripts'));
    })
);

gulp.task('styles', function() {

    return gulp.src('app/styles/main.less')
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(prefix())
        .pipe(gulp.dest('dist/styles'));
});

gulp.task('clean', function() {
    return del(['dist']);
});

gulp.task('server', function(done) {
    bSync({
        server: {
            baseDir: ['dist', 'app']
        }
    });
    done();
});


gulp.task('default',
    gulp.series(
        'clean',
        gulp.parallel('styles', 'scripts'),
        'server',
        function(done) {
            
            gulp.watch(
                ['app/scripts/**/*.js', '!app/scripts/vendor/**/*.js'],
                gulp.parallel('scripts')
            ).on("change", bSync.reload);
            
            gulp.watch(
                'app/styles/**/*.less',
                gulp.parallel('styles')
            ).on("change", bSync.reload);
            
            done();
        }
    )
);