Activate Gulp watch to run task just one time

Question

Activate Gulp watch to run task just one time

I have integrated gulp-livereload to automatically refresh pages after modifying .js files.

Below is the code snippet:

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'));
});

The setup watches for changes in file.js.

Upon execution, the following output is generated:

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.

Currently, it only triggers a reload on the first save. Subsequent modifications do not trigger a reload.

How can I address this issue?

Just a reminder: I am utilizing the livereload chrome extension on Ubuntu 18.04.

javascript npm gulp gulp-watch

Answer 1

Answer №1

Assuming gulp is located in

/home/ksdmwms/Desktop/projs/others/tests/gulp_test

You can test the following code:

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']);
});

Please let me know if it works :) Have you given a shot to brwosersync?

Answer 2

Assuming gulp is located in

/home/ksdmwms/Desktop/projs/others/tests/gulp_test

You can test the following code:

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']);
});

Please let me know if it works :) Have you given a shot to brwosersync?

Answer 3

Answer №2

Browser-sync vs Gulp-live-reload

Check out 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'])

When running the serve task, keep an eye on gulp.watch.

Answer 4

Browser-sync vs Gulp-live-reload

Check out 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'])

When running the serve task, keep an eye on gulp.watch.

Activate Gulp watch to run task just one time

Answer №1

Answer №2

Similar questions

JavaScript error in the Electron browser is causing a glitch

Guide on how to update a div element without losing submitted information with the help of AJAX and PHP

The PurgeCSS CLI does not generate CSS files beyond the command line interface

Is it possible to animate captions and slides individually within a Bootstrap 5 carousel?

What is the process for sending a json response from a function?

Tips on how to render a component only after receiving an AJAX response

Using a carousel component in Bootstrap

Understanding the reverse order of numbers displayed with while loop and innerHTML

I'm looking for a way to incorporate JavaScript code within an iframe tag. Specifically, I'm attempting to embed code into a Wix website using the "Embed HTML

Internet Explorer does not return results when using AJAX during the onchange event (specifically for IE only

What is a callback function tied to a specific URL?

What characteristics do you use to distinguish a non-compiled language?

The async/await feature is not pausing for the completion of the async.map function call

What is the solution for addressing 42 vulnerabilities: 3 considered low severity, 15 moderate, and 24 deemed as high

Nothing happens when the render_template method receives AJAX content in Flask with Python and JavaScript

The module cannot be located, despite my efforts to reinstall and verify all addresses, the error still persists

Guide to importing firebase-functions and firebase-admin using ES6 syntax for transpilation with Babel in Node 10

Utilizing multiple materials with a single mesh in three.js: A comprehensive guide

How can global variables be effectively shared and edited between two separate runs of JavaScript nodes?

Validate with JavaScript, then display and submit