scss builder

gulpfile.js

const gulp = require('gulp')
const path = require('path')
const browserSync = require('browser-sync')
const $ = require('gulp-load-plugins')()

const config = {
  autoprefixer: {
    browsers: ['> 5%', 'last 6 iOS versions']
  },
  browserConfig: {
    ui: false,
    proxy: '127.0.0.1:8000',
    reloadDebounce: 2000,
    tunnel: false,
    port: 3000,
    logPrefix: 'FrontEnd Server'
  },
}

const HTML_FILES = './templates/motd/*.html'
const CSS_PATH = './web/static/web/css'
const SCSS_FILES = path.join(CSS_PATH, '*.scss')
const ALL_SCSS_FILES = path.join(CSS_PATH, '**/*.scss')

gulp.task('serve', () => {
  browserSync.init(config.browserConfig);
  browserSync.watch(HTML_FILES).on('change', browserSync.reload);
});

gulp.task('styles', () =>
  gulp.src(SCSS_FILES)
  .pipe($.sass().on('error', $.sass.logError))
  .pipe(gulp.dest(CSS_PATH))
  .pipe(browserSync.stream({match: '**/*.css'}))
)

gulp.task('styles:build', () =>
  gulp.src(SCSS_FILES)
    .pipe($.sass().on('error', $.sass.logError))
    .pipe($.autoprefixer(config.autoprefixer))
    .pipe($.csso())
    .pipe(gulp.dest(CSS_PATH))
)

gulp.task('watch', () => {
  gulp.watch(ALL_SCSS_FILES, gulp.series('styles'))
})

gulp.task('build', gulp.series('styles:build'))
gulp.task('default', gulp.series('styles', gulp.parallel('watch', 'serve')))