Gulp.js Tutorial to Bundle All CSS,JS Files inside React App into a Single HTML File For Production

Welcome folks today in this blog post we will be using the gulp.js library to bundle all css and js files inside react.js app into a single html file. All the full steps are given below.

Get Started

In order to get started you need to create the new react.js app as shown below

npx create-react-app sampleapp

cd sampleapp

Now we need to install the below libraries using the npm command as shown below

npm i --save-dev gulp gulp-inline-source gulp-replace

Now you will see the below directory structure of the react.js app as shown below

Now we need to create the .env file and .gulpfile.js file as you can see in the above figure.

.env

INLINE_RUNTIME_CHUNK=false
GENERATE_SOURCEMAP=false
SKIP_PREFLIGHT_CHECK=true

INLINE_RUNTIME_CHUNK=false

GENERATE_SOURCEMAP=false

SKIP_PREFLIGHT_CHECK=true

.gulpfile.js

const gulp = require('gulp');
const inlinesource = require('gulp-inline-source');
const replace = require('gulp-replace');

gulp.task('default', () => {
  return gulp
    .src('./build/*.html')
    .pipe(replace('.js"></script>', '.js" inline></script>'))
    .pipe(replace('rel="stylesheet">', 'rel="stylesheet" inline>'))
    .pipe(
      inlinesource({
        compress: false,
        ignore: ['png'],
      })
    )
    .pipe(gulp.dest('./build'));
});

const gulp = require('gulp');

const inlinesource = require('gulp-inline-source');

const replace = require('gulp-replace');

gulp.task('default', () => {

return gulp

.src('./build/*.html')

.pipe(replace('.js"></script>', '.js" inline></script>'))

.pipe(replace('rel="stylesheet">', 'rel="stylesheet" inline>'))

.pipe(

inlinesource({

compress: false,

ignore: ['png'],

})

)

.pipe(gulp.dest('./build'));

});

Now we need to build the react.js app by executing the below command as shown below

npm run build