gulpfile.js

// of course gulp
const {src, dest, parallel, series, watch} = require('gulp');

// variables
const build       = true;                   // true para compilar e minificar os arquivos - false para não minificar e nem usar babel (performance maior), use true para compilar o projeto final
const jsBuildDir  = './assets/dist/js/';    // diretório de destino do bundle.js compilado
const cssBuildDir = './';                   // diretório de destino do style.css compilado

// css
const sass          = require('gulp-sass');
sass.compiler       = require('node-sass');
const autoprefixer  = require('autoprefixer');
const cssnano       = require('gulp-cssnano');
const rucksack      = require('rucksack-css');
const magicImporter = require('node-sass-magic-importer');
const gcmq          = require('gulp-group-css-media-queries');
const postcss       = require('gulp-postcss');

// js
const uglifyjs = require('uglify-es');
const composer = require('gulp-uglify/composer');
const minify   = composer(uglifyjs, console);
const babel    = require('gulp-babel');

// utilities
const plumber     = require('gulp-plumber');
const sourcemaps  = require('gulp-sourcemaps');
const Fiber       = require('fibers');
const merge2      = require('merge2');
const rename      = require('gulp-rename');
const concat      = require('gulp-concat');
const gulpif      = require('gulp-if');
const browserSync = require('browser-sync').create();
const smushit     = require('gulp-smushit');
const webp        = require('gulp-webp');

/**
 * Convert to webp
 */
function convertWebp() {
    return src('./assets/images/**/*.{jpg,png}')
        .pipe(webp({
            quality: 95
        }))
        .pipe(dest('./assets/images/webp/'))
}

/**
 * Optimize Images
 */
function optimizeImage() {
    return src('./assets/images/**/*.{jpg,png}')
        .pipe(smushit({
            verbose: true
        }))
        .pipe(dest('./assets/images/dist/'));
}

/**
 * jsCompiler
 * @type {string}
 */
const vendorJsPlugins = [];
const themeJsFiles    = [
    './assets/js/main.js'
];

function compileJs() {
    return merge2(
        src(themeJsFiles)
            .pipe(gulpif(build, babel({
                presets: [
                    '@babel/env'
                ]
            })))
    )
        .pipe(concat('bundle.js'))
        .pipe(dest('./assets/dist/js/'))
        .pipe(gulpif(build, minify()))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(dest(jsBuildDir))
        .pipe(browserSync.stream());
}

/**
 * sassCompiler
 * @type {string}
 */
const vendorCssPlugins       = [];
const themeSassPrincipalFile = './sass/style.scss';

function compileCss() {
    return merge2(
        src(themeSassPrincipalFile)
            .pipe(plumber())
            .pipe(sass({
                fiber   : Fiber,
                importer: magicImporter()
            })).on('error', sass.logError)
    )
        .pipe(gulpif(!build, postcss([
            rucksack()
        ])))
        .pipe(gulpif(build, postcss([
            rucksack(),
            autoprefixer({
                flexbox: true,
                grid   : true
            })
        ])))
        .pipe(gulpif(build, gcmq()))
        .pipe(gulpif(build, cssnano({
            discardComments: {
                removeAll: false
            }
        })))
        .pipe(concat('style.css'))
        .pipe(dest(cssBuildDir))
        .pipe(browserSync.stream());
}

/**
 * Sass Compiler Admin
 */
const themeSassAdminFiles = './inc/core/editor/sass/**/*.scss';

function compileCssAdmin() {
    return merge2(
        src(themeSassAdminFiles)
            .pipe(plumber())
            .pipe(sass({
                fiber   : Fiber,
                importer: magicImporter()
            })).on('error', sass.logError)
    )
        .pipe(gulpif(!build, postcss([
            rucksack()
        ])))
        .pipe(gulpif(build, postcss([
            rucksack(),
            autoprefixer({
                flexbox: true,
                grid   : true
            })
        ])))
        .pipe(gulpif(build, gcmq()))
        .pipe(gulpif(build, cssnano({
            discardComments: {
                removeAll: false
            }
        })))
        .pipe(concat('style-admin.css'))
        .pipe(dest('./inc/core/editor/assets/css/'))
        .pipe(browserSync.stream());
}


/**
 * Server
 * @returns {*|BrowserSync|Server|undefined|void}
 */
function startServer() {
    return browserSync.init({
        proxy        : 'http://wp.io/bebe/',
        // server       : './',
        notify       : false,
        open         : false,
        injectChanges: true
    });
}

// reload
function reloadServer(cb) {
    browserSync.reload();
    cb();
}

/**
 * Watch Files
 */
const themeSassFiles = './sass/**/*.scss';
const themeFiles     = [
    'assets/images/**',
    'inc/**',
    '!inc/core/editor/**',
    'page-templates/**',
    'template-parts/**',
    '*.php',
];

function watchFiles() {
    // scss files
    watch(themeSassFiles, {usePolling: true}, compileCss);

    // scss admin files
    watch(themeSassAdminFiles, {usePolling: true}, compileCssAdmin);

    // js
    watch(themeJsFiles, {usePolling: true}, compileJs);

    // html files
    watch(themeFiles, {usePolling: true}, reloadServer);
}

// Complex Task
const devTask = series(compileJs, compileCss, compileCssAdmin, parallel(startServer, watchFiles));

// tasks
exports.js          = compileJs;
exports.css         = compileCss;
exports.cssAdmin    = compileCssAdmin;
exports.startServer = startServer;
exports.images      = optimizeImage;
exports.webp        = convertWebp;
exports.dev         = devTask;

package.json

{
  "name": "BaseTheme",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "autoprefixer": "^9.7.4",
    "browser-sync": "^2.26.7",
    "fibers": "^4.0.2",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.3",
    "gulp-group-css-media-queries": "^1.2.2",
    "gulp-if": "^3.0.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-smushit": "^1.2.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2",
    "gulp-webp": "^4.0.1",
    "merge2": "^1.3.0",
    "node-sass": "^4.13.1",
    "node-sass-magic-importer": "^5.3.2",
    "rucksack-css": "^1.0.2",
    "uglify-es": "^3.3.9"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rhcarlosweb/base-theme.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/rhcarlosweb/base-theme/issues"
  },
  "homepage": "https://github.com/rhcarlosweb/base-theme#readme"
}