How to Set Up a Task Runner with Gulp 4.0 and Webpack 5 for React 19

Modern front-end development requires efficient tooling to automate repetitive tasks, optimize assets, and streamline workflows. Combining Gulp 4.0’s task orchestration with Webpack 5’s module bundling and React 19’s component-based architecture creates a powerful, scalable development setup. This guide walks through every step of configuring this stack from scratch.

Prerequisites

Before starting, ensure you have the following installed:

• Node.js (v18.0 or later, required for React 19 and Webpack 5 compatibility)
• npm (v9.0 or later) or Yarn
• Basic familiarity with command line interfaces and React concepts

Step 1: Initialize the Project

Create a new project directory and navigate into it:

mkdir react-gulp-webpack-setup && cd react-gulp-webpack-setup

Initialize a package.json file with default settings:

npm init -y

Step 2: Install Core Dependencies

First, install React 19 and React DOM as project dependencies:

npm install react@19 react-dom@19

Next, install Webpack 5, related loaders, and Babel to transpile React and modern JavaScript:

npm install --save-dev webpack@5 webpack-cli@5 webpack-dev-server@4 babel-loader@9 @babel/core@7 @babel/preset-env@7 @babel/preset-react@7

Then install Gulp 4.0 and plugins for task running, file watching, and asset optimization:

npm install --save-dev gulp@4 gulp-babel@8 gulp-sourcemaps@3 gulp-clean@0.4 gulp-htmlmin@5 gulp-cssmin@0.2 gulp-imagemin@8

Step 3: Configure Babel

Create a babel.config.json file in the project root to define Babel presets:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Step 4: Set Up Webpack 5 Configuration

Create a webpack.config.js file in the project root with the following base configuration:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 3000,
    hot: true,
    open: true,
  },
};

Step 5: Configure Gulp 4.0 Tasks

Create a gulpfile.js in the project root to define Gulp tasks. This will handle HTML minification, CSS minification, image optimization, and triggering Webpack builds:

const gulp = require('gulp');
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
const clean = require('gulp-clean');
const htmlmin = require('gulp-htmlmin');
const cssmin = require('gulp-cssmin');
const imagemin = require('gulp-imagemin');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const webpackConfig = require('./webpack.config.js');

// Clean dist directory
gulp.task('clean', () => {
  return gulp.src('dist', { allowEmpty: true }).pipe(clean());
});

// Process HTML
gulp.task('html', () => {
  return gulp.src('src/*.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'));
});

// Process CSS
gulp.task('css', () => {
  return gulp.src('src/css/*.css')
    .pipe(sourcemaps.init())
    .pipe(cssmin())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/css'));
});

// Process images
gulp.task('images', () => {
  return gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});

// Run Webpack via Gulp
gulp.task('webpack', () => {
  return gulp.src('src/index.js')
    .pipe(webpackStream(webpackConfig, webpack))
    .pipe(gulp.dest('dist'));
});

// Watch for file changes
gulp.task('watch', () => {
  gulp.watch('src/*.html', gulp.series('html'));
  gulp.watch('src/css/*.css', gulp.series('css'));
  gulp.watch('src/images/*', gulp.series('images'));
  gulp.watch(['src/**/*.js', 'src/**/*.jsx'], gulp.series('webpack'));
});

// Default Gulp task
gulp.task('default', gulp.series(
  'clean',
  gulp.parallel('html', 'css', 'images', 'webpack'),
  'watch'
));

Note: You’ll need to install webpack-stream to integrate Webpack with Gulp: npm install --save-dev webpack-stream@7

Step 6: Create React 19 Application Files

Create a src directory with the following structure:

src/
  index.html
  index.js
  App.jsx
  css/
    styles.css
  images/

Add the following to src/index.html:

Add React 19 code to src/App.jsx:

import React from 'react';

const App = () => {
  return (

      Hello from React 19 with Gulp 4 and Webpack 5
      This setup uses automated task running for efficient development.

  );
};

export default App;

Update src/index.js to render the React app:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './css/styles.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(



);

Step 7: Add npm Scripts

Update the scripts section of package.json to add shortcuts for common tasks:

"scripts": {
  "start": "gulp",
  "build": "gulp build",
  "dev": "gulp watch"
}

To add the production build task, update gulpfile.js with a new build task that runs all processing without the watch step:

gulp.task('build', gulp.series('clean', gulp.parallel('html', 'css', 'images', 'webpack')));

Then update package.json scripts to:

"scripts": {
  "start": "gulp",
  "build": "gulp build",
  "dev": "gulp watch"
}

Step 8: Run the Setup

Start the development server with Gulp’s watch task:

npm start

Gulp will clean the dist directory, process all assets, run Webpack to bundle React code, and watch for changes. Any updates to HTML, CSS, images, or React components will trigger automatic rebuilds.

For a production build without watch, run:

npm run build

Key Benefits of This Setup

• Gulp 4.0 handles task orchestration, parallel processing, and asset optimization (HTML minification, CSS minification, image compression) out of the box.
• Webpack 5 manages module bundling, hot module replacement (HMR) for React, and transpilation via Babel, with native support for modern JavaScript features.
• React 19’s latest features (including improved server components, new hooks, and performance optimizations) work seamlessly with this toolchain.
• All tasks are automated, reducing manual work and minimizing human error in build processes.

Troubleshooting Common Issues

• Webpack HMR not working: Ensure devServer.hot: true is set in webpack.config.js, and React 19’s Fast Refresh is enabled (Babel preset-react@7.20+ supports React 19 Fast Refresh by default).
• Gulp task errors: Verify all Gulp plugins are installed correctly, and Node.js version is v18 or later.
• Babel transpilation issues: Check that @babel/preset-react is configured to target React 19, and all JSX files use .jsx extension or Babel is set to recognize .js files with JSX.

Conclusion

This setup combines the strengths of Gulp 4.0, Webpack 5, and React 19 to create a fast, automated development workflow. You can extend this further by adding TypeScript support, ESLint, Prettier, or additional Gulp plugins for tasks like font optimization or cache busting. With this foundation, you can focus on building React 19 applications instead of managing build tooling.