The watcher without Gulp fails to continue running properly if it comes across a Less error in a file

Is there a way to monitor a folder containing less files and only compile the "styles.less" file when changes are made, even if other less files such as "header.less" or "navigation.less" have been modified? I've set up 2 tasks for this purpose. The task "watchless" works fine and compiles styles.less to styles.css as expected. However, if an error occurs while editing a less file, the watcher stops functioning despite using gulp-plumber. How can I resolve this issue?

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var less = require('gulp-less');
var watch = require('gulp-watch');

var path_less = 'templates/responsive/css/less/';
var path_css = 'templates/responsive/css/';

gulp.task('less2css', function () {
    return gulp.src(path_less + 'styles.less')
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest(path_css))
});

gulp.task('watchless', function() {
   gulp.watch(path_less + '*.less', ['less2css']);  // Watch all the .less files, then run the less task
});

Answer №1

After much trial and error, I finally got it to work by implementing the code below:

const gulp = require('gulp');
const gutil = require('gulp-util');
const less = require('gulp-less');
const watch = require('gulp-watch');

const pathLess = 'templates/responsive/css/less/';
const pathCss = 'templates/responsive/css/';

gulp.task('compileLess', function () {
    gulp.src(pathLess + 'styles.less')
        .pipe(less().on('error', gutil.log))
        .pipe(gulp.dest(pathCss))
});

gulp.task('watchLess', function() {
    gulp.watch(pathLess + '*.less', ['compileLess']);  // Watch all the .less files and trigger compilation
});

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

Chips Style Vuetify Autocomplete Menu / Dropdown Feature

I am looking to change the appearance of the items in the dropdown menu of my Autocomplete Box. Vuetify-Autocomplete Currently, it displays the standard style for each item: Current <v-autocomplete chips deletable-chips multiple v-model="selectedT ...

Text will not be displayed when it is written on images

I'm currently facing a challenge with adding text onto two different images, one on the left and one on the right. I have included HTML and CSS code but it seems to be incorrect. Can someone please help me fix it? #container { width: 400px; hei ...

Center the radio buttons regardless of the length of the text

My dilemma lies with 3 radio buttons and their corresponding labels - while 2 of them are aligned perfectly beneath each other due to their matching character lengths, the middle one extends further making it look misaligned. Check out this fiddle. Below ...

Hide custom video controls from view

For a while, I was able to hide the controls on my page using position:absolute; and bottom:-36px, which made them pop up when hovering over the player. Recently, however, I noticed that I can now scroll down to see them. How can I maintain the slide-up ef ...

Options for Repeating and Full Width Custom Headers in WordPress

I have been exploring the WP codex extensively, but without success. I have enabled the customizer custom header and can upload images. I can then set some CSS to choose whether I want it to be full width or repeated. However, I would like to add an option ...

Tips for updating the current user's username value in local storage in Angular

https://i.stack.imgur.com/ZA32X.png https://i.stack.imgur.com/iDHZW.png I am facing an issue with updating the local storage of a current User for only username. When I update the username, it's not reflecting in local storage. Even though I can s ...

Hovering over the designated area will reveal the appearance of

I've encountered an issue with a list group in a card. Specifically, when hovering over the topmost item in the list group, a border appears underneath it (which should only appear when hovering). However, when I try to override this behavior using :h ...

Effortlessly find data in an HTML table and showcase the results instantly without

I am looking for a way to implement search functionality in my table without refreshing the page. The fields above the table are used for searching and I want the results to be displayed within the same table. Here is an example of the code: <?php $for ...

Create an image of a static map from Google

I have incorporated the Google Static Map API into my Angularjs Application to display images of Google maps. Browse here for a glimpse Everything operates smoothly when there are fewer map coordinates. However, when I increase the number of map coordina ...

Is using canvas the best option for creating simple image animations with JavaScript?

I am currently working on a basic animation project using JavaScript. This animation involves switching between 13 different images per second to create movement. I have created two simple methods for implementing this animation. The first method involves ...

I'm having trouble with jQuery recognizing the left-margin property. Is there a workaround for this issue?

I rarely use jquery, but I wanted to add animation to a side bar. The sidebar menu is 670px with a -670 left-margin. When the user hovers over it, I'd like the left-margin to change to 0px and reveal the hidden content. Upon mouseout, it should return ...

An element featuring a background color is vertically aligned in the middle of its parent container

Struggling to achieve a seemingly simple task, but coming up short on finding a solution. The goal is to have a background-color that aligns vertically in the middle of the first and last images in a stack of images. It may sound more complicated than it a ...

How to vertically center images in Bootstrap Carousel using the img-fluid class

I'm attempting to center both horizontally and vertically the images in the bootstrap carousel using the img-fluid class. I want the images to be fully visible (100%) and adaptable to different screens, so I've been utilizing the img-fluid class. ...

Is there a way to add a gradient of colors to the background?

I'm looking for instructions on how to achieve a multi-color background screen similar to the image I have provided. Can anyone help with this? ...

Attempting to align the text perfectly while also adding a subtle drop shadow effect

Trying to center text with a drop shadow without using the CSS property. I'm utilizing span and :before for cross-browser compatibility. Here is what it currently looks like: The HTML: <h3 title="Say hello to Stack Overflow"><span>Say ...

The div within the button is failing to properly adjust to height settings

Check out this Fiddle I'm currently working on a social thumbs up button and I've encountered some challenges. In my button design, I have included a second div to accommodate the right side of it. However, despite trying to adjust its height us ...

Addressing the spacing and alignment issues within the progress bar

I need some help with my Angular app. I am currently working on creating a progress bar, but I am facing some issues with the alignment of the bars. Here is the code snippet that I have used: CSS: .progressbar { position: relative; height: 56px; mar ...

My mobile browsing experience is being hindered by a high CLS score due to the image continuously loading late

This is the webpage I am experiencing problems with, and here is the Google Pagespeed report for Mobile. Despite trying to stop lazy loading and preloading the image, there is always a delay in loading. How can this issue be resolved? ...

Combining labels over multiple lines using lower division

I have a setup where I am using two DIVs, one positioned below the other. The top DIV contains a Multiline Label that dynamically generates data. However, when the data in the label exceeds a certain length, it does not create space and instead overlaps w ...

Troubleshooting layout problems caused by positioning items at window height with CSS and jQuery

At this moment, my approach involves utilizing jQuery to position specific elements in relation to the window's size. While this method is effective when the window is at its full size, it encounters issues when dealing with a debugger that's ope ...