Task runner file only processes the final file

My website utilizes LESS files and my gulpfile.js is structured as follows:

var gulp = require("gulp");
var fs = require("fs");
var less = require("gulp-less");
var watchLess = require('gulp-watch-less2');
var embedTemplates = require('gulp-angular-embed-templates');
var concat = require('gulp-concat');
var rename = require("gulp-rename");
var csso = require('gulp-csso');
var gutil = require('gulp-util');
var terser = require('gulp-terser');
var filesExist = require('files-exist');

function buildLess(arr, outputDir, outputName) {
    return gulp.src(filesExist(arr))
        .pipe(less().on('error', gutil.log))
        .pipe(rename(outputName + '.css'))
        .pipe(gulp.dest(outputDir))
        .on('error', gutil.log);
}

gulp.task('homepage', [], function () {
    return buildLess([
        "./css/homepage/reset.less",
        "./node_modules/components-font-awesome/css/font-awesome.min.css",
        "./node_modules/bootstrap/dist/css/bootstrap.css",
        "./css/bootstrap-callouts.less",
        "./css/homepage/global.less",
        "./css/fullpage-footer.less",
        "./node_modules/fullpage.js/dist/jquery.fullpage.min.css",
        "./css/Header.less",
        "./node_modules/angular-material/angular-material.css", // Only this exists on output file.
    ], './wwwroot/css/', 'homepage');
});

gulp.task('default', [
    'homepage'
], function () { });

The objective is to merge all these css\less files into a single CSS file located at wwwroot/css/homepage.css. However, upon inspection, it appears that only the last file in the list actually gets included in the output.

Noteworthy observations:

  1. Changing the last file in the list results in a corresponding change in the output file.
  2. All listed files do exist (confirmed using filesExist(lst)).
  3. No error messages are displayed on screen.

Versions of npm packages I'm using:

"devDependencies": {
    "gulp": "3.9.1",
    "gulp-less": "3.5.0",
    "gulp-watch-less": "^1.0.1",
    "gulp-watch-less2": "^2.0.4",
    "gulp-angular-embed-templates": "^2.3.0",
    "gulp-concat": "2.6.1",
    "gulp-rename": "1.4.0",
    "gulp-csso": "3.0.1",
    "gulp-terser": "1.1.7",
    "files-exist": "1.1.0"
}

What could be causing this issue?

Answer №1

Ah, just realized the issue - I forgot to concatenate the output.

Here is the corrected code:

function compileLessFiles(array, outputPath, outputFileName) {
    return gulp.src(checkExistingFiles(array))
        .pipe(less().on('error', gutil.log))
        .pipe(concat(outputFileName + '.css'))
        .pipe(gulp.dest(outputPath))
        .on('error', gutil.log)
        .pipe(config.production ? csso() : gutil.noop())
        .pipe(config.production ? rename(outputFileName + '.min.css') : gutil.noop())
        .pipe(config.production ? gulp.dest(outputPath) : gutil.noop());
}

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

Clicking a button will bring back the component to its assigned ID

How can I dynamically add a component <SaveTask/> to a specific div tag with the id of <div id="saveTask">? When I use this.setState(), it replaces the container and displays only the <SaveTask/> component. However, I want to re ...

Utilizing AngularJS and CSS selectors for effective form validation

Just a quick question: Can someone explain why the summary class is able to be directly added to the <span> element, but not the ng-classes onto the <form> tag? Could it be because the ng-classes are dynamically generated at runtime? What rul ...

In Internet Explorer 8, the functionalities of jquery animate() and slideUp() are not functioning properly

When it comes to animating the rows of a table using jQuery, I encountered an issue with IE8. While the animation works smoothly in FF, Safari, and Chrome, it fails to function in IE8 without showing any error messages for debugging purposes. To work arou ...

Avoiding leaps through the use of dynamic pictures?

Currently, I am implementing the picture element along with srcset to download the same image but in varying resolutions depending on the screen size of the device. The image has a style of max-width: 100%, causing it to shift the content below when downl ...

What is the best way to assign JSON data to a Class variable within Angular?

In my code, I have a class called Projects export class Projects { project_id: number; project_name: string; category_id: number; project_type: string; start_date: Date; completion_date: Date; working_status: string; project_info: string; area: string; add ...

Clicking the submit button in JavaScript will trigger a request to the Spring MVC backend,

When I use the following code, it gives me an object response: @RequestMapping(value = "/NewLogin",method = RequestMethod.POST) public @ResponseBody Token getAllBooks( Token token = new Token(); token.setValue(encryptedMessage); return toke ...

Deleting a property from a newly created element in CKEditor

Is there a way to remove the attribute/class of a newly created element using the enter key press event in CKEditor? The version of CKEditor I am using is 4.3 and here is the code snippet: <p placeholder="start here.." class='test'></p& ...

There was an error while trying to read the properties of undefined (specifically the state). Make sure to include this.state.a

I am struggling with an error that I have never encountered before. Despite having experience working with functional components, I am new to class components. I used create react app to install the application, but it seems like I might be missing a req ...

Loop causing AJAX response problem

I am looking to implement AJAX functionality that updates two separate elements: the clicked button class and a record in the database while looping through the results. Home <?php $q = mysqli_query($cn, "select * from `com`"); while ($f = mys ...

Script function in Google Sheets HTML not being called

Within my Google app, I have the following HTML code that is supposed to call a function below. However, I am not getting any response. This script has been used consistently throughout my code until now. <div id= "right_column"> <p> ...

Having trouble with installing Recharts through npm

When I try to install recharts using npm, I encounter the following error message in my console: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! ...

Developing a state object encompassing all the columns of a data table for sorting purposes in React JS

Trying to create a state object to maintain field names and sorting types (ascending/descending). Implementing server-side sorting by passing the column name and sort type (asc or desc). I have a component for a data table with click handlers to determin ...

Send backspace key press event to the applet and prevent it from continuing

I am struggling with a Java applet on my webpage that allows users to edit text. Whenever a user tries to modify the text by pressing the backspace button, the browser mistakenly forwards to the previous page. I attempted to filter out the backspace key pr ...

Deliver an assured result to a variable within the angular.extend() function

Can someone provide guidance on how to set myVar to a value returned from an asynchronous service method in the following example? angular.extend(this, { myVar: (function() { getVal(); })() }); function getVal() { var d = $q.defer(); ...

Guide on extracting a particular segment of JSON data and converting it to a string

Recently, I started delving into JSON, node.js, and JavaScript. My small node.js server pulls a JSON object (referred to as weatherData below) from openweathermap.org. My goal is to only display a specific part of the JSON object – the "temp" section. Cu ...

What is causing the counter to appear twice in the console with varying values?

Recently, I was exploring the React 'ref' feature and decided to experiment with the code snippet below. import { useEffect } from "react"; import { useRef } from "react"; import { useState } from "react"; const But ...

Best practice for incorporating Bootstrap into Webpack

Greetings everyone, I've been experimenting with Bootstrap for Webpack, but I've hit a roadblock. After reading numerous blog articles, I found that they either rely on the outdated 'bootstrap-webpack' plugin from 7 months ago (which d ...

I have a website hosted on Heroku and I am looking to add a blog feature to it. I initially experimented with Butter CMS, but I found it to be too pricey for my budget. Any suggestions on

I currently have a website running on Heroku with React on the front end and Node.Js on the back end. I want to incorporate a blog into the site, but after exploring ButterCMS, I found the pricing starting at $49 to be too steep for my budget. My goal is ...

Submit an image in base64 format

My plugin crops images and returns them as base64 data, like this: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ.... How do I then upload this image to my server using a file upload field in my form? PS: Essentially, I want the returned image to be automa ...

Invoke a PHP function by utilizing a JavaScript AJAX post call

I have been exploring various topics extensively, but I have not been able to find a solution. My objective is to create an HTML hyperlink that triggers a Javascript AJAX post request on a PHP page to execute a PHP function (potentially with any number of ...