Почему livereload не работает?

Question

[varvar222]

var gulp = require('gulp'),
	rigger = require('gulp-rigger'),
	rimraf = require('rimraf'),
	connect = require('gulp-connect'),
	sass = require("gulp-sass"),
	sourcemaps = require('gulp-sourcemaps'),
	babel = require('gulp-babel'),
	uglify = require('gulp-uglify');

var htmlSources = ['app/*.html'],
	cssSources = ['app/css/**/*.css'],
	jsSources = ['app/js/**/*.js'],
	jsonSources = ['app/js/*.json'],
	allSources = htmlSources.concat(cssSources).concat(jsSources).concat(jsonSources);

var path = {
	dist: {
		html: 'dist/',
		js: 'dist/js/',
		css: 'dist/css/',
		img: 'dist/images/',
		fonts: 'dist/fonts/'
	},
	src: {
		html: 'app/*.html',
		js: 'app/js/**/*.*',
		jsWithoutCnM: ['app/js/**/*.*', '!app/js/components/*.*', '!app/js/modules/*.*'],
		css: 'app/css/**/*.*',
		sass: 'app/scss/**/*.scss',
		img: 'app/images/**/*.*',
		fonts: 'app/fonts/**/*.*'
	},
	watch: {
		html: 'app/**/*.html',
		js: 'app/js/**/*.js',
		css: 'app/css/**/*.*',
		sass: 'app/scss/**/*.scss',
		img: 'app/images/**/*.*',
		fonts: 'app/fonts/**/*.*'
	},
	clean: './dist'
};

gulp.task('html:build', function() {
	gulp.src(path.src.html)
		.pipe(rigger())
		.pipe(connect.reload())
		.pipe(gulp.dest(path.dist.html));
});

gulp.task('move:f', function() {
	gulp.src(path.src.fonts)
		.pipe(gulp.dest(path.dist.fonts));
});

gulp.task('move:js', function() {
	gulp.src(path.src.jsWithoutCnM)
		.pipe(gulp.dest(path.dist.js));
});

gulp.task('sass', function() {
	gulp.src(path.src.sass)
		.pipe(sourcemaps.init())
		.pipe(sass().on('error', sass.logError))
		.pipe(sourcemaps.write('./maps'))
		.pipe(gulp.dest('app/css'));
});

gulp.task('move:css', function() {
	gulp.src(path.src.css)
		.pipe(gulp.dest(path.dist.css));
});

gulp.task('move:img', function() {
	gulp.src(path.src.img)
		.pipe(gulp.dest(path.dist.img));
});

gulp.task('clean', function(cb) {
	rimraf(path.clean, cb);
});

gulp.task('babel:components', function() {
	gulp.src('app/js/components/*.js')
		.pipe(babel({
			presets: ['es2015']
		}))
		.pipe(uglify())
		.pipe(gulp.dest('dist/js/components'));
});

gulp.task('babel:modules', function() {
	gulp.src('app/js/modules/*.js')
		.pipe(babel({
			presets: ['es2015']
		}))
		.pipe(uglify())
		.pipe(gulp.dest('dist/js/modules'));
});

//local-server
gulp.task('server', function() {
	connect.server({
		port: 8882,
		root: 'dist',
		livereload: true
	});
});
//livereload
gulp.task('livereload', function() {
	gulp.src(allSources)
		.pipe(connect.reload());
});

gulp.task('move:other', gulp.parallel('move:f', 'move:css', 'move:img', 'move:js', 'babel:components', 'babel:modules'));

gulp.task('build', gulp.parallel('html:build','move:other'));

gulp.task('watch', function() {
	gulp.watch(path.watch.html, function() {
		gulp.parallel('html:build');
	});
	gulp.watch(path.watch.sass, function() {
		gulp.parallel('sass');
	});
	gulp.watch(path.watch.css, function() {
		gulp.parallel('move:css');
	});

	gulp.watch(path.watch.js, function() {
		gulp.parallel('move:js', 'babel:components', 'babel:modules');
	});
	gulp.watch(path.watch.img, function() {
		gulp.parallel('move:img');
	});
	gulp.watch(path.watch.fonts, function() {
		gulp.parallel('move:f');
	});

	gulp.watch(allSources, gulp.parallel('livereload'));
});
// Default task to be run with `gulp`
gulp.task('default', gulp.parallel('server', 'sass', 'build', 'livereload', 'watch'));

Comments

[varvar222]

Все пакеты обновлены. Gulp 4. Порт менял - не помогло.

[varvar222]

Он делает задачи на Whatch по 1 разу, и зависает потом на "Starting ''имя таска..."

Answer 1

[Роман Дворянов]

Если я все верно понял, поискав инфу на странице плагина gulp-connect, то релоад смотрит на изменениях в конечном html файле, соответственно его нужно ставить после компиляции/изменения файла в конечной папке