'Gulp or gulp watch doesn't watch file changes

I am trying to watch scss & js files.

so far I've tried this answer: gulp watch doesn't watch

How can I make sure all files are watched automatically when I run gulp or gulp watch

My gulpfile looks like:

let gulp = require('gulp'),
  sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps'),
  cleanCss = require('gulp-clean-css'),
  rename = require('gulp-rename'),
  postcss = require('gulp-postcss'),
  autoprefixer = require('autoprefixer'),
  strip = require('gulp-strip-comments');
  uglify = require('gulp-uglify');
  browserSync = require('browser-sync').create()

const paths = {
  scss: {
    src: './scss/style.scss',
    mobify: './scss/mobify.scss',
    dest: './css',
    // watch all the scss files in the scss folder
    watch: './scss/**/*.scss',
    bootstrap: './node_modules/bootstrap/scss/bootstrap.scss'
  },
  js: {
    bootstrap: './node_modules/bootstrap/dist/js/bootstrap.min.js',
    mobify: './scripts/mobify.js',
    global: './scripts/global.js',
    jquery: './node_modules/jquery/dist/jquery.min.js',
    popper: 'node_modules/popper.js/dist/umd/popper.min.js',
    popper: 'node_modules/popper.js/dist/umd/popper.min.js.map',
    dest: './js'
  }
}

// Compile sass into CSS & auto-inject into browsers
function styles () {
  return gulp.src([paths.scss.bootstrap, paths.scss.mobify, paths.scss.src])
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(postcss([autoprefixer({
      browsers: [
        'Chrome >= 35',
        'Firefox >= 38',
        'Edge >= 12',
        'Explorer >= 10',
        'iOS >= 8',
        'Safari >= 8',
        'Android 2.3',
        'Android >= 4',
        'Opera >= 12']
    })]))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.scss.dest))
    .pipe(cleanCss())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(paths.scss.dest))
    .pipe(browserSync.stream())
}

// Move the javascript files into our js folder
function js () {
  // don't uglify the popper.js as it was giving some gulp errors
  if (paths.js.popper) {
    gulp.src([paths.js.popper])
      .pipe(gulp.dest(paths.js.dest))
      .pipe(browserSync.stream())
  }
  return gulp.src([paths.js.bootstrap, paths.js.global, paths.js.mobify, paths.js.jquery])
    .pipe(strip())
    .pipe(uglify())
    .pipe(gulp.dest(paths.js.dest))
    .pipe(browserSync.stream())
}

// Static Server + watching scss/html files
function serve () {
  // set  BrowserSync in a headless environment, you might want to set the open option to false)
  browserSync.init({
    proxy: 'https://mobify.io',
    open: false
  })

  gulp.watch([paths.scss.watch, paths.scss.bootstrap], styles).on('change', browserSync.reload)
}

// new task to watch all scss files and compile scss if any change
gulp.task('watch', function () {
  return gulp.watch([paths.scss.watch, paths.scss.mobify, paths.scss.bootstrap], styles);
})

const build = gulp.series(styles, gulp.parallel(js, serve))

exports.styles = styles
exports.js = js
exports.serve = serve

exports.default = build


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source