Gulp watch execute task only once

Question

I've installed gulp-livereload to reload pages after making changes in .js files.

Here is the code:

const gulp = require('gulp');
const livereload = require('gulp-livereload');


gulp.task('jsLiveReload', () => {
  gulp
    .src('/home/ksdmwms/Desktop/projs/others/tests/gulp_test/src/js/file.js')
    .pipe(livereload());
});


gulp.task('watchJsTest', function() {
    livereload.listen({
        reloadPage: 'http://localhost/projs/others/tests/gulp_test/src/index.html'
    });
    gulp.watch('/home/ksdmwms/Desktop/projs/others/tests/gulp_test/src/js/file.js', gulp.series('jsLiveReload'));
});

So its listening changes on file.js.

When i execute i get this:

gulp watchJsTest
[14:05:40] Using gulpfile /opt/lampp/htdocs/projs/others/tests/gulp_test/gulpfile.js
[14:05:40] Starting 'watchJsTest'...
[14:05:46] Starting 'jsLiveReload'...
[14:05:46] /home/ksdmwms/Desktop/projs/others/tests/gulp_test/src/js/file.js reloaded.

It reloads only when i save the first changes, if i make another changes its not reloading.

How can i solve this?

Note: Im using livereload chrome extension and Ubuntu 18.04

Answer 1

Browser-sync > Gulp-live-reload

Browser-Sync

const gulp = require('gulp')
const browserSync = require('browser-sync').create()

gulp.task('js', () => {
  return gulp.src([
      'Files1',
      'File2'
    ])
    .pipe(gulp.dest(''))
    .pipe(browserSync.stream())
})

gulp.task('serve', ['sass', 'js'], () => {
  browserSync.init({
    server: './src',
  })

  gulp.watch([
    'src/sass/*.scss',
    'src/js/*.js',
  ], ['sass', 'js'])

  gulp.watch('src/*.html').on('change', browserSync.reload)
})

gulp.task('default', ['serve'])

In serve task, gulp.watch