Exemplo de arquivo gulpfile

gulpfile.js

'use strict';

// Dependencies
const { gulp, series, parallel, src, dest, watch } = require('gulp');
const concat = require('gulp-concat');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const shortColor = require('postcss-short-color');
const cleanCSS = require('gulp-clean-css');
const rollup = require('gulp-rollup');

// Folders
const npm = 'node_modules';
const dist = 'assets';

// Vendors
const vendors = {
  css: [
    `${npm}/normalize.css/normalize.css`,
    `${npm}/slick-carousel/slick/slick.css`,
    `${npm}/@fancyapps/fancybox/dist/jquery.fancybox.min.css`,
    `${npm}/aos/dist/aos.css`,
    `${npm}/plyr/dist/plyr.css`,
  ],
  js: [
    `${npm}/jquery/dist/jquery.min.js`,
    `${npm}/slick-carousel/slick/slick.min.js`,
    `${npm}/@fancyapps/fancybox/dist/jquery.fancybox.min.js`,
    `${npm}/jquery-mask-plugin/dist/jquery.mask.min.js`,
    `${npm}/aos/dist/aos.js`,
    `${npm}/plyr/dist/plyr.min.js`,
  ],
};

function vendorCSS(cb) {
  return src(vendors.css)
    .pipe(concat('vendor.css'))
    .pipe(cleanCSS())
    .pipe(dest(`${dist}/css`));
  cb();
}

function vendorJS(cb) {
  return src(vendors.js)
    .pipe(concat('vendor.js'))
    .pipe(dest(`${dist}/js`));
  cb();
}

// Assets
const assets = {
  scss: 'src/scss/*.scss',
  js: 'src/js/main.js',
};

function css(cb) {
  return src(assets.scss)
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(cleanCSS())
    .pipe(postcss([precss, autoprefixer(), shortColor]))
    .pipe(dest(`${dist}/css`));
  cb();
}

const js = (cb) => {
  src(assets.js, {
    sourcemaps: false,
  })
    .pipe(
      rollup({
        input: assets.js,
        allowRealFiles: true,
        plugins: [
          babel({
            presets: ['@babel/env'],
          }),
        ],
        output: {
          name: 'testing',
          format: 'umd',
        },
      })
    )
    .pipe(babel())
    .pipe(
      uglify({
        mangle: true,
        compress: true,
      })
    )
    .pipe(dest(`${dist}/js`));
  cb();
};

// Watch
exports.watch = (cb) => {
  watch('src/scss/**/*.scss', css);
  watch('src/js/**/*.js', js);
  cb();
};

exports.js = js;
exports.vendorJS = vendorJS;
exports.vendorCSS = vendorCSS;
exports.vendors = parallel(vendorCSS, vendorJS);
exports.css = css;
exports.default = parallel(vendorCSS, vendorJS, css, js);