watchify with gulp requires two saves to update modifications

For a while now, I've been experimenting with watchify and encountering a saving issue.

It appears that every time I make a change, I have to save twice for the modifications to reflect in the output.

If I add new code to any JavaScript file, the changes only take effect after running the task two times.

Snippet of my mainScripts-task code

var customOpts = {
      entries: ['./app/app.js'],
      debug: true
    };
    var opts = assign({}, watchify.args, customOpts);
    var b = watchify(browserify(opts));


    gulp.task('mainScripts', bundle);
    b.on('update', bundle);
    b.on('log', gutil.log);

    function bundle() {
      console.log('bundle');
      return b.bundle()
        .on('error', gutil.log.bind(gutil, 'Browserify Error'))
        .pipe(source('main.js'))
        .pipe(buffer())
        .pipe(gulpif(!condition, sourcemaps.init({
          loadMaps: true
        })))
        .pipe(gulpif(!condition, sourcemaps.write('./')))
        .pipe(gulp.dest('./dist/js/'))
        .pipe(gulpif(isLocal(), connect.reload()));
    }

The "watch"-task implementation

gulp.task('watch', function() {
  gulp.watch('app/**/*.js', ['mainScripts']);
});

Answer №1

When using watchify and gulp.watch together, they both monitor file changes which can lead to race conditions in creating the bundle.

To simplify your task, consider starting just your mainScripts task within the watch task:

gulp.task('watch', function() {
  gulp.start('mainScripts');
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The output of jquery's val() function will not show the actual value

Is it proper to use html() for setting content in non-form elements like divs? This question has come up a few times, which I wasn't aware of. I've been working on setting a value after fetching comments through a $.ajax call. When I check the v ...

Issue with IE7 Dropdownlist not appearing after changing class name when onFocus event is triggered for the first time

I need to adjust the CSS class of a dropdownlist when it is focused on, in order to change its background color. However, in IE7, when the dropdownlist is clicked, the CSS class changes but the options list does not appear until the dropdownlist is clicke ...

Tips for retrieving the clicked word in JavaScript

Is it possible to retrieve the word that was right-clicked on along with its x, y coordinates? I attempted the following code:document.onclick=getTextOnClick; function getTextOnClick(e) { console.log(e); if (window.getSelection) { txt = wi ...

What is the technique for defining sub paths in React-Router-Dom by excluding the parent path?

Imagine a Profile page that displays different components based on the path it receives. For example: /profile/posts will show the Posts component within Profile. /profile/comments will display the Comments component inside Profile. Typically, the Profi ...

Unexpected behavior: Angular4/Javascript Date object alters when timezone is specified in Date constructor

In my Angular 4 application, I encountered an issue with a date retrieved from an API call. The date is in the format '1990-03-31T23:00:00-06:00' and when attempting to create a Date object and retrieve the month using getMonth(), it returns the ...

How to set a default option in a dropdown menu using Angular 4

Many questions have been raised about this particular issue, with varying answers that do not fully address the question at hand. So here we go again: In my case, setting the default value of a dropdown select by its value is not working. Why is that so? ...

The method of inserting a JSON dates object to deactivate specific days

I am currently utilizing a date picker component that can be found at the following link: While attempting to use the disabledDays section below, I have encountered an issue where I am unable to apply all three options. The blockedDatesData option works o ...

Utilizing NodeJS and the s3-uploader module for AWS S3 Image Uploading

I'm currently attempting to utilize the module https://www.npmjs.com/package/s3-uploader, but I'm struggling with implementing it properly. Can anyone guide me on how to make a POST request to my router? .post('/upload', ensureAuthenti ...

Issue with implementing jQuery tab functionality

I'm just starting to learn JS, HTML, and CSS, and I could use some guidance on setting up jQuery tabs. Currently, I'm encountering an error that says "Uncaught TypeError: $(...).tabs is not a function". Any help would be greatly appreciated. Than ...

Child component destruction triggers an ongoing digestion process

I am facing a strange issue within my AngularJS application. The error I'm encountering is the common $digest already in process error. Despite searching online and reviewing similar questions, none of the proposed solutions have resolved the issue. T ...

Is it feasible to programmatically click a div button in C# using WebBrowser?

Exploring the capabilities of WebBrowser in C#, I came across a website that features a button without an ID, but rather nested within a div element. <div class="pc-image-info-box-button-btn-text pc-cursor"><i class="fa fa-heart" aria-hidden="tru ...

Husky 5: The Ultimate Gitignore Manager

Last week, a new version of Husky was released, known as Husky 5. I came across an interesting article discussing the features and updates in this release that can be found here. Upon migrating to Husky 5 (), I discovered a new directory named .husky with ...

The jssor slider cannot be initialized when it is loaded through ajax requests

Incorporating jQuery's .load() function, my website dynamically loads the HTML code for the jssor slider. To verify the functionality of my code, I have developed a duplicate page which already includes the necessary slider code without utilizing an a ...

Stopping a function when another function is invoked in JavaScript

I've been immersing myself in the search for a way to halt one function if another is called or triggered in JavaScript. Initially, I believed it to be unattainable, but I'm open to having my perspective changed. My current focus lies within a t ...

Steps to update the active state in the "reducer" when clicking on elements outside of the "reducer" area

Working with react-redux has presented some challenges for me. I've created multiple reducers such as action, root reducer, active_step reducer, and list_step reducer. One aspect that I find intriguing is the ability to dynamically map and change the ...

Changing a button's text in Vue.js when holding a keyboard modifier - how to do it!

While working with Vue, I am attempting to modify a button's behavior when the Shift key is pressed. Adjusting the behavior of the click event was straightforward: @click.exact="goForward" @click.shift="goBackward" However, I am f ...

Trouble with AngularJS: Updates not reflecting when adding new items to an Array

I am facing a persistent issue that I have been unable to resolve, despite researching similar problems on StackOverflow. My current project involves building an application with the MEAN stack. However, I am encountering difficulties when trying to dynam ...

Begin by running the command to start a local http-server

After cloning angular seed, I found that it is using node's http-server and functioning flawlessly with the specified configuration. To start the server, simply run: npm start (from the root of the project) The necessary configuration can be found ...

Invoking Ajax Within Every Loop

I am creating dynamic HTML buttons where, upon pressing each button, I want to make an AJAX call to retrieve a value. However, I am encountering an issue where I get as many console outputs as the number of buttons pressed. Here is my PHP code: if(isset($ ...

Increase value by 1 with the push of a button within two specified ranges using JavaScript

I am looking to create buttons that will increase the value of both the first and second range by 1 when pressed, as well as decrease the value of both ranges by 1 when pressed. Here is my code: function run(){ var one = document.getElementById("rang ...