Gulp watch 只执行一次任务答案

【问题标题】：Gulp watch execute task only onceGulp watch 只执行一次任务
【发布时间】：2018-09-05 13:09:25
【问题描述】：

我已安装 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

【问题讨论】：

你在 node.js 中使用 gulp 吗？ gulp 安装在哪里（路径）？
是的，我在全球范围内使用它，gulp 安装在项目本地（--save dev）

标签： javascript npm gulp gulp-watch

【解决方案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？

【讨论】：

它没有用。不，我从未尝试过......这解决了问题：.pipe(gulp.dest(''));

【解决方案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

【讨论】：

刚刚添加到 jsLiveReload 解决了这个问题：.pipe(gulp.dest(''));