There seems to be no action when using Gulp watch

I've been attempting to use Watch for compiling my SASS files, however it seems to be not functioning as expected.

Package.json

"author": "José Ramón Rico Lara",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-notify": "^3.2.0",
    "gulp-sass": "^4.1.0",
    "gulp-webp": "^4.0.1"
  }
}

Gulpfile.js

const { series, src, watch, dest, parallel } = require('gulp');
const sass = require('gulp-sass')
const webp = require('gulp-webp');

const paths = {
    scss: 'src/scss/**/*.scss',
    js: 'src/js/**/*.js'
}

function css() {
    return src(paths.scss)
        .pipe(sass())
        .pipe(dest('./build/css'))
}

function javascript() {
    return src(paths.js)
        .pipe(concat('bundle.js'))
        .pipe(dest('./build/js'))
}

function watchArchivos() {
    watch(paths.scss, css); // * = La carpeta actual - ** = Todos los archivos con esa extensión
    watch(paths.js, javascript);
}

exports.css = css;
exports.javascript = javascript;
exports.watchArchivos = watchArchivos;

exports.default = series(css, javascript, watchArchivos);

The console indicates that the code is running smoothly without any errors appearing, yet when I modify a file, it fails to compile.

Answer №1

From my observation, it appears that there are no gulp.tasks mentioned in the given example.

gulp.task('watch', function() {
  gulp.watch('public/assets/css/*.css', gulp.series('clean-css', 'pack-css'));
});

Furthermore, the file provided only contains exports and does not call "watchArchivos."

Answer №2

Encountered a similar issue where the watching task was not executed as expected. In my scenario, the first task (browser) involved a browser sync instance, but it turned out that the browser task was asynchronous. To resolve this, I had to utilize async/await and fortunately, everything started working smoothly.

async function browser() {
  await browserSync.init({
    server: {
      baseDir: PATHS.output,
    },
  });
}

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

Tips for Displaying and Concealing Tables Using Radio Buttons

Does anyone know how to refactor the jQuery code to toggle between two selection options (Yes and No)? This is the jQuery code I have tried: $(document).ready(function() { $("#send_to_one").hide(); $("input:radio[name='decision']").chan ...

Leveraging JavaScript's Document.write() function to generate an HTML hyperlink

I am struggling with a URL stored in a variable (var URL). My initial attempt was this: document.write("<a href='"+url+"'>LINK</a>"); Unfortunately, it is not working as expected. Any suggestions on how to fix this? This is the ex ...

What is the best way to activate ui-sref in an AngularJS unit test?

Currently I am conducting a test on an AngularJS view. The code sample contains some non-standard helpers, but they should not affect the specific functionality being tested. Below is the view (written in Jade): #authentication-options button#sign-up(u ...

I would like to create a border for the radial gradient and apply it to the div as well

Below is the CSS code I have written. div { height: 150px; margin: 5em 2em; background: radial-gradient(circle at top center, transparent, transparent 70px, black 70px, black); border-radius: 8p## Heading ##x; position: relative; } .circle { ...

Tips for transferring data from a controller to $scope in the MVC architecture with AngularJS

I'm a beginner when it comes to AngularJS, currently working with an MVC5 application. I have set up a module and controller in the Angular JS for this application. Within my customer controller in MVC5, I have an action called "View" where I need to ...

Error encountered: The Bootstrap modal() function is showing as undefined when using npm modules

Every time I attempt to call $("#myDiv").modal(), an error occurs. The error message reads: Uncaught TypeError: undefined is not a function This error has popped up in different scenarios, with various parameters being passed to modal(). Many solutions o ...

Utilizing the power of JavaScript in an HTML file to develop a straightforward price calculator

I am new to the world of HTML coding and currently working on an assignment for my online computer course. I reached out to my professor for help, but unfortunately, he hasn't been very responsive. The task at hand is to create a basic cost calculator ...

Simple method to modify the text size of the entire HTML page

Looking for a way to adjust the font size of an entire HTML document? I'd like to have two buttons - one to increase the font size and the other to decrease it. Each button will trigger a JavaScript function; function increaseFontSize(){ //Increase ...

Tips for controlling HTML elements using JavaScript

I'm currently working on implementing a mouse-over scale effect for an HTML image. I chose to use JavaScript for this task because I need the ability to manipulate multiple elements in different ways simply by hovering over one element. Below is the J ...

Having an issue with my JavaScript burger menu not functioning properly

I'm really struggling to figure out why my code isn't working. I've checked and rechecked all the links, and everything seems correct. Could it possibly be because the code is outdated? I've been stuck on this for two days now and can&a ...

Can we determine if scrollIntoView is compatible with different browsers through testing?

I am searching for a method to conduct a real-time assessment of the scrollIntoView feature in my user's browser. This is not a simple "caniuse" check; instead, I want to implement graceful degradation. I am utilizing jQuery and would prefer to utiliz ...

Zend Framework 2: Issue with passing post parameters

I am facing an issue with passing post parameters to a controller action through an ajax call. It's strange because my other ajax calls are functioning correctly. The error message I receive is: Notice: Undefined index: user_bio in C:\xampp&bso ...

JSON Generator's date formatting convention

One method I use to create a JSON object is through JSON-GENERATOR I prefer the date to be formatted like this: 2017-12-31 [ '{{repeat(5, 7)}}', { equityPriceList: [ { date:'{{date(new Date(1970, 0, 1), new Date(),[DD ...

Error: Unable to locate attribute 'indexOf' within null object in vuejs when using consecutive v-for directives

I've been struggling with this issue for hours. I'm using vuejs' v-for to render items in <select> element's <options>, but I keep getting a type error. I've tried changing the :key values, but it still won't rende ...

Navigating through an object using both dot and bracket notation

Can anyone shed some light on why I keep getting an 'undefined' message when trying to access object properties using dot notation like return contacts[i].prop;? However, if I use bracket notation like return contacts[i][prop];, it works fine an ...

Executing a function from another module (File) within a React JS application

I am currently utilizing the Material UI v1.0.0-beta.33 in my project, which includes an App Bar component. import React from "react"; import PropTypes from "prop-types"; import { withStyles } from "material-ui/styles"; import AppBar from "material-ui/App ...

The functions isModified and isNew in Mongoose

In various tutorials, I have come across this particular example and it has raised a question in my mind. I am curious as to why this works with new documents. Could it be that new documents are automatically considered modified? Wouldn't it make more ...

Difficulty with Vue Router horizontal scrolling to hash functionality

My goal is to achieve horizontal scrolling of the viewport by using a button wrapped in a router-link that navigates to a vue component. I was successful in achieving this functionality using anchor tags: <a href="#about"> <button cl ...

Reduce the zoom level in Chrome to 33% or lower and watch as the text "ascends" through a fixed height div with static positioning

After recent testing of a website, I noticed that when I zoomed out to 33% or 25% in Chrome, some text in static height divs seemed to be "climbing" out of the div. Upon researching, I found information about: text-size-adjust (currently an experimental ...

Displaying FontIcon in a NativeScript alert box

Would it be possible to display a fonticon on a Nativescript dialog? Similar to this example? dialogs.alert({ title: // set icon as text message: "Check-in Successful" }).then(()=> { console.log("Dialog closed!"); }); Is it feasible to ...