gulp - synchronized gulp.pipe(gulp.dest) execution

Here's my challenge: I have two tasks, where Task B depends on Task A.

In Task A, one of the requirements is to loop through an array and then use gulp.dest, but it seems like Task B will be executed before Task A is completed.

The main goal of Task A is to load all the HTML files and inject each one into template.html.

https://i.stack.imgur.com/VPxpA.png

Answer №1

For this process, I rely on run-sequence from npm (check it out at https://www.npmjs.com/package/run-sequence).

In your gulpfile, the setup appears as follows:

gulp.task("dist-sequence", function() {
    return runSequence("dist-clean",
        [
            "dist-client-js", "dist-vendor-js", "dist-client-css", "dist-vendor-css",
            "dist-fonts", "dist-images", "dist-template", "dist-html"
        ],
        "dist-index-inject");
});

All tasks listed in runSequence execute in the order specified. In the example above, initiating the dist-sequence task triggers dist-clean first, then all tasks in the array run concurrently, and upon completion, dist-index-inject is executed.

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 disabled feature doesn't seem to be functioning properly with the <i> tag when using Font Awesome icons

I've designed a plunk where I'm trying to validate a form with a button featuring a font-awesome icon. The text field is mandatory and I'd like to disable the icon if no data has been entered. However, it seems that ng-disabled doesn't ...

How to automatically scroll to the bottom using jquery/css

I've recently developed a chatroom using li elements, but I'm encountering an issue where the chat doesn't stick to the bottom once it reaches a certain number of messages. I suspect it has something to do with the height settings, but I can ...

Tips for Waiting for Binding in an Angular 1.5 Component (No Need for $scope.$watch)

Currently, I am in the process of developing an Angular 1.5 directive and have encountered a frustrating issue related to manipulating data that is not yet available. Below is a snippet of my code: app.component('formSelector', { bindings: { ...

Display the Image Element in Angular only when the image actually exists

In my HTML code, I have two sibling elements - one is an image and the other is a div. I want to display the image element if the image exists, and show the div element if the image doesn't exist. Here's how my elements are structured: <img ...

Exploring the process of retrieving MongoDB documents with methods such as findOne() or find() in Node.js, particularly when the models and schema are contained in a separate file

As someone who is new to node, MongoDB, and coding in general, I'm currently working on a project involving the creation and storage of documents in MongoDB using Mongoose. Initially, all my models and schemas were housed in the app.js file, allowing ...

Removing values when disabling a button using JavaScript

Within my code, I have two tables - one for non-clickable teams and another for clickable matches. Check out the image of the tables View the code on my GitHub repository let teams = [ {name: 'Roma', points: 0, wins: 0, draws: 0, loses: ...

Understanding the functionality of scope in AngularJS is essential for mastering the framework

Why does this code work? app.controller("ctrl", function($scope){ $scope.From = "Santa"; $scope.To = "Claus"; }); And why doesn't this one work? app.controller("ctrl", function(scope){ scope.From = "Santa"; scope.To = "Claus"; }); ...

Looking to enhance the accessibility of a dynamically generated file by implementing the ability to expand and collapse sections as parent nodes

Currently working on a webpage where I am showcasing a testsuite file as the parent node and test cases within the testsuite file as child nodes. I have added checkboxes to both the parent and child nodes. Now, my goal is to include an ex ...

Quoting Properties in Javascript Objects

If we have the object below: var ObjectName = { propertyOne: 1, propertyTwo: 2 } Do we need to include quotes around the object properties like this? var ObjectName = { 'propertyOne': 1, 'propertyTwo': 2 } Is the sol ...

Is it possible to manually trigger a version change transaction in IndexedDB?

I have been working on a Chrome extension that uses the IndexedDB to store data client-side in an IDBObjectStore within an IDBDatabase. The data structure requires users to be able to modify the object store freely, such as adding new objects or modifying ...

Running a script within an Ajax-rendered form using remote functionality in a Ruby on Rails

After clicking the following button, my form is rendered: = link_to 'New Note', new_note_path, :class => "btn btn-primary new-note-button", :type => "button", :id => "new-link", remote: true The form is rendered using the script below ...

What can be done to avoid causing other elements to blur when clicking a button?

Imagine a scenario where there is a textarea and a button present. If the button is clicked, typically the textarea will blur. However, in this case, I do not want that to happen. I am seeking advice on how to prevent the textarea from blurring u ...

Using jQuery in Yii: Detecting when a radio button loses its checked state

Here is the code regarding the issue at hand: <script> $(function(){ $('#widgetId-form input[name="valueType"]').change(function(){ if ($(this).is(":checked")) { console.log("enabling "+$(this).data("class") ...

Determine whether the color is a string ('white' === color? // true, 'bright white gold' === color? // false)

I am facing an issue with multiple color strings retrieved from the database. Each color string needs to be converted to lowercase and then passed as inline styles: const colorPickerItem = color => ( <View style={{backgroundColor: color.toLowerC ...

Is it possible to automatically submit a form at regular intervals without reloading the page and simultaneously insert the submitted data into

I am attempting to automatically submit a form every x number of seconds without refreshing the page and then insert the input data into a MYSQL database. The problem I'm facing is that while I can successfully insert the form's input value into ...

Transmitting HTML5 application settings via URL

I am interested in creating an HTML5 app that utilizes the WebAudio API. This app will allow users to customize certain parameters. Users should be able to 'share' these settings by sending a share URL, which can be clicked by others to view the ...

Having issues incorporating Redux into React Native application

Struggling to make a small app work in React Native with Redux. It was functioning fine without Redux, but after attempting to integrate Redux, it now shows a blank white screen and a loading message. I want to avoid using classes and stick to functional p ...

Guide to incorporating a jade file into a node.js application after executing an Ajax request

While working on my node.js application, I encountered an issue with loading a new HTML file using Ajax on a button click. Despite everything else working perfectly, the new HTML file was not being loaded. This is how I am making the ajax call in my main. ...

What are the steps to generating and sharing 'npm create' scripts?

I am looking to develop and release a script on npm that functions similarly to: npm create qwik@latest or yarn create next-app --typescript However, I am unsure where to begin. Despite searching extensively online, I have not been able to find any helpf ...

Is there a way to prevent text from overlapping a Material UI React Textfield when it is scrolled up and set to position sticky?

Scenario: In my chat application, I have the chat displayed in the middle of the screen with a sticky textfield at the bottom. My goal is to ensure that when users scroll through the chat messages, the textfield remains at the bottom but appears on top of ...