Gulpfile prepared for Less, Sass and JavaScript compiling in a TYPO3 provider extension.

gulpfile.js

const private = './Resources/Private/Assets/',
  public = './Resources/Public/',
  { src, dest, watch } = require('gulp'),
  sourcemaps = require('gulp-sourcemaps'),
  less = require('gulp-less'),
  sass = require('gulp-sass'),
  autoprefixer = require('gulp-autoprefixer'),
  rename = require('gulp-rename'),
  cleanCSS = require('gulp-clean-css'),
  notify = require("gulp-notify"),
  babel = require('gulp-babel'),
  uglify = require('gulp-uglify')

function cssTask() {
  return src(`${private}Css/*.css`)
    .pipe(sourcemaps.init())
    .pipe(autoprefixer())
    .pipe(cleanCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.write())
    .pipe(dest(`${public}Css/`))
    .pipe(notify("CSS finished compiling"))
}

function lessTask() {
  return src(`${private}Less/*.less`)
    .pipe(sourcemaps.init())
    .pipe(less({ strictMath: 'on' }))
    .pipe(autoprefixer())
    .pipe(cleanCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.write())
    .pipe(dest(`${public}Css/`))
    .pipe(notify("Less finished compiling"))
}

function sassTask() {
  return src([`${private}Sass/*.scss`, `${private}Sass/*.sass`])
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(cleanCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.write())
    .pipe(dest(`${public}Css/`))
    .pipe(notify("Sass finished compiling"))
}

function javaScriptTask() {
  return src(`${private}JavaScript/*.js`)
    .pipe(sourcemaps.init())
    .pipe(babel({
      presets: [
        ['@babel/env', { modules: false }]
      ]
    }))
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.write())
    .pipe(dest(`${public}JavaScript/`))
    .pipe(notify("Scripts finished compiling"))
}

function watchTask() {
  watch(`${private}Css/**/*.css`, cssTask)
  watch(`${private}Less/**/*.less`, lessTask)
  watch([`${private}Sass/**/*.scss`, `${private}Sass/**/*.sass`], sassTask)
  watch(`${private}JavaScript/**/*.js`, javaScriptTask)
}

exports.css = cssTask
exports.less = lessTask
exports.sass = sassTask
exports.javaScript = javaScriptTask
exports.watch = watchTask

package.json

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-less": "^4.0.1",
    "gulp-notify": "^3.2.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Lukas Neugebauer",
  "license": "ISC",
  "homepage": "https://lukasneugebauer.de/"
}