Gulpfile for web

gulpfile.js

// Import important packages

const gulp = require('gulp');

const plumber = require('gulp-plumber');

const rename = require('gulp-rename');

const browserSync = require('browser-sync').create();

const sourcemaps = require('gulp-sourcemaps');

const del = require('del');

// SCSS -> CSS

const sass = require('gulp-sass');

sass.compiler = require('sass');

const postcss = require('gulp-postcss');

const autoprefixer = require('autoprefixer');

const cssnano = require('cssnano');

const tildeImporter = require('node-sass-import');

// HTML

const htmlmin = require('gulp-htmlmin');

const fileinclude = require('gulp-file-include');

// JS

const buffer = require('vinyl-buffer');

const { createGulpEsbuild } = require('gulp-esbuild');

const gulpEsbuild = createGulpEsbuild({ incremental: true });

// ASSETS

const webp = require('gulp-webp');

// Define important variables

const src = './src';

const dest = './docs';

// Reload the browser

const reload = (done) => {

  browserSync.reload();

  done();

};

// Serve the dev-server in the browser

const serve = (done) => {

  browserSync.init({

    server: {

      baseDir: `${dest}`,

    },

    browser: 'firefox',

  });

  done();

};

// Compile SASS to CSS

const css = () => {

  // Find SASS

  return gulp

    .src(`${src}/scss/**/*.scss`)

    .pipe(plumber())

    .pipe(sourcemaps.init())

    .pipe(

      sass({

        outputStyle: 'compressed',

        includePaths: ['./node_modules'],

      })

    )

    .on('error', sass.logError)

    .pipe(rename({ basename: 'style', suffix: '.min' }))

    .pipe(postcss([autoprefixer(), cssnano()]))

    .pipe(sourcemaps.write(''))

    .pipe(gulp.dest(`${dest}/css`))

    .pipe(browserSync.stream());

};

// Compile .js to minified .js

const script = () => {

  return gulp

    .src(`${src}/js/main.js`)

    .pipe(

      gulpEsbuild({

        outfile: 'main.bundle.js',

        bundle: true,

        minify: true,

        sourcemap: true,

        platform: 'browser',

      })

    )

    .pipe(buffer())

    .pipe(gulp.dest(`${dest}/js`));

};

// Insert html components and compile .html to minified .html

const html = () => {

  // Find HTML

  return (

    gulp

      .src(`${src}/*.html`)

      // Init Plumber

      .pipe(plumber())

      // Insert components

      .pipe(fileinclude({ prefix: '@@', basepath: '@file' }))

      // Compile HTML to minified HTML

      .pipe(

        htmlmin({

          collapseWhitespace: true,

          removeComments: true,

          html5: true,

          removeEmptyAttributes: true,

          removeTagWhitespace: true,

          sortAttributes: true,

          sortClassName: true,

        })

      )

      // Write everything to destination folder

      .pipe(gulp.dest(`${dest}`))

  );

};

// Minify and copy images to destination

const images = () => {

  return gulp

    .src(`${src}/img/**/*`)

    .pipe(webp())

    .pipe(gulp.dest(`${dest}/img`));

};

// Copy assets

const assets = () => {

  return gulp

    .src(

      [

        `${src}/**/*`,

        `!${src}/includes/**/*`,

        `!${src}/includes`,

        `!${src}/js/**/*`,

        `!${src}/js`,

        `!${src}/scss/**/*`,

        `!${src}/scss`,

        `!${src}/*.html`,

      ],

      {

        base: src,

      }

    )

    .pipe(gulp.dest(`${dest}`));

};

// Delete old files to create a fully new build

const clear = () => {

  return del(`${dest}/**`);

};

// Watch changes and refresh page

const watch = () =>

  gulp.watch(

    [

      `${src}/**/*.html`,

      `${src}/js/**/*.js`,

      `${src}/scss/**/*.scss`,

      `${src}/**/*`,

    ],

    gulp.series(html, css, script, reload)

  );

// Development tasks

const dev = gulp.series(css, html, serve, watch, script, assets, images);

// Build tasks

const build = gulp.series(clear, css, html, images, assets, script);

// Default function (used when type "gulp")

exports.default = dev;

exports.dev = dev;

exports.build = build;

package.json for this:

{
  "scripts": {
    "dev": "gulp dev",
    "build": "gulp build"
  },
  "devDependencies": {
    "autoprefixer": "^10.2.6",
    "browser-sync": "^2.26.14",
    "cssnano": "^5.0.6",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-esbuild": "^0.8.2",
    "gulp-file-include": "^2.3.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^9.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-webp": "^4.0.1",
    "node-sass-import": "^2.0.1",
    "node-sass-tilde-importer": "^1.0.2",
    "sass": "^1.35.1",
    "vinyl-buffer": "^1.0.1"
  },
  "dependencies": {
    "leaflet": "^1.7.1"
  }
}