const autoprefixer = require('gulp-autoprefixer');
const babel = require('gulp-babel');
const browsersync = require('browser-sync').create();
const clean = require('gulp-clean');
const cleancss = require('gulp-clean-css');
const gulp = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
// Extra included dependencies
const {src, task}= require('gulp');
files: './src/html/**/*.html',
files: './src/js/**/*.js'
files: './assets/scss/atmos.scss'
files: 'assets/css/**/*.css',
minFiles: 'assets/css/**/*.min.css',
files: 'dist/assets/js/**/*.js',
minFiles: 'dist/assets/js/**/*.min.js'
gulp.task('browsersync', callback => {
baseDir: paths.dist.base.dir,
// Added so that we can have the server use base urls vs requiring .html
gulp.task('browsersyncReload', callback => {
gulp.task('clean', () => {
return gulp.src([paths.dist.css.dir, paths.dist.html.files, paths.dist.js.dir, paths.dist.libs.dir], {
gulp.task('clean', () => {
return gulp.src([paths.dist.css.dir], {
gulp.task('clean:js', () => {
return gulp.src([paths.dist.js.files, `!${paths.dist.js.minFiles}`], {
presets: ['@babel/preset-env']
.pipe(gulp.dest(paths.dist.js.dir))
gulp.task('scss', () => {
.src(paths.src.scss.files)
.pipe(sass().on('error', sass.logError))
.pipe(rename("atmos.min.css"))
.pipe(gulp.dest(paths.dist.css.dir))
.pipe(browsersync.stream());
gulp.task('watch', () => {
gulp.watch([paths.src.html.files],
gulp.series('browsersyncReload'));
gulp.watch(paths.src.scss.files, gulp.series('scss'));
gulp.task('default', gulp.series('clean', gulp.parallel( 'scss'), gulp.parallel('browsersync', 'watch')));