gulp livereload 不工作

Question

我在安装以下 gulp 软件包后遇到了这个奇怪的问题。一切都呈现得很好，但是当它到达 liveReload() 的一部分时，它只是不重新加载页面...

我安装了 livereload chrome 扩展（有必要吗？），似乎没有什么可配置的...

这是我的gulp文件：

var gulp = require('gulp'),
    autoPrefixer = require('gulp-autoprefixer'),
    jade = require('gulp-jade'),
    liveReload = require('gulp-livereload'),
    sourceMaps = require('gulp-sourcemaps'),
    ts = require('gulp-typescript'),
    tsLint = require('gulp-tslint'),
    watch = require('gulp-watch'),
    sass = require('gulp-sass');

// Configuration
var config = {
    js: 'public/_assets/frontend/js',
    css: 'public/_assets/frontend/css',
    fonts: 'public/_assets/frontend/fonts',
    images: 'public/_assets/frontend/img',
    markup: 'public/'
};

// Javascript
gulp.task('scripts', function() {
    var tsResult = gulp.src(['src/ts/*.ts', 'src/ts/**/*.ts'])
        .pipe(tsLint())
        .pipe(ts({
            noImplicitAny: true
        }));

        tsResult.js
            .pipe(gulp.dest(config.js))
            .pipe(liveReload());
});

// Sass
gulp.task('sass', function() {
    return gulp.src(['src/sass/*.scss', 'src/sass/**/*.scss'])
        .pipe(watch(['src/sass/*.scss', 'src/sass/**/*.scss']))
        .pipe(sourceMaps.init())
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(autoPrefixer({
            browsers: ['last 3 versions'],
            cascade: false
        }))
        .pipe(sourceMaps.write())
        .pipe(gulp.dest(config.css))
        .pipe(liveReload());
});

// jade
gulp.task('markup', function() {
    return gulp.src(['src/**/*.jade', 'src/**/_*.jade'])
        .pipe(jade({
            pretty: true
        }))
        .pipe(gulp.dest(config.markup))
        .pipe(liveReload());
});

// Images
gulp.task('images', function() {
    return gulp.src(['src/images/**/*.*', 'src/images/*.*'])
        .pipe(gulp.dest(config.images));
});

// Watch
gulp.task('watch', function() {
    liveReload.listen();
    gulp.watch(['src/ts/*.ts', 'src/ts/**/*.ts'], ['scripts']);
    gulp.watch(['src/sass/*.scss', 'src/sass/**/*.scss'], ['sass']);
    gulp.watch(['src/*.jade', 'src/**/*.jade'], ['markup']);
});

// Default Task
gulp.task('default', function() {
    gulp.start('sass', 'scripts', 'markup', 'images', 'watch');
});

一切正常，gulp 正在做这件事并呈现我的所有文件，但页面不会重新加载...我在端口上使用 python 简单的 http 服务器8000.

有什么想法吗？

Answer 1

我唯一想到的是：您是否将 livereload 客户端脚本包含到您的页面中？据我所知，您应该在页面主体的末尾插入此脚本。

<script src="http://localhost:35729/livereload.js"></script>

Answer 2

您可以使用

Live Reload Browser Page

GitHub

Live Reload Browser Page 是一种非常灵活的浏览器页面实时重新加载工具。

gulp livereload 不工作

gulp livereload not working

javascript

python

gulp

gulp-watch