The callback for the changed event in gulp fires ahead of the watch tasks

I'm having an issue with the sequence of tasks running in my file watching code. Although I have specified that the 'build-dev-mainjs' task should run first, followed by $.livereload.changed, it seems to be happening in the opposite order.

 // synchronous
gulp.task('build-dev-mainjs', ['jshint', 'clean'], function() {
    console.log('inmaindevjs');
    return gulp.src(['app/client/scripts/*.js',
                'app/client/bower_components/**/*.js'])
    .pipe(gulp.dest('public/assets/scripts'));
});


gulp.watch('app/client/scripts/**/*.js', ['build-dev-mainjs'])
    .on('change', $.livereload.changed);

The reason for this desired behavior is that after each change, the build-dev-mainjs task is supposed to copy the files into the dist folder, from which the server then serves the files.

javascriptbuildgulp

Answer №1

Set up the gulp extension: run-sequence

Check out this demonstration on how to utilize it:

// The following tasks will execute in this sequence:
// * build-clean
// * build-scripts and build-styles concurrently
// * build-html
// * Lastly, invoke the callback function
gulp.task('build', function(callback) {
  runSequence('build-clean',
              ['build-scripts', 'build-styles'],
              'build-html',
              callback);
});

This approach should organize things efficiently.

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

What is the best way to eliminate HTML <li> bullets using codebehind?

When working in codebehind, I often create an HTML list using the following method: HtmlGenericControl list = new HtmlGenericControl("ul"); for (int i = 0; i < 10; i++) { HtmlGenericControl listItem = new HtmlGenericControl("li"); Label textLabel ...

javascriptcsshtml-listscode-behind

Exploring the power of jQuery closures and handling events like mouseover and mouseout

I'm currently grappling with the concept of utilizing closures in conjunction with jQuery event functions. The challenge I am facing involves creating rounded shapes on the screen that stop and fade when hovered over, then resume fading when the mous ...

javascriptjqueryeventsclosures

Failed to fetch http://localhost:8000/Stack/script.js due to network error 404 in Django project

As I embark on creating a simple to-do app, I encountered an error while trying to implement some JavaScript on the homepage. The error in question is highlighted above (Get http://localhost:8000/Stack/script.js net:: Err_Aborted 404). Being new to integra ...

javascriptdjangogetstatic

Eradicate HTML by assigning empty values to certain attributes

Allowing the user to copy the HTML code of a div by clicking a button. Some attributes, such as for videos: <video loop muted autoplay> may appear like this after copying: <video loop="" muted="" autoplay=""> The ...

javascripthtml

Is it possible to utilize various providers in Next-Auth while still maintaining the same email address?

I am currently developing a Next.js application using NextAuth. At the moment, I have implemented login functionality with Google, credentials, and GitHub. However, I encountered an issue where if a user logs in with Google using the email "[email pro ...

javascriptnext.jsnext-auth

Check Image Dimensions prior to Image Loading

I've been working with JQuery Masonry and would like to incorporate Lazy Load using a WordPress plugin to load images only when they come into view. The issue I'm facing is that when Lazy Load is used, the masonry elements don't recognize t ...

javascriptjquerylazy-loadingjquery-masonryimage-size

Tips for renaming input file before uploading to a new destination

Instead of using the original name, I would like to replace the image that the user wants to upload with my own pattern. I understand that it's preferable to change the file name on the server, but unfortunately, I am unable to do so for certain reaso ...

javascripthtmlreactjs

Effectively controlling two distinct Azure resources within one domain name through domain routing

I am currently in the process of deploying a React application on Microsoft Azure that includes a basic content management feature. Essentially, when users visit the website and access static content, the app retrieves HTML code from a database and display ...

javascriptreactjsazureazure-blob-storage

Using multiple main.js files with RequireJs in Play Framework 2.1.1 Java: A step-by-step guide

While working on a single-page app with AngularJs + RequireJs in Play Framework 2.1.1, I encountered an issue regarding the structure of my application. The project consists of two main sections - an admin dashboard and a normal website - both housed withi ...

javascriptangularjsrequirejsminifyplayframework-2.1

Partial functionality achieved by integrating Bootstrap for a modal form in Rails

Having an issue with a form in a partial view on Rails 3.2.3 utilizing the bootstrap 2.0.2 modals #myModal.modal .modal-header .close{"data-dismiss" => "modal"}= link_to "x", root_path %h3 Add Tags .modal-body = form_tag '/tagging& ...

javascriptruby-on-railsajaxformstwitter-bootstrap

An error occurred when attempting to set state within a nested fetch

Having difficulty solving an issue with react.js. loadFromServer(pageSize) { fetch('http://localhost:8080/api/employees') .then(response => { return fetch('http://localhost:8080/api/profile/employees', ...

javascriptreactjs

What is the best approach to managing a 204 status in Typescript in conjunction with the Fetch API

Struggling to handle a 204 status response in my post request using fetch and typescript. I've attempted to return a promise with a null value, but it's not working as expected. postRequest = async <T>(url: string, body: any): Promise ...

javascripttypescriptfetch

Retrieve data with a web API

I am currently developing a web API to fetch data from a mock database using express My goal is to retrieve a JSON list containing all portfolios and their corresponding positions from the database module. Is there a way to structure the returned data so ...

javascriptnode.jsexpress

Fade out and slide close a div using jQuery

I am creating a new website and incorporating jQuery for animation and simplified JavaScript implementation. My goal is to have a button that, when clicked, will close a div with a fading out and slide up effect. Can this be achieved? Thank you. ...

javascriptjqueryhtmlcss

Creating a Three.js 3D Text Effect with Layers of Letters

Why are my 3D text letters overlapping in the threejs TextGeometry when viewed from an angle? https://i.sstatic.net/W0ocu.png See the code snippet below: class MyScene { // Code for handling Three.js scene and elements constructor(elementSelector ...

javascriptthree.js

Component cannot be shown on the screen

<template> <div v-for="corpus in getCorpora" v-bind:key="corpus.id"> <Corpus v-bind="corpus" /> </div> </template> <script> import Corpus from "../components/Corpus"; impor ...

javascriptvue.js

Having trouble with the API authentication call, receiving a "Failed to load resource: net::ERR_CONNECTION_REFUSED" error message

I am facing an issue with my Vue and .net application. Whenever I run "NPM start serve," it successfully builds the app. The app is running locally at: http://localhost:8080/ However, when I attempt to log in, I encounter the following error: Console err ...

javascriptc#.netvue.jsroutes

Node.js for Streaming Videos

I am currently working on streaming video using node.js and I recently came across this helpful article. The setup works perfectly when streaming from a local source, but now I need to stream the video from a web source. However, my specific requirement i ...

javascriptnode.jsvideostreamingvideo-streaming

Continuously receiving unhandled promise rejection errors despite implementing a try-catch block

Every time I run my code, I encounter the following issue: An UnhandledPromiseRejectionWarning is being thrown, indicating that a promise rejection was not properly handled. This can happen if you throw an error inside an async function without a catch bl ...

javascriptnode.jsparsingpromiseparse-platform

Transferring a list of files from Callback folder

I am struggling with a function that is supposed to retrieve and list all the files in a specific folder. However, I am facing issues when trying to push out these files through an array. Something seems to be going wrong in my code as I receive an error w ...

javascriptnode.jsexpressfs