Home » Guides » Optimization » Wordpress Optimization Gulp Worfkflow
📌 Pin 🔗 Copy Link 📋 Copy Markdown ⬇️ Download
3 min read

Automating WordPress Development with Gulp

Manual minification is tedious and prone to error. By setting up Gulp, you can automate the process of compiling SASS, adding vendor prefixes, and minifying both CSS and JavaScript every time you save a file.

1. Prerequisites

You need Node.js and NPM installed on your local machine.

  1. Open your terminal.
  2. Navigate to your theme folder: cd wp-content/themes/my-custom-theme.
  3. Initialize a project: npm init -y.

2. Install Dependencies

Run the following command to install Gulp and the necessary plugins:

npm install --save-dev gulp gulp-sass sass gulp-clean-css gulp-uglify gulp-rename gulp-autoprefixer
  • gulp-sass: Compiles SCSS to CSS.
  • gulp-clean-css: Minifies the CSS.
  • gulp-uglify: Minifies (uglifies) JavaScript.
  • gulp-autoprefixer: Adds browser-specific prefixes (e.g., -webkit-) automatically.

3. The gulpfile.js

Create a file named gulpfile.js in the root of your theme folder. Paste the following configuration:

const { src, dest, watch, series, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const autoprefixer = require('gulp-autoprefixer');

// Paths
const paths = {
  styles: {
    src: 'src/scss/**/*.scss', // Source folder for SCSS
    dest: 'assets/css'         // Destination for compiled CSS
  },
  scripts: {
    src: 'src/js/**/*.js',     // Source folder for JS
    dest: 'assets/js'          // Destination for minified JS
  }
};

// Task: Compile SCSS, Prefix, and Minify
function styles() {
  return src(paths.styles.src)
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(cleanCSS())
    .pipe(rename({ suffix: '.min' })) // Renames style.css to style.min.css
    .pipe(dest(paths.styles.dest));
}

// Task: Minify JavaScript
function scripts() {
  return src(paths.scripts.src)
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(dest(paths.scripts.dest));
}

// Task: Watch for changes
function watchTask() {
  watch(paths.styles.src, styles);
  watch(paths.scripts.src, scripts);
}

// Default Gulp Task
exports.default = series(
  parallel(styles, scripts),
  watchTask
);

4. Running the Workflow

  1. Create your source folders: src/scss and src/js.
  2. In your terminal, run: npx gulp.
  3. Gulp is now watching. Any change you make in src will automatically generate a .min file in assets.
  4. WordPress Enqueue: Make sure your functions.php enqueues the .min.css and .min.js versions of your files.

5. Optimizing for Elementor

Elementor is a powerful builder, but it generates its own CSS files which are separate from your theme's Gulp workflow. Here is how to optimize Elementor alongside your custom Gulp setup.

A. The "Hello Elementor" Approach

If you are building a custom theme with Gulp, it is best to use the Hello Elementor theme as a parent or a lightweight starter. It provides a blank canvas, ensuring your Gulp-minified CSS handles the global styling without fighting heavy theme defaults.

B. Elementor's Internal CSS Generation

Elementor saves CSS in wp-content/uploads/elementor/css. You cannot minify these with your local Gulp workflow because they are generated on the server.

Optimization Settings (Inside WordPress):

  1. Go to Elementor > Settings > Features.
  2. Enable Optimized DOM Output (Reduces HTML bloat).
  3. Enable Improved CSS Loading (Loads CSS only when needed).
  4. Enable Inline Font Icons (Prevents loading heavy icon libraries).

C. Regenerating Files

If you update your Gulp-compiled theme CSS and Elementor looks "off," you may need to clear Elementor's cache.

  • Go to Elementor > Tools > General.
  • Click Regenerate Files & Data.

D. Custom Widget CSS

If you are writing custom CSS for specific Elementor widgets:

  • Avoid: Using the "Custom CSS" tab in the Elementor editor for large blocks of code. It is stored in the database and injected inline (slower).
  • Prefer: Writing the CSS in your local SCSS files (processed by Gulp) and targeting the Elementor classes (e.g., .elementor-widget-heading). This keeps your CSS cached and minified.
Created: March 17, 2026 • Last Modified: February 27, 2026