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.

仅当我保存了第一个更改时它才会重新加载，如果我进行了另一次更改而不重新加载。

我该如何解决？

注意：我正在使用 liverechrome扩展名和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实时重新加载

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只看一次任务

2 个答案: