require to import

exports are not working

gulp/modules/plumber.mjs

@@ -1,4 +1,4 @@
-const plumber = require('gulp-plumber');
+import plumber from 'gulp-plumber';
 // const notify = require('gulp-notify');
 
 // function catchErrors(errTitle) {
@@ -11,7 +11,7 @@ const plumber = require('gulp-plumber');
 //   });
 // }
 
-function catchErrors() {
+export function catchErrors() {
   return plumber({
     errorHandler: function (err) {
       // Logs error in console
@@ -20,6 +20,5 @@ function catchErrors() {
       this.emit('end');
     }
   });
-}
 
-module.exports = catchErrors;
+}

gulp/tasks/clean.js

@@ -1,9 +0,0 @@
-const config = require('../config');
-const del = require('del');
-
-// Clean output folders
-function clean() {
-  return del([config.dev + '**', config.rep + '**', config.dpl + '**']);
-}
-
-module.exports = clean;

gulp/tasks/clean.mjs

@@ -0,0 +1,8 @@
+import config from '../config.js';
+import { deleteAsync } from 'del';
+
+// Clean output folders
+export function clean() {
+  return deleteAsync([config.dev + '**', config.rep + '**', config.dpl + '**']);
+
+}

gulp/tasks/sync.mjs

@@ -1,16 +1,17 @@
-const config = require('../config');
+import config from '../config.js';
 // const browserSync = require('browser-sync'), server = browserSync.create();
-const server = require('browser-sync').create();
+import browserSync from 'browser-sync'
+const server = browserSync.create();
 
 // Automagically reload browsers
-function reload(done) {
+export function reload(done) {
   server.reload;
 
   done();
 }
 
 // Serve files to the browser
-function serve(done) {
+export function serve(done) {
   server.init({
     index: config.index,
     open: false,
@@ -19,8 +20,3 @@ function serve(done) {
 
   done();
 }
-
-module.exports = {
-  serve: serve,
-  reload: reload
-};

gulp/tasks/validate.js

@@ -1,13 +0,0 @@
-const { src } = require('gulp');
-const config = require('../config');
-const plumber = require('../modules/plumber');
-const htmlValidator = require('gulp-w3c-html-validator');
-
-function validate() {
-  return src(config.dev + '**/*.html')
-    .pipe(plumber())
-    .pipe(htmlValidator())
-    .pipe(htmlValidator.reporter());
-}
-
-module.exports = validate;

gulp/tasks/validate.mjs

@@ -0,0 +1,14 @@
+import gulp from 'gulp';
+const { src } = gulp;
+import config from '../config.js';
+import plumber from '../modules/plumber.mjs';
+import htmlValidator from 'gulp-w3c-html-validator';
+
+function validate() {
+  return src(config.dev + '**/*.html')
+    .pipe(plumber())
+    .pipe(htmlValidator())
+    .pipe(htmlValidator.reporter());
+}
+
+module.exports = validate;

gulpfile.mjs

@@ -2,43 +2,45 @@
 // const hippie = require('hippie/hippie');
 
 // Setup project
-const config = require('./gulp/config');
+import config from './gulp/config.js';
 
-const hello = require('./gulp/tasks/hello');
+import hello from './gulp/tasks/hello.js';
-const plumber = require('./gulp/modules/plumber');
+import { catchErrors } from './gulp/modules/plumber.mjs';
-const { serve, reload } = require('./gulp/tasks/sync');
+import { serve, reload } from './gulp/tasks/sync.mjs';
-const clean = require('./gulp/tasks/clean');
+import { clean } from './gulp/tasks/clean.mjs';
 // const validate = require("./gulp/tasks/validate");
 
 // Gulp requirements
-const { watch, series, parallel } = require('gulp');
+import gulp from 'gulp';
-const { src, dest } = require('gulp');
+const { watch, series, parallel, src, dest } = gulp;
 
-const fs = require('fs');
+import fs from 'node:fs';
 
-const nunjucksRender = require('gulp-nunjucks-render');
+import nunjucksRender from 'gulp-nunjucks-render';
 // const nunjucks = require('gulp-nunjucks');
-const data = require('gulp-data');
+import data from 'gulp-data';
-const jsonConcat = require('gulp-json-concat');
+import jsonConcat from 'gulp-json-concat';
-const sass = require('gulp-sass')(require('sass'));
+import dartSass from 'sass';
-const autoprefixer = require('gulp-autoprefixer');
+import gulpSass from 'gulp-sass';
-const sassLint = require('gulp-sass-lint');
+const sass = gulpSass(dartSass);
-const rename = require('gulp-rename');
+import autoprefixer from 'gulp-autoprefixer';
-const cleanCss = require('gulp-clean-css');
+import sassLint from 'gulp-sass-lint';
-const pump = require('pump');
+import rename from 'gulp-rename';
-const cached = require('gulp-cached');
+import cleanCss from 'gulp-clean-css';
+import pump from 'pump';
+import cached from 'gulp-cached';
 // const remember = require('gulp-remember');
 // const concat = require('gulp-concat');
-const uglify = require('gulp-uglify');
+import uglify from 'gulp-uglify';
-const jshint = require('gulp-jshint');
+import jshint from 'gulp-jshint';
-const gulpIf = require('gulp-if');
+import gulpIf from 'gulp-if';
-const changed = require('gulp-changed');
+import changed from 'gulp-changed';
-const merge = require('merge-stream');
+import merge from 'merge-stream';
-const spritesmith = require('gulp.spritesmith');
+import spritesmith from 'gulp.spritesmith';
 // const babel = require('gulp-babel');
 // const buffer = require('vinyl-buffer');
 // const imagemin = require('gulp-imagemin');
-const useref = require('gulp-useref');
+import useref from 'gulp-useref';
 
 // Data variables
 const input = {
@@ -86,7 +88,7 @@ if (config.demo === true) {
 // Concatenate JSON files
 function json() {
   return src(config.frontendData)
-    .pipe(plumber())
+    .pipe(catchErrors())
     .pipe(jsonConcat('db.json', function (data) {
       return new Buffer.from(JSON.stringify(data));
     }))
@@ -115,7 +117,7 @@ function getDataForTemplates() {
 // Transpile HTML
 function nunjucks() {
   return src(input.screens)
-    .pipe(plumber())
+    .pipe(catchErrors())
     // TODO only add data to pipe for necessary files
     .pipe(data(getDataForTemplates))
     .pipe(nunjucksRender({
@@ -131,7 +133,7 @@ function nunjucks() {
 // This is for the looks
 function style() {
   return src(input.style)
-    .pipe(plumber())
+    .pipe(catchErrors())
     // .pipe(sass.sync({
     .pipe(sass({
       includePaths: [input.vendor + '/**/*.s+(a|c)ss']
@@ -152,7 +154,7 @@ function styleLint() {
   }
   let file = fs.createWriteStream(config.rep + 'sass-lint.html');
   let stream = src(input.style)
-    .pipe(plumber())
+    .pipe(catchErrors())
     .pipe(sassLint({
       configFile: '.sasslintrc',
       files: {
@@ -175,7 +177,7 @@ function code(cb) {
       sourcemaps: true,
       allowEmpty: true
     }),
-    plumber(),
+    catchErrors(),
     // cache('code'),
     // babel({ presets: ['@babel/env'] }),
     // concat(config.hippie.jsFile + 'main.js'),
@@ -192,7 +194,7 @@ function code(cb) {
 // Linting
 function codeLint() {
   return src(input.code, { allowEmpty: true })
-    .pipe(plumber())
+    .pipe(catchErrors())
     .pipe(jshint())
     .pipe(jshint.reporter('jshint-stylish'))
     .pipe(jshint.reporter('fail', {
@@ -204,7 +206,7 @@ function codeLint() {
 // Fonts
 function fonts() {
   return src(input.fonts)
-    .pipe(plumber())
+    .pipe(catchErrors())
     .pipe(dest(output.fonts));
 }
 
@@ -212,13 +214,13 @@ function fonts() {
 function art() {
   // Move favicons to the root folder
   let favicons = src(input.art.favicons)
-    .pipe(plumber())
+    .pipe(catchErrors())
     .pipe(changed(output.art))
     .pipe(dest(config.dev));
 
   // Move images to the root folder
   let images = src(input.art.images)
-    .pipe(plumber())
+    .pipe(catchErrors())
     .pipe(changed(output.art))
     .pipe(dest(output.art));
 
@@ -227,7 +229,7 @@ function art() {
 // function art() {
 //   // Move favicons and images to the root folder
 //   return src(input.art.favicons)
-//     .pipe(plumber())
+//     .pipe(catchErrors())
 //     .pipe(changed(config.dev))
 //     .pipe(dest(config.dev))
 //     .pipe(src(input.art.images))
@@ -239,7 +241,7 @@ function art() {
 function sprites() {
   // Assemble sprites
   let sprites = src(input.art.sprites)
-    .pipe(plumber())
+    .pipe(catchErrors())
     .pipe(changed(output.art))
     .pipe(spritesmith({
       imgName: 'sprite.png',
@@ -262,7 +264,7 @@ function sprites() {
 // Gather dependencies for tools
 function vendor() {
   return src(input.vendor)
-    .pipe(plumber())
+    .pipe(catchErrors())
     .pipe(dest(output.vendor));
 }