Why is my Sass not showing up when using Gulp?

I am running Gulp version 4. I have a folder structure where all my code that I edit is in my src folder and all the code that gets minified, autoprefixed, etc. gets sent to my dist folder. For some reason when I open my file using BrowserSync all my changes that are made to my main.scss file get minified, autoprefixed to the dist/css/main.css file but the changes don't show up whenever BrowserSync is in effect. Here is my gulpfile.js, index.html, main.css, and main.scss.

Gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync  = require('browser-sync').create();
const cleanCSS  = require( 'gulp-clean-css');
const sourcemaps  = require( 'gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const imagemin = require('gulp-imagemin');

// Create a function named scss which applies all the changes to our scss folder and all .scss files in that folder
function scss() {
  return gulp.src('src/scss/**/*.scss')
         .pipe(sass().on('error', sass.logError))
         .pipe(autoprefixer('last 2 versions'))
         .pipe(sourcemaps.init())
         .pipe(cleanCSS())
         .pipe(sourcemaps.write())
         .pipe(gulp.dest('dist/css'))
         .pipe(browserSync.stream());
}

/* Create a function that will compress our images */
/* function images() {
  return gulp.src('src/img/*')
        .pipe(imagemin())
        .pipe( imagemin([
          imagemin.gifsicle({interlaced: true}),
          imagemin.jpegtran({progressive: true}),
          imagemin.optipng({optimizationLevel: 5})
        ]))
        .pipe(gulp.dest('dist/img/'))
} */



function watch() {
  browserSync.init({
    server: {
      baseDir: './src'
    }
  });
  gulp.watch('src/scss/**/*.scss', scss);
  gulp.watch('src/*.html').on('change', browserSync.reload);
  
}

exports.scss = scss;
exports.watch = watch;

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="dist/main.css">
    <title>Gulp 4</title>
</head>
<body>
    <h1 class="heading">Gulp 4 Works</h1>
  
</body>
</html>

src/scss/main.scss

.heading {
background: green;
display: flex;


}

dist/css/main.css

.heading{background:green;display:-webkit-box;display:-ms- 
flexbox;display:flex}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFNBQ0UsV0FBWSxNQUNaLFFBQVMsWUFDVCxRQUFTLFlBQ1QsUUFBUyIsImZpbGUiOiJtYWluLmNzcyIsInNvdXJjZXNDb250ZW50IjpbXX0= */

Solution

Try this:

function watch() {
  browserSync.init({
    server: {

      // baseDir: './src',

      baseDir: "./",
      index: "src/index.html",
    }
  });
  gulp.watch('src/scss/**/*.scss', scss);
  gulp.watch('src/*.html').on('change', browserSync.reload);
}

Note the changes I made to baseDir and adding the index server option. I think your index.html is located in the src folder?

I ran your original code and the browser was always looking for the css file here:

http://localhost:3000/dist/css/main.css

which is problematic since your main.css is not located under the index.html file as browserSync seems to think. Also use this:

 <link rel="stylesheet" href="dist/css/main.css">

With the above you do not need to move your index.html file from the src folder.

Also, in your scss task, the sourcemaps.init() pipe should go before the sass() pipe

function scss() {
  return gulp.src('src/scss/**/*.scss')
         .pipe(sourcemaps.init())
         .pipe(sass().on('error', sass.logError))
         .pipe(autoprefixer('last 2 versions'))         
         .pipe(cleanCSS())
         .pipe(sourcemaps.write())
         .pipe(gulp.dest('dist/css'))
         .pipe(browserSync.stream());
}

This last change has nothing to do with your original problem, but it is a change you will want to make.