Example gulp settings for easy frontend development. https://romanvesely.com/easy-frontend-development/

gulpfile.js

const { src, dest, series, parallel, watch } = require("gulp");
const del = require("del");
const browserSync = require("browser-sync").create();
const nunjucks = require("gulp-nunjucks");
const less = require("gulp-less");
const concat = require("gulp-concat");
const groupCSSMediaQueries = require("gulp-group-css-media-queries");

const package = require("./package.json");
const siteName = package.name || "Template";

const paths = {
  dist: "dist",
  styles: {
    src: ["src/css"],
    dist: "dist/css"
  },
  scripts: {
    src: ["src/js/**/*.*"],
    dist: "dist/js"
  },
  files: {
    src: "src/*.html",
    dist: "dist"
  },
  images: {
    src: ["src/img/**/**.*"],
    dist: "dist/img"
  }
};

const clean = () => del([paths.dist]);

const styles = () =>
  src(paths.styles.src + "/**/*.css")
    .pipe(less())
    .pipe(groupCSSMediaQueries())
    .pipe(concat("styles.css"))
    .pipe(dest(paths.styles.dist))
    .pipe(browserSync.stream());

const scripts = () =>
  src(paths.scripts.src)
    .pipe(dest(paths.scripts.dist))
    .pipe(browserSync.stream());

const generate = () =>
  src(paths.files.src)
    .pipe(nunjucks.compile({ env: process.env.NODE_ENV, siteName }))
    .pipe(dest(paths.files.dist));

const images = () => src(paths.images.src).pipe(dest(paths.images.dist));

const reload = done => {
  browserSync.reload();
  done();
};

const watching = () => {
  browserSync.init({
    open: false,
    server: paths.dist
  });

  watch(paths.styles.src, styles);
  watch(paths.scripts.src, scripts);
  watch(paths.images.src, images);
  watch(["src/**/*.html", paths.images.src], series(generate, reload));
};

const createAll = parallel(styles, scripts, images, generate);

exports.clean = clean;
exports.generate = generate;
exports.watch = series(clean, createAll, watching);
exports.default = series(clean, createAll);