What is the best method for bringing in gulp tasks?

After reading this article: https://css-tricks.com/combine-webpack-gulp-4/

And exploring this repository: https://github.com/PascalAOMS/gulp4-webpack

I'm currently facing a challenge where I am attempting to import gulp tasks from one file into another. My initial approach was to define the tasks as functions and then export them in a standard way, but this led to an error stating "Did you forget to signal async completion?". Alternatively, I tried enclosing the tasks within a function and exporting that, only to encounter the same error.

To provide more context, my main goal is to understand how to incorporate tasks into the build gulp.series featured in this particular file https://github.com/PascalAOMS/gulp4-webpack/blob/master/tasks/index.js

Does anyone have any insights or suggestions on how to tackle this issue?

Below is a snippet of the index.js file:

 import gulp from 'gulp';
 import { scripts } from './webpack';
 import { server }  from './server';
 import { assets } from './tasks/assets';

 export const dev   = gulp.series( server )
 export const build = gulp.series( scripts, assets )
 export default dev

Here is an example of the asset task for reference:

import gulp from 'gulp';
const assets = () =>  {
   return gulp.src(fonts.src)
      .pipe(gulp.dest(fonts.dist));
}
export { assets };

Answer №1

Unexpectedly, this code is now functioning correctly. I am leaving it here in the hope that it could assist someone else:

main.js

import gulp from 'gulp';
import { scripts } from './webpack';
import { server }  from './server';
import { assets } from './tasks/assets';

export const dev   = gulp.series( server )
export const build = gulp.series( scripts, assets )
export default dev

task/assets.js

import gulp from 'gulp';
const assets = () =>  {
   return gulp.src(fonts.src)
      .pipe(gulp.dest(fonts.dist));
}
export { assets };

Answer №2

It is recommended to use CommonJs instead of ES6 modules when running with node, as node does not yet fully support ES6 modules.

For example,

import { scripts } from './webpack';

can be replaced with

const scripts = require(./webpack).scripts;

and

export {assets};

can be replaced with

module.exports = {
 assets
}

An alternative solution would be to transpile your configuration using a tool like babel first.

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

Issues with AngularJS Directives not functioning properly when elements are added dynamically through an AJAX request

I am facing a scenario where I have a page featuring a modal window that is created using the AngularUI Bootstrap modal directive. The DOM structure for this modal is being dynamically loaded from the server, and it is triggered to open when a specific but ...

Struggling with TypeScript and JsObservable? Let us assist you!

Having previous experience with JSRender, JSViews, and JSObservables, I recently embarked on a new project using TypeScript. Unfortunately, I am struggling to understand how to properly utilize TypeScript in my project, especially when it comes to referenc ...

If an AngularJS Form Item is hidden with jQuery's hide() method, will it still be validated?

Even though we're in 2020, I'm still working with AngularJS 1.x instead of the newer version due to work requirements. Despite this limitation, I am facing a challenge with setting up a form that requires exclusive-or validation between two field ...

Ensuring Code Execution Order in NODE.JS

I've encountered an issue with my code that involves parsing a pcap file, storing the data in an array data = [], and then writing it to a JSON file: var fs = require("fs"); var pcapp = require('pcap-parser'); var hex = ""; var data = []; v ...

Tips for monitoring input content "live"

Currently, I am in the process of developing a web form that includes a text field intended to receive numeric values. If the user enters non-numeric characters into this field, the form will not submit. However, there is no error message displayed to noti ...

Display a JavaScript object as a table in an HTML document using HTML elements

I am having trouble displaying the results of sorting an associative array in JavaScript in an HTML table without using PHP. The sorting itself is working correctly as I can see the results in the console, but the table is not showing up. Below is the code ...

Working with session ID and Ajax in JavaScript

Recently, I've discovered that my website is experiencing issues on various versions of Internet Explorer. Despite conducting thorough research, it appears that cookies are not functioning properly when accessed through IE, although they work without ...

Navigating through different components in Angular without using templates

Searching for a straightforward solution using Angular to manage routes. I have a webpage generated by the server featuring a basic Google map and some logic spread across three separate controllers. Now, I aim to integrate routing into this setup. Nothi ...

How can the value of a number in Angular be changed without altering its original value?

Imagine having the initial number 100. If I enter 50 in another input, it should add 50 to 100. However, if I then change the value from 50 to 80, the total should be 180 and not 230. The goal is always to add numbers to the original sum, not the new valu ...

Having trouble importing OrbitControls in three.js with an error?

I'm currently working on localhost and I've encountered an issue while trying to import "orbitcontrols()" which is not functioning properly and displaying an error. Here is the error message main.js:1 Uncaught SyntaxError: Cannot use import stat ...

Printing documents from a database using Mongoose version 7.3.1: A comprehensive guide

Currently, with Mongoose 7.3.1, I have inserted some documents into the MongoDB database. However, when I try to log these documents using console.log() by using Fruit.find({}) and outputting it to the console, I get a massive dataset of unwanted objects. ...

Upon executing the click() command, Selenium fails to fetch the updated page_source

The given code is functioning as intended for the first loop. Upon reaching the second page, however, the displayed results remain the same as those from the initial loop. Initially, the first loop produces desired outcomes. url_city = "https://www.tripad ...

Steps to develop a customized form generator using user-provided data

I have been working on developing a dynamic form that generates different levels of content based on user input. For instance, if the user types in "3" for the number of levels, three sets of questions will be created with similar prompts. Each level will ...

The functionality of toLowerCase localeCompare is restricted in NuxtJs VueJs Framework

Encountered a peculiar issue in NuxtJs (VueJs Framework). I previously had code that successfully displayed my stores in alphabetical order with a search filter. When I tried to replicate the same functionality for categories, everything seemed to be work ...

Custom mute bot using Discord.js with the ability to specify duration and provide a reason

I'm creating a discord.js mute bot and encountering some issues with its functionality. Is there a way to program it so that when someone types the command !mute User, it automatically sets the time to 30min and the reason as No reason Specified. How ...

Is it considered acceptable in React for the value of one state to be determined by another state?

Consider this scenario: state1 tracks the mouseover of clientX and clientY, while state2 retrieves the value from state1 upon clicking. Is this implementation acceptable? const [move,setMove]=useState([]) const [click,setClick]=useState([]) useEffect(() ...

Acquiring MySQL information and storing it in a variable array

Currently, I am retrieving data from MySQL with $username and $chance. The data contains two usernames but only the first one is being loaded. var data = [ { "name" : "<?php echo $username; ?>", "hvalue" : <?php echo $chan ...

JavaScript now assigns a value of null in place of undefined

When working with JavaScript, it's important to understand that undefined can be reassigned. Because of this, it is recommended to create a self-executing function to ensure that undefined remains undefined. Are there any other values that are loosely ...

Encountered an issue while trying to create a database using JS, Node, and SQ

Although I have come across similar Stack questions addressing my issue, the provided answers don't seem to work for me. I want to create a small database to manage all of my storage items. After hearing that SQLite is user-friendly and lightweight, ...

I specified Authorization Bearer in the Fetch API configuration, however, the Request Headers do not contain the necessary Authorization information

Check out the following code snippet: fetch('http://localhost:3000/tasks/', { method: 'GET', mode: 'no-cors', headers: new Headers({ 'Authorization': 'Bearer <jwt_token>' ...