serato-css/gulpfile.js

A Modern Mini Framework Full Of Handy Utilities, Colors And Animations Inspired To Be Most Predictable And Community Driven.

const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const browserSync = require('browser-sync').create();
const sourcemaps = require('gulp-sourcemaps');

//  This setup works, but the theming kit html and output css are all in and served from the public folder, changing this takes to change the gulp dest, and the browser-sync sever base dir.

// => convert scss to css
const convertSCSS = () => {
  // sass directory
  // src('./scss/**/*.scss');
  // src('./src/scss/**/*.scss')
  src('./scss/serato.scss')
    //output-style (nested, compact, expanded, compressed)
    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
    // sourcemaps
    .pipe(sourcemaps.init())
    // sourcemaps output directory
    .pipe(sourcemaps.write('/'))
    // css output directory
    .pipe(dest('./'))
    // stream live changes to browser
    .pipe(browserSync.stream());
  watch('./scss/serato.scss', convertSCSS);
};

const watchSCSS = () => {
  browserSync.init({
    server: {
      baseDir: './public/',
    },
  });
  watch('./scss/**/*.scss', convertSCSS);
  watch('./public/*.html').on('change', browserSync.reload);
  watch('./js/**/*.js').on('change', browserSync.reload);
};

exports.compile = convertSCSS;
exports.watch = watchSCSS;