how to setup gulp file for live reload

Question

I am trying to add a couple of gulp tasks. I have a basic HTML site that I want to watch changes for and reload with updated changes. I am trying to use livereload to listen and changed. however when it reloads i get an error that the Port is already in use which makes sense. But I cannot find a solution. First time to use Gulp so any tips on making what I have done better is welcome

    var gulp = require('gulp');
var livereload = require('gulp-livereload');
var rev = require('gulp-rev');
var clean = require('gulp-rimraf');
var runSequence = require('run-sequence').use(gulp);
var connect = require('gulp-connect');

gulp.task('build', function () {
  // by default, gulp would pick `assets/css` as the base,
  // so we need to set it explicitly:
  return gulp.src(['assets/css/*.css','assets/css/**/*.css', 'assets/js/*.js', 'assets/js/**/*.js', 'assets/js/**/**/*.js', 'assets/img/**/*.jpg', 'assets/img/**/*.png'], { base: 'assets' })
    .pipe(gulp.dest('build/assets'))  // copy original assets to build dir
    .pipe(rev())
    .pipe(gulp.dest('build/assets'))  // write rev'd assets to build dir
    .pipe(rev.manifest())
    .pipe(gulp.dest('build/assets')); // write manifest to build dir
});

gulp.task('copy', function () {
  gulp.src('index.html')
    .pipe(gulp.dest('build'));
  gulp.src('assets/fonts/*.*')
    .pipe(gulp.dest('build/assets/fonts'));
  gulp.src('assets/fonts/revicons/*.*')
    .pipe(gulp.dest('build/assets/fonts/revicons'));
});

gulp.task('clean', [], function() {
  return gulp.src("build/*", { read: false }).pipe(clean());
});

gulp.task('watch', function () {
  livereload.listen(35729, function(err) {
    if(err) return console.log(err);
  })
  gulp.watch(['index.html', 'assets/css/*.css','assets/css/**/*.css', 'assets/js/*.js', 'assets/js/**/*.js', 'assets/js/**/**/*.js', 'assets/img/**/*.jpg', 'assets/img/**/*.png'], [], function (e) {
    livereload.changed(e.path, 35729)
  });
});

gulp.task('connect', function() {
  connect.server({
    host: '0.0.0.0',
    root: 'build',
    port: 8000,
    livereload: true
  });
});

gulp.task('default', function() {
  runSequence(
    'dist',
    ['connect', 'watch']
  );
});

gulp.task('dist', ['clean'], function () {
  gulp.start('build');
  gulp.start('copy');
});

score 0 · Answer 1 · answered Nov 18 '19 at 18:57

You may want to check on your host if any process has been running on port - 35729. You can kill that process and try to rerun this application. Find and kill process

or

you can try with different port number than 35729 in your code.

Hope this would help.

how to setup gulp file for live reload

1 Answers1