My .min file is not being compiled by Gulp Sass, however, no error messages are displayed

I am new to using gulp and have everything properly installed. When I run gulp in the terminal, it shows CLI version 2.3.0 and Local version 4.0.2.

However, when I make changes to my SCSS file, nothing seems to happen despite gulp running without errors in the terminal.

[13:34:16] Starting 'compile_scss'...
[13:34:16] Starting 'compile_scss'...
[13:34:16] Finished 'compile_scss' after 12 ms
[13:34:16] Starting 'detect_change_scss'...
[13:34:16] Finished 'detect_change_scss' after 16 ms
[13:34:16] Finished 'compile_scss' after 32 ms*

This is the code I have:

'use strict';

 
 var gulp = require('gulp');
 var sass = require('gulp-sass');
 var minifyCSS = require('gulp-clean-css');
 var uglify = require('gulp-uglify');
 var renamed = require('gulp-rename');
 var changed = require('gulp-changed');

   

 var SCSS_SRC = './src/Assets/scss/**/*.scss';
 var SCSS_DEST = './src/Assets/css';

 function compile_scss (done) {
    gulp.src(SCSS_SRC)
    .pipe(sass().on('error', sass.logError))
    .pipe(minifyCSS())
    .pipe(renamed({ suffix: '.min' }))
    .pipe(changed(SCSS_DEST))
    .pipe(gulp.dest(SCSS_DEST));
    done();
   }


  function detect_change_scss (done) {
    gulp.watch(SCSS_SRC)
    done();
  }


 gulp.task("compile_scss", gulp.series(compile_scss, detect_change_scss, ));

Answer №1

When working with gulp, it is essential to specify the function that should be executed upon detecting a change. Modify your code as follows:

function handle_change_scss (done) {
  gulp.watch(SCSS_SRC, gulp.series(compile_scss))
  done();
}

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

What is the best way to intentionally make a Node unit test fail when catching a Promise rejection?

When conducting unit tests with Node.js, I encountered a scenario where I needed to intentionally fail a test within a promise's catch block: doSomething() .then(...) .catch(ex => { // I need this test to fail at this point }); ...

When attempting to log in with an incorrect password, the goal is to display the login.ejs page instead of showing an "unauthorized" message using passport-local-mongoose

I am currently in the process of learning how to utilize passport, passport-local, passport-local-mongoose, and express-session in my project. My objective is to have the login.ejs file rendered when an incorrect password is entered. However, instead of re ...

encountering an issue: Unable to modify headers once they have been sent

I am facing an issue in my express js API where I am trying to check if the database is connected or not. However, I keep getting the error Can't set headers after they are sent.. Can someone please help me understand why this error is occurring? Belo ...

Ways to gradually reveal all elements within a header section

Is there a way to gradually reveal all the components in my header once the window has finished loading by utilizing jQuery's fadeIn function? Below is the pertinent code snippet: HTML <div class="banner"> <header class="header"> < ...

Why was the express.js boilerplate code created?

As a newcomer to Node and Express, I am curious about the purpose of the boilerplate directories that are automatically generated when setting up an express project. I have searched online for explanations on the significance of these files without much l ...

Replicate network congestion and delay in Node.js by implementing streams

How can I effectively test a Node.js application that utilizes the native TCP server and pipe to simulate lag, congestion, simultaneous connections, reads, timeouts, and packet loss to ensure its stability under various challenging conditions? Can this t ...

What is the best way to automatically close a modal box after submitting a form?

Currently, I am utilizing the CSS modal box developed by Paul R. Hayes. More information about this can be found here - Within the modal box, I have integrated a form. This form is aimed at an iframe that remains concealed on the same page. My objective i ...

Step-by-step guide on sending emails through mailgun, mailchimp, or other services in an express/node.js application

Looking to enhance my email automation process by sending various automated emails such as order briefs, sign-in notifications, confirmation emails, and password change prompts to clients. I previously used nodemailer for this purpose but faced issues with ...

What is the method for subtracting pixels from a percentage value?

Is there a way to accomplish a similar effect to this: height: calc(100% - 50px); height: -webkit-calc(100% - 50px); height: -moz-calc(100% - 50px); In browsers that do not support these properties? I have a responsive div with two children. The height ...

Attempting to align an image in the middle of a webpage using CSS styling

Solving simple CSS problems used to be a breeze for me with just some trial and error. However, I've been struggling all day without any success. At this point, I'm at a loss for what to do. My current challenge is centered around aligning an im ...

Exponential calculator in Javascript

I'm working on a basic calculator project using html5, css3 and javascript. However, I've run into an issue with the exponent button not functioning properly. Here's my code snippet: <html> <head> <meta charset = "utf-8" ...

What is the method to incorporate audio into video calls on twilio?

For our existing application, we are incorporating a video calling feature using Twilio programmable video. Recording the video during calls is essential for us. Twilio saves both audio and video files, and now I need to play the same video in our applicat ...

Converting XML schema to JSON format using Node.js

I am attempting to loop through or access keys of a JSON object that was created from an XML object in node.js. Here is my current code: var fs = require('fs'); var parser = require('xml2json'); var xsd = require('libxml-xsd&apos ...

Alignment with Angular 2 Material and Flex-Layout

I've been experimenting with angular 2 material and flex-layout in an attempt to create a responsive gallery of elements. Despite spending countless hours on it, I'm still unable to center my elements as desired: https://i.sstatic.net/Hsicy.png ...

Exploring the application of the PUT method specific to a card ID in vue.js

A dashboard on my interface showcases various cards containing data retrieved from the backend API and stored in an array called notes[]. When I click on a specific card, a pop-up named updatecard should appear based on its id. However, I am facing issues ...

Display website when clicked

When creating a website similar to , one issue that I am facing is the ability to scroll down before clicking the "proceed as anticipated" button. This feature seems to defeat the purpose of having the button trigger an automated scrolling effect if users ...

Attempting to set up Prettier in my VSCode environment

I've been delving into JavaScript with the guidance of "Morten Rand-Hendriksen" on LinkedIn Learning. The instructor emphasized the importance of installing "Prettier" in our VSCode environment. Following his instructions, I headed to the "Extensions" ...

Ensuring a fixed table with vertical scrolling only, no horizontal scrolling, while scrolling in either direction

I'm working with an HTML fixed design that contains a center-aligned table with extensive data scrollable both vertically and horizontally. To address the issue of keeping column headers visible when scrolling vertically, I used jQuery's clone() ...

Styling elements in a React component with CSS to give each item a unique look

My React component, called "Badge", returns text that has bold styling. render() { return ( <div> <Text weight={'bold'}> {this.props.label} </Text> </div> ) Now, I am using the "Badge" component within ano ...

Utilize an Npm module for seamlessly integrating Twitter API streams into your Meteor.js application

I am in the process of developing a web application using Meteor.js that will enable users to search for hashtags on Twitter and view the results on the same page. So far, I have set up the basic framework for the application. However, I have encountered ...