Gulp 4 browsersync does not refresh when changing .less file

Question

Link to Github repo: https://github.com/Greatshock/Netcracker-Study-Course/blob/f9bfb413929feec51064a78abf1450845f867186

I have a file named base.less, where all the styles are @import-ed. When I run the gulpfile (npm run dev), everything is being built, the browser opens the page. However, when I'm changing the content of one of the imported stylesheet, browsersync just writes in the console File event [change] : dist/base.css and nothing happens (even base.css does not actually change). Note that if I change base.less directly by writing some style in it, everything works fine.

Here is my gulpfile.js. Can anyone see the mistake?

'use strict';

const gulp         = require('gulp'),
      del          = require('del'),
      autoprefixer = require('gulp-autoprefixer'),
      less         = require('gulp-less'),
      cleanCSS     = require('gulp-clean-css'),
      gulpIf       = require('gulp-if'),
      sourceMaps   = require('gulp-sourcemaps'),
      browserSync  = require('browser-sync').create();

const isDevelopment = !process.env.NODE_ENV || process.env.NODE_ENV == 'development';

gulp.task('less', () => {
    return gulp.src('src/assets/themes/base/base.less')
        .pipe(gulpIf(isDevelopment, sourceMaps.init()))
        .pipe(less())
        .on('error', onLessError)
        .pipe(autoprefixer({
            browsers: [
                'last 2 versions',
                'safari 5',
                'ie 10',
                'ie 11'
            ],
            cascade: true
        }))
        .pipe(cleanCSS())
        .pipe(gulpIf(isDevelopment, sourceMaps.write()))
        .pipe(gulp.dest('prod'));
});

gulp.task('images', () => {
    return gulp.src('src/assets/themes/base/images/**/*.*', {base: 'src/assets/themes/base', since: gulp.lastRun('images')})
        .pipe(gulp.dest('prod'));
});

gulp.task('index', () => {
    return gulp.src('src/index.html', {since: gulp.lastRun('index')})
        .pipe(gulp.dest('prod'));
});

gulp.task('clean', () => {
    return del('prod');
});

gulp.task('build', gulp.series('clean', gulp.parallel('less', 'images', 'index')));

gulp.task('watch', () => {
    gulp.watch('src/assets/themes/base/**/*.less', gulp.series('less'));
    gulp.watch('src/assets/themes/base/images/**/*.*', gulp.series('images'));
    gulp.watch('src/index.html', gulp.series('index'));
});

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

    browserSync.init({
        server: 'prod'
    });

    browserSync.watch('prod/**/*.*').on('change', browserSync.reload);
});

gulp.task('dev', gulp.series('build', gulp.parallel('watch', 'serve')));

/***HELPERS FUNCTIONS***/
function onLessError(error) {
    console.error(error.message);
    this.emit('end');
}

score 1 · Answer 1 · 2018-06-07T13:43:20.140

1

I don't like this hackaround because to me it says one of our plugins isn't working correctly (browser-sync) so we correct it with that broken plugin. I'd maybe try browserify instead.

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

browserSync.init({
    files: [
        {
            match: ['src/assets/themes/base/**/*.less'],
            fn:    function (event, file) {
                this.reload()
            }
        }
    ],
    server: 'prod'
});

browserSync.watch('prod/**/*.*').on('change', browserSync.reload);
});

edit - This could also be a dir issue where the src is different than the watch dir. src/assets/themes/base/**/*.less' should be src/assets/themes/**/*.less' or src/assets/themes/base/*.less' for a distinct folder.

Edit 2- gulp.watch('src/assets/themes/base/*.less', gulp.series('less')); reloads base.less when any other file is changed if added to the gulp command. :D

edited Jun 07 '18 at 13:43

answered Jun 02 '18 at 15:41

So it is not my fault, but browser-sync or gulp-less bug? – Nikita Marinosyan Jun 02 '18 at 18:35
Either that or your directory is wrong. In the src you have `src/assets/themes/base/base.less` but in the watch you have `src/assets/themes/base/**/*.less'` where it should be `src/assets/themes/base/*.less'` If I am not mistaken. Or you could do `src/assets/themes/**/*.less'`. That is how globbing works. – Jun 03 '18 at 19:17
neither changing the watch dir, nor the hackaround worked – Nikita Marinosyan Jun 04 '18 at 21:04
After re-reading your question, can you elaborate on the issue? Are you saying that when you edit a .less file, watch doesn't run your .less gulp function? I ran the project and everything works as it should it seems. – Jun 05 '18 at 22:37
When I edit any .less file 'less' (gulp task) starts and ends (according to the logs), but the output base.css file does not change. However it does change only if edit base.less directly. For example, try setting background color of the body in base.less (it does change) and after that try to set it in page.less. Also make sure that you are **using the right version** of my project (), because I have downgraded the gulp to version 3.9.1 to get rid of the problem described in the question. – Nikita Marinosyan Jun 07 '18 at 08:29
Gotcha! I know exactly what the problem is then! You are telling gulp with the glob commands in essence, "Hey, in this sub-directory(base), IN ANY FOLDER, watch the less files" and those work great. Now you need a way to tell gulp, "also, watch THIS directory we are currently in for the files. `gulp.watch('src/assets/themes/base/*.less', gulp.series('less'));` – Jun 07 '18 at 13:42
I don't quite understand what I need to do... Can you please provide more details? I'm pretty sure that `gulp.watch('src/assets/themes/base/**/*.less` searches all the less files in base subfolder and its subfolders. Copy the code of `gulpfile` from the question to my project. Start my 'watch' task by typing `npm run watch`. Then try to edit `page.less` and `base.less`. In both cases gulp.watch detects changes and starting the 'less' task. But if you run `npm run dev` only changing the `base.less` will reload the browser. – Nikita Marinosyan Jun 07 '18 at 23:14
First thing is that you are running "clean" and "watch" async, meaning that you could easily be deleting folders you are trying to run with that command. You need to make sure clean runs and finishes before running any other command in gulp. You can do this with `gulp clean && gulp watch` in CLI, or by adding run-sequence plugin to your project. I looked it up and apparently gulp 4.0 is having a lot of trouble with gulp and less files. try version 3.5.0 – Jun 08 '18 at 11:59

Gulp 4 browsersync does not refresh when changing .less file

1 Answers1