What's wrong with gulp.js (how annoying it already is)?

Question

Node.js

After saving the JS file, the browser constantly reloads. Runs or)))

[BS] Reloading Browsers...
[20:20:57] Finished 'js_reload' after 584 μs
[20:20:57] Starting 'scripts'...
[20:20:58] Finished 'scripts' after 1.37 s
[20:20:58] Starting 'js_reload'...
[BS] Reloading Browsers...
[20:20:58] Finished 'js_reload' after 707 μs
[20:20:58] Starting 'scripts'...
[20:21:00] Finished 'scripts' after 1.57 s
[20:21:00] Starting 'js_reload'...
[BS] Reloading Browsers...
[20:21:00] Finished 'js_reload' after 1.07 ms
[20:21:00] Starting 'scripts'...
[20:21:01] Finished 'scripts' after 1.49 s
[20:21:01] Starting 'js_reload'...
[BS] Reloading Browsers...
[20:21:01] Finished 'js_reload' after 1.13 ms
[20:21:01] Starting 'scripts'...
[20:21:03] Finished 'scripts' after 1.43 s
[20:21:03] Starting 'js_reload'...

Here is the complete gulpfile.js code, many of you probably already know it)))

// include gulp
var gulp                = require('gulp');

// include plugins
var sass                = require('gulp-sass');
var concat              = require('gulp-concat');
var uglify              = require('gulp-uglify');
var autoprefixer        = require('gulp-autoprefixer');
var browserSync         = require('browser-sync');
var concat_css          = require('gulp-concat-css');
var css_nano            = require('gulp-cssnano');

// other variables
var sass_option         = {
    outputStyle: 'expanded'
};
var autoprefixer_option = {
    browsers: ['last 15 versions'],
    cascade: false
};

// compile scss
gulp.task('sass', function(){
    return gulp.src('templates/dmitryvolkov/asset/sass/all.scss')
    .pipe(sass(sass_option))
    .pipe(autoprefixer(autoprefixer_option))
    .pipe(gulp.dest('templates/dmitryvolkov/css/'));
});

// concat and minify css
gulp.task('css', ['sass'], function(){
    return gulp.src(['templates/dmitryvolkov/css/all.css'])
    .pipe(concat_css('all.min.css'))
    .pipe(css_nano())
    .pipe(gulp.dest('templates/dmitryvolkov/css/'))
    .pipe(browserSync.reload({
         stream: true
    }));
});

// concatenate and minify js
gulp.task('scripts', function(){
    return gulp.src(['templates/dmitryvolkov/js/jquery.js', 'templates/dmitryvolkov/js/main.js'])
    .pipe(concat('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('templates/dmitryvolkov/js/'));
});

// browserSync task
gulp.task('browserSync', ['css', 'scripts'], function(){
    browserSync.init({
        proxy: "dmitryvolkov.loc"
    });
});

// reload browser after js changes
gulp.task('js_reload', ['scripts'], function(){
    browserSync.reload();
});

// start watchers
gulp.task('watch', ['browserSync'], function(){
    gulp.watch('templates/dmitryvolkov/asset/sass/*.scss', ['css']);
    gulp.watch('templates/dmitryvolkov/js/*.js', ['js_reload']);
    gulp.watch('templates/dmitryvolkov/*.php', browserSync.reload);
    // other warchers
});

Where to dig? It would be better if he gave an error, otherwise crap is going on and it’s not clear how to fix it)))

Answer 1

Because the js_reload task calls the scripts task before executing itself, it resaves the files, the watcher fires, which starts the js_reload task, which calls itself before executing ....
They wrote it themselves.