Issue with Gulp.js- CSS not being refreshed on the browser after updates

I've encountered an issue while using gulp.js and BrowserSync. Whenever I save the CSS files, no changes are being reflected. Interestingly, there are no problems with the HTML files. It's worth mentioning that I'm not utilizing LESS or SASS, just pure CSS. Here's the snippet of code from my gulp.js file:

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('serve', function() {
    browserSync.init({
        server: "./"
    });
    gulp.watch(["./*.html", "./css/*.css"]).on('change', browserSync.reload);
});

gulp.task('default', ['serve']);

Answer №1

const gulp = require('gulp');
const browserSync = require('browser-sync');
const reload = browserSync.reload;

gulp.task('serve', function() {
  browserSync({
    server: {
      baseDir: './'
    }
  });

  gulp.watch(['*.html', 'css/*.css'], {cwd: './'}, reload);
});

gulp.task('default', ['serve']);

Why not give this a try? It seems like you are setting a base directory from your current location and including it in the watcher. Instead of using ./, you could use a directory name like app, which is commonly used as baseDir by people.

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

How to place an image in the bottom right corner using CSS

Does anyone know how to position an image in the bottom right corner of a div? I have tried using margin-right and padding-right with 0px on the img tag, but it does not seem to work. The black lines indicate that I do not need that space Here is my Cod ...

What is the solution to making text appear on the top rather than on the side?

Seeking a way to keep the text description above the textbox within a definition list, however currently the text appears to the left of the box. Here is the provided HTML structure: <dl> <dt> <label>Phone Number</label> &l ...

Incorporating a hamburger symbol into an established menu for easy navigation

I have come across a tutorial on creating a navigation menu with a logo positioned to the left. However, I now wish to incorporate a hamburger icon for mobile devices and I am unsure about the process. Despite my efforts to find a suitable tutorial onlin ...

Utilizing v-for and CSS Grid to showcase data effectively

I'm having trouble organizing my Vuex data with CSS GRID. It's turning out messy. My setup includes two columns: the first one for labels and the second for values. {{$store.state.stepOne.textfield[idx].label}} The code above is used to displa ...

Distinctive design for three different list items

Currently working on a project that involves the use of ul and li elements. I need to change the background for every 3rd li element in alternating patterns. Since the li elements are generated from the backend, I do not know how many there will be. I at ...

Having trouble with your mobile dropdown menu not responding to clicks?

I'm having trouble getting a dropdown menu to work on the mobile version of my website. When I click on the dropdown menu image, it's supposed to appear, but it's not working as expected. JSFiddle: https://jsfiddle.net/xfvjv184/ Included ...

Tips for changing the color of MUI TextField in React.JS?

Is there a way to customize the color of the TextField frame? It always shows up as black, making it hard to use in dark mode. I am looking to change the color of both the label and the input line. return ( <div align="center" ...

Is there a way to create a footer that seamlessly integrates with the borders of a website?

I've been struggling to design a footer for my class website project. The problem is that the footer either overlaps the borders of the site or the text inside the footer goes under the border. I've tested several different footers, but none seem ...

Firefox throwing XML parsing error when SVG is encoded as data URI

Check out my codepen demo showcasing the issue: codepen.io/acusti/pen/mJmVRy Encountering an error when trying to load svg content in Firefox: XML Parsing Error: unclosed token Location: data:image/svg+xml;utf8,<svg%20viewBox='0%200%20120%2 ...

No information available at the moment

When the data is not present, it displays as "display none"... However, I want it to show "no data found" This is the current code if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].styl ...

Creating Dynamic Visibility in ASP.NET Server Controls: Displaying or hiding a textbox based on a dropdown selection

Is there a way to dynamically show/hide a textbox or an entire div section based on a user's selection from a dropdown menu? Can this be achieved using client-side HTML controls instead of server controls? Would utilizing jQuery provide the best solut ...

Struggling to get my layout perfectly centered

I've spent the last 35 minutes scouring this site, and I know the answer is probably right in front of me but I can't seem to figure out how to center my layout. It's a straightforward setup with a container div, left div for the menu, and ...

The fixed position seems to be malfunctioning and behaving more like absolute

I have a simple question. I am currently designing a mobile version of a page, and we are trying to keep the "snag it" yellow button fixed at the bottom. However, the 'position: fixed' property is not working as expected; it's behaving like ...

What is the reason behind lightbox not disabling scrolling?

While using the default lightbox2 CSS and JavaScript, everything is functioning correctly except for an issue on Safari mobile. When I click an image and the lightbox opens, swiping to the left reveals blank white space despite having overflow-x set to hid ...

Create a modal using only HTML and CSS, no Javascript

Is it possible to create a modal using only HTML and CSS, without any JavaScript? I'm working on a project where I cannot use JavaScript but I still need a modal. <!DOCTYPE html> <html> <title>Minimal Modal Design</title> < ...

Is there a way to modify the header color in LESS? I attempted to do so, but unfortunately, my changes were unsuccessful

I have encountered an issue with my HTML code. Here's a snippet of it: <html> <head> <link rel="less/less.js" href="css/style.less"> </head> <header> This is a header. </header> </html> Within style.less ...

The line segment refuses to remain hidden beneath the h2 tag

Just getting started with HTML/CSS here! I'm trying to figure out how to keep a line directly under an h2 tag. In my code, there's an h2 tag labeled 'Instructions' followed by a div containing 3 other divs making up a line segment. By d ...

Unshrinkable item causing multiple lines text-overflow in a flexbox layout

My goal is to achieve the following design: https://i.stack.imgur.com/YLUtN.png Currently, I have attempted the following approach (although it doesn't fully meet my requirements): .parent { max-height: 40px; display: flex; flex-wrap: wrap; ...

What is the technique for utilizing JavaScript to toggle the opening and closing of a Bootstrap 5 navbar dropdown?

My website is built using Bootstrap 5, and I am working on creating a navbar dropdown functionality. On desktop, I want the dropdown to open on hover and lead to a new page when clicked. However, on mobile, I only want the dropdown to open and close on cli ...

JavaScript, CSS, and HTML - elements that dynamically adjust their size according to the content they hold

Being brand new to web development, I have a task of creating objects that feature text in a box with rounded edges, similar to the image provided. The challenge is that the border size needs to dynamically adjust based on the text size. Restrictions on u ...