gulpfile.js

const gulp = require('gulp');
const babel = require('gulp-babel');
const vueify = require('vueify');
const sourcemaps = require('gulp-sourcemaps');
const rename = require('gulp-rename');
const cleanCSS = require('gulp-clean-css');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');

const srcPath = 'src'; // Change this to the actual path of your source files
const destPath = 'dist'; // Change this to the destination path for compiled files

gulp.task('js', () => {
    return gulp.src([`${srcPath}/**/*.js`, `${srcPath}/**/*.vue`])
      .pipe(sourcemaps.init())
      .pipe(babel({ presets: ['@babel/preset-env'] }))
      .pipe(vueify())
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(destPath));
  });

// CSS Compilation (Sass, SCSS, etc.)
gulp.task('css', () => {
  return gulp.src(`${srcPath}/**/*.scss`)
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(rename({ suffix: '.min' }))
    .pipe(cleanCSS())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(destPath));
});

// Watch for changes and run tasks
gulp.task('watch', () => {
  gulp.watch(`${srcPath}/**/*.js`, gulp.series('js'));
//   gulp.watch(`${srcPath}/**/*.vue`, gulp.series('vue'));
  gulp.watch(`${srcPath}/**/*.scss`, gulp.series('css'));
});

// Define the default task
gulp.task('default', gulp.parallel('js','css', 'watch'));

// Define a task to build for production (minification)
gulp.task('build', gulp.parallel('js', 'css'));

// Clean the destination folder
gulp.task('clean', () => {
  return gulp.src(destPath, { read: false, allowEmpty: true })
    .pipe(clean());
});