Why is gulp failing to create a new file?

After creating a new directive folder, I noticed that Gulp is not building the .sass file as expected.

gulp.task('default', function(){
    gulp.run('libs');
    gulp.run('templates');
    gulp.run('makeup');
    gulp.run('script');
    gulp.run('json');
    gulp.run('images');
    gulp.run('particles');
});


// ========== ALL SASS AND CSS FILES ==========
gulp.task('makeup', function(){
    gulp.src([
            // ALL ABOUT LIBS CSS FILES
            './public/components/bootstrap/dist/css/bootstrap.min.css',
            './public/components/slick-carousel/slick/slick.css',
            './public/components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css',
            './public/components/animate.css/animate.min.css',
            './public/components/bootstrap-datepicker/dist/css/bootstrap-datepicker.css',
            // BUZZ SASS
            './public/css/sass/*.sass',
            './public/js/directives/**/*.sass'
            ])
   .pipe(sass({outputStyle: 'compressed'}))
   .pipe(concat('build.css'))
   .pipe(gulp.dest('./public/build/'));
});

The build.css file does not contain the code I added.

Directory structure:

https://i.sstatic.net/0Y9XX.png

What could be causing this issue? How can it be resolved?

Answer №1

In my opinion, it would be beneficial to include the base path for your files in gulp.src:

gulp.src([
    // LIBRARY CSS FILES
    './public/components/bootstrap/dist/css/bootstrap.min.css',
    './public/components/slick-carousel/slick/slick.css',
    './public/components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css',
    './public/components/animate.css/animate.min.css',
    './public/components/bootstrap-datepicker/dist/css/bootstrap-datepicker.css',
    // CUSTOM SASS FILES
    './public/css/sass/*.sass',
    './public/js/directives/**/*.sass'
], {base: './'}) // don't forget to add this at the end of your file paths array

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

Cycle through matching elements for managing unique slick carousels

My experience with using slick carousel and custom pagination has been positive so far. However, I'm now faced with the challenge of incorporating multiple carousels on a single page. While I have come across solutions, implementing them alongside my ...

Performing logical operations on data following a POST request

I am currently developing an educational application for exams. In this app, a teacher creates exams and students answer them. Once the student has submitted all their answers, I want to display the exam results which will include the correct answers along ...

What role does conditional logic play in the compile or link function of an AngularJS directive?

In my $scope, there is a JSON object named data. Within this object, there exists a member called items that can be either an Object or an Array of Objects. Due to this variability, the use of ng-repeat is not feasible: <ul> <li ng-repeat="it ...

Trying out REST endpoints using curl's -X PUT command results in a 404 error code

Currently, I am delving into the realm of the MEAN stack and following along with the MEAN tutorial provided by thinkster.io. You can find the tutorial here: As of now, I am navigating through the "Opening REST Routes" section. In an attempt to PUT an upv ...

Assistance for Hypertext Transfer Protocol in Webkit

I've been researching how webkit enables web browsers to display web pages. It's great to know that my HTML, CSS, and JavaScript code will work on any device that supports webkit. But one question still remains - does webkit also have built-in su ...

Issue with Orgchart JS: The requested resource does not have the 'Access-Control-Allow-Origin' header present

Currently, I am developing a program to create organization charts using orgchart.js and simple PHP. This project does not involve any frameworks, but unfortunately, I encountered the following error: CORS policy is blocking access to XMLHttpRequest at & ...

tips for optimizing javascript file caching

https://i.stack.imgur.com/UhWD1.pngMy web application was created using "pug" technology about 9-8 years ago, and more recently, pages have been added in an innovative framework (vue.js). However, whenever there is a transition between an old pug page and ...

A guide to selecting the bookmark with a URL that is on a currently opened page

To gain a clearer understanding of my goal, follow these steps: Open the Chrome Browser and go to a URL, such as https://www.google.com. Once the page loads, locate and click on the bookmark labeled "ABC", which contains the URL ({window.open('/ ...

When you delete a property from a duplicated version of an Object in JavaScript, it ends up impacting the original Object as

Let's imagine we have an array of objects, var data = [{ "sss": "sssssss", "yyy": "ssdsdsds", "www": "1212121", "Group": "Mango" }, { "sss": "sssssss", "yyy": "ssdsdsds", "www": "1212121", "Group": "Mango" }] The desi ...

Issue with rendering multiple paginators in Bootstrap and jQuery causing display problems

I am currently in the process of implementing pagination using only Bootstrap and jQuery. To get started, I found this helpful answer: Limit the number of visible pages in pagination The issue I am facing is that when there are multiple paginators on the ...

Guide on generating a 2D array with a single array in AngularJS

How do we convert a single array into a 2D array? angular.forEach(angular.fromJson(value.resource_type_efforts), function (value1, key1) { $scope.data.resource_type.push(key1); }); Upon running console.log($scope.data.resource_type), the output ...

Top solution for efficiently capturing and storing user input in a React JS application: Event Handler

I've recently designed an input field for inputting details of items. In order to effectively capture and save the entered information, which of the following event handlers would be most suitable? onClick onChange onLoad onKeyPress ...

Using JavaScript, extract the most recent 10 minutes worth of UNIX timestamps from a lengthy array

I am working with an array that contains multiple UNIX timestamps and I need to retrieve the timestamps from the last 10 minutes. Specifically, I only require the count of these timestamps, possibly for a Bot protection system. Would it be best to use ...

It seems that although both axios.put methods are identical, only one is functioning properly

Could someone clarify the distinction between these two syntaxes and why the first one is not functioning correctly? Attempting to use the first code block results in a 401 error: const handleSubmit = () => { axios.put(`url`, { headers: { Aut ...

What is the best way to eliminate a JSON header?

Here is the JSON data I have: { "folder": [ { "$": { "id": "471841542", "name": "Manajemen Pemasaran", "description": "", "user_id": "186868958", "shared": "1", "shared_l ...

Automatically scrolling down a div as new content is added using XMLHTTPRequest.openConnection

https://jsfiddle.net/kv5gbamg/ - I created a jsfiddle to demonstrate the functionality of the system Essentially, I am seeking a way to automatically scroll the scrollbar to the bottom every time a new message is received. My system updates the div with ...

What is the best way to remove a Firestore listener from my Vuex action?

Currently, I'm utilizing Firestore to retrieve the stored data in my vuex store. One aspect that is puzzling me is how to properly detach the listener when, for instance, a user signs out. fetchExercises ({commit, getters}) { const db = firebase.fi ...

Refresh a row in real-time by utilizing a modal with JavaScript or jQuery

Is there a way to dynamically edit and update a previously submitted row (category name) in a table? I am able to edit a row by clicking on an edit button and displaying a modal with the current value. However, I am facing a challenge when trying to submit ...

Incorporating a computed variable in a v-select within a VueJs endless loop

I've been attempting to utilize a computed value in a v-select component from Vuetify, but every time I select an item, it triggers an endless loop. To demonstrate the issue, I have recreated my code in this CodePen. Please be cautious as it may caus ...

creating a normal variable and assigning it to a $scope variable

Currently, I am working on a basic program using Angular JS/Ionic to validate two scope variables that are assigned from two different templates (Plunker). .controller('personCtrl', function($scope , $rootScope) { $scope.user = ""; ...