Gulp watch 只执行一次任务

Question

我安装了 gulp-livereload 以在更改 .js 文件后重新加载页面。

代码如下：

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'));
});

所以它的监听在 file.js 上发生了变化。

当我执行时，我得到这个：

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.

它仅在我保存第一个更改时重新加载，如果我进行另一个更改则不会重新加载。

我该如何解决这个问题？

注意：我正在使用 livereload chrome 扩展 和 Ubuntu 18.04

Answer 1

如果 gulp 安装在 /home/ksdmwms/Desktop/projs/others/tests/gulp_test

你可以试试这个：

var gulp = require('gulp'),
    livereload = require('gulp-livereload');


gulp.task('jsLiveReload', function() {
  gulp.src('./src/js/**/*.js')
    .pipe(livereload());
  //.pipe(gulp.dest('')); 
});


gulp.task('watchJsTest', function() {
    livereload.listen({
        reloadPage: 'http://localhost/'
    });
    gulp.watch('./src/js/**/*.js', ['jsLiveReload']);
});

告诉我它是否有效:) 你试过了吗brwosersync？

Answer 2

浏览器同步 > 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'])

在服务任务中，gulp.watch

Gulp watch 只执行一次任务

Gulp watch execute task only once

javascript

npm

gulp

gulp-watch