brego/dist - index.html

## dist - index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>BrowserSync test</title>
        <link rel="stylesheet" href="styles/all.css">
    </head>
    <body>
        <main>
            <h1>This is a test</h1>
        </main>
    </body>
</html>

## dist - styles - all.css
:root {
    --color-main:       white;
    --color-background: hotpink;
}
html, body {
    height:  100vh;
    padding: 0;
    margin:  0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    text-align:  center;
    font-weight: bold;
    background:  var(--color-background);
    color:       var(--color-main);
}
main {
    display:         flex;
    align-items:     center;
    justify-content: center;
    height:          100vh;
}

## gulpfile.babel.js
// jshint esversion: 6

import del from 'del';
import gulp from 'gulp';
import browserSync from 'browser-sync';

const server = browserSync.create();

const paths = {
    styles: {
        src: 'src/styles/**/*.css',
        dest: 'dist/styles/'
    },
    html: {
        src: 'src/*.html',
        dest: 'dist/'
    }
};

export const clean = () => del(['dist']);

export function styles() {
    return gulp.src(paths.styles.src)
        .pipe(gulp.dest(paths.styles.dest))
        .pipe(server.stream());
}

export function html() {
    return gulp.src(paths.html.src)
        .pipe(gulp.dest(paths.html.dest))
        .pipe(server.stream());
}

export function watch() {
    gulp.watch(paths.styles.src, styles);
    gulp.watch(paths.html.src, html);
}

export function serve(done) {
    server.init({
        server: {
            baseDir: './dist'
        }
    });
    done();
}

export default gulp.series(clean, gulp.parallel(styles, html), serve, watch);

## package.json
{
    "name": "test",
    "babel": {
        "presets": [
            "@babel/preset-env"
        ]
    },
    "dependencies": {
        "del": "3.0.0",
        "gulp": "4.0.0",
        "browser-sync": "2.26.5",
        "@babel/core": "7.1.0",
        "@babel/register": "7.0.0",
        "@babel/preset-env": "7.1.0"
    }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>BrowserSync test</title>
	<link rel="stylesheet" href="styles/all.css">
	</head>
	<body>
	<main>
	<h1>This is a test</h1>
	</main>
	</body>
	</html>
	:root {
	--color-main: white;
	--color-background: hotpink;
	}
	html, body {
	height: 100vh;
	padding: 0;
	margin: 0;
	}
	body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	text-align: center;
	font-weight: bold;
	background: var(--color-background);
	color: var(--color-main);
	}
	main {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	}
	// jshint esversion: 6

	import del from 'del';
	import gulp from 'gulp';
	import browserSync from 'browser-sync';

	const server = browserSync.create();

	const paths = {
	styles: {
	src: 'src/styles/*/.css',
	dest: 'dist/styles/'
	},
	html: {
	src: 'src/*.html',
	dest: 'dist/'
	}
	};

	export const clean = () => del(['dist']);

	export function styles() {
	return gulp.src(paths.styles.src)
	.pipe(gulp.dest(paths.styles.dest))
	.pipe(server.stream());
	}

	export function html() {
	return gulp.src(paths.html.src)
	.pipe(gulp.dest(paths.html.dest))
	.pipe(server.stream());
	}

	export function watch() {
	gulp.watch(paths.styles.src, styles);
	gulp.watch(paths.html.src, html);
	}

	export function serve(done) {
	server.init({
	server: {
	baseDir: './dist'
	}
	});
	done();
	}

	export default gulp.series(clean, gulp.parallel(styles, html), serve, watch);
	{
	"name": "test",
	"babel": {
	"presets": [
	"@babel/preset-env"
	]
	},
	"dependencies": {
	"del": "3.0.0",
	"gulp": "4.0.0",
	"browser-sync": "2.26.5",
	"@babel/core": "7.1.0",
	"@babel/register": "7.0.0",
	"@babel/preset-env": "7.1.0"
	}
	}