Incorporating two different gulp tasks into a default configuration

I am encountering a challenge with my gulp 'default' task, which is designed to clean a folder before proceeding with the minification of CSS and JS files. The issue arises when I try to ensure that the 'clean' task runs only once per default task. In my gulpfile, I have included various plugins such as gulp-clean, gulp-less, gulp-util, etc.

var gulp = require('gulp');

// including our plugins
var clean = require('gulp-clean');
var less = require('gulp-less');
var util = require('gulp-util');
// more plugin imports

// DEFAULT TASK
gulp.task('default', ['clean'], function() {
    .pipe(gulp.task('vendor'))
    .pipe(gulp.task('css'))
});
// clean task removes contents from public folder before build
gulp.task('clean', function() {
    return gulp.src('public/**', {read: false})
    .pipe(clean());
});
// javascript vendor builds
// more tasks defined in this section

Individual tasks like "gulp css" and "gulp vendor" work properly on their own. However, when I combine them into a default task with a prerequisite of running the 'clean' task first, I encounter issues. Can anyone provide insight on what might be wrong with my approach?

-Tony

Answer №1

Here are some recommendations for your tasks:

gulp.task('clean', function() {
    // Add your cleaning code here
});

gulp.task('vendor', ['clean'], function() {
    // Include your 'vendor' code here
});

gulp.task(‘css’, ['clean'], function() {
    // Add your 'css' code here
});

gulp.task('build', [‘vendor’, ‘css’]);

gulp.task('default', ['build']);

'vendor' and 'css' will be executed concurrently only after 'clean' has completed. Despite being a prerequisite for both 'vendor' and 'css', 'clean' will run only once.

Answer №2

One problem arises when calling the default task in Gulp - the tasks are randomly chosen to run in a certain order:

gulp.task('default', ['clean', 'move', 'scripts', 'css']);

To address this issue, it is recommended that each task has dependencies. For example, the move task should only be executed after the clean task. Therefore, the move task should be defined as follows:

gulp.task('move', ['clean'], function () { //your code }

For further clarification and explanation, please refer to: https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulptaskname-deps-fn

Apologies for any inadequacies in my English skills :-)

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

One-page website featuring a scrolling layout and a stable, constantly updating footer

My goal is to create a single-page, scrolling website that features an array of images with corresponding captions fixed at the bottom of the page. I plan on using unique image IDs to trigger a hide/show event as each image approaches a certain distance fr ...

What is the method to create a link that doesn't take up the entire page?

As a beginner in HTML, I have been working on a website for fun and facing an issue with buttons. When I add a button, the entire area becomes clickable, even if there is empty space around it. This means that you can click on the left or right side of the ...

Creating a Radial/Pie Menu using CSS3: A Step-by-Step Guide

I am interested in creating a radial menu using CSS3 transforms animations, similar to the example shown on this Wikipedia page or the flash version demonstrated on this website. Although there is a jQuery implementation available using canvas called Radme ...

Editable content <div>: Cursor position begins prior to the placeholder

Having an issue with a contenteditable div where the placeholder text starts behind the cursor instead of at the cursor position. Any suggestions on how to correct this? <div id="input_box" contenteditable="true" autofocus="autofocus" autocomplete="o ...

Unlocking Heading Options (h1, h2, h3, h4) in my JavaScript-powered rich text editor

I have nearly completed the development of a basic text editor. Users are able to write in an iframe and customize their text by making it bold, italic, etc. However, I am struggling to apply the same customization options to headings. My goal is to enabl ...

When Safari injects elements that were previously hidden with display:none, they remain visible

Using the JS library MagnificPopup, I implement popups on my website triggered by a "read more" button. This library moves the html to display it in a different location and then injects it back when the popup is closed. While this functionality works seam ...

How can I incorporate checkboxes and crosses for validation in AngularJS?

I've been searching through the documentation for angularjs and online resources, but I can't seem to find any information regarding a specific aspect of form validation. You know when you input something in a form field (like a name, phone numbe ...

What is the method for adding color to the select and option fields?

On my website, I have created a contact form and I am trying to customize the select field by adding colors like other fields. However, when I choose an option from the select field, it is not showing up. Can you please help me identify what mistake I migh ...

Tips for creating a continuous display of multiple scrolling images in HTML

This is the full HTML and CSS code Here is the CSS for creating a scrolling images effect. <style> * {margin: 0; padding: 0;} body { background-color: #666; } ...

Conceal the scrollable content beneath a stationary transparent header, allowing the background to

Imagine having a background image, fixed header with transparent areas, a content div with semi-transparent background, and dynamic height in a traditional header/content/footer layout. The desired effect is to have the background and content scroll under ...

Styling text on top of an image using CSS

I am attempting to overlay text on top of an image using the following code: .gallery-image { position: relative; } h2 { position: absolute; top: 200px; left: 0; width: 100%; } h2 span { color: white; font: bold 24px/45px Helvetica, Sans-S ...

Issue with Table Content Being Truncated After Conversion from HTML to MS Word 2003

I am experiencing an issue where the table content is being cut off on the right side of the page when converting from an HTML page into MS Word 2003. Below is a sample HTML code (where placeholder $CLOB_DATA will be replaced by large CLOB data): <html ...

How to position two Bootstrap 4 Navbars side by side

I'm currently experiencing an alignment issue with two stacked navbars in my code. I want to align the upper navbar with the lower one, but I've tried various approaches without much success. Is there a problem with the buttons or something else ...

Step by step guide on inserting a message (memo/sticky note) onto an HTML page

Wondering how to accomplish this: I've designed an HTML5 homepage and I'm looking to display a message to visitors, such as "Dear visitor, I am currently on vacation from....", in the form of a memo or sticky note positioned in the top right cor ...

Can one look through a div to the one beneath it by moving the cursor?

Hey there! I have a unique question for you. I've been trying to achieve a specific effect where two divs are stacked on top of each other, and the content of the lower div is only revealed in a certain area around the cursor. Is it possible to make o ...

Creating various rows within a loop can be achieved by using conditional statements to determine

I am faced with a challenge of handling an array of images, among other properties, and I aim to achieve the following outcome: https://i.sstatic.net/BYajY.png As the images reach the end of the container (which fits 4 images on desktops and adjusts for ...

Adjust the size of dynamic images based on varying widths and heights

Currently, I am facing an issue with scaling images in the header sourced from a database. The dimensions of these images can vary but are limited to a maximum size of 2000x2000px. When attempting to scale these images, particularly those over 1000px, they ...

The Vue 3 page does not allow scrolling unless the page is refreshed

I am encountering an issue with my vue3 web app. Whenever I attempt to navigate to a page using <router-link to ="/Dashboard"/> Here is the code for Dashboard.vue: <template> <div class="enquiry"> <div class= ...

Ensure that all floating divs have uniform height

How can I ensure that two divs placed side by side will always have the same height, even when one of them changes based on content, using only CSS? I created a fiddle to demonstrate. I want both the red and blue divs to have equal heights... http://jsfi ...

Display a form inside a div when a button is clicked using jQuery

Currently, I am using Cloud 9 to develop a website. However, I have hit a roadblock when it comes to displaying and hiding my form. The issue lies with a fixed sidebar that includes a "Contact" button. Once this button is clicked, it should toggle the visi ...