Bundling a React Component library to be used in non-React application - Bundling using Gulp (Part - II)

In this part-II of the series, we will bundle our standalone react components using gulp and host them 

Bundling using gulp

To get started, we will see how we can export the component which we crated earlier.

We will build and minify our react component using gulp. We will merge all of our js, css files, minify them and copy to a dist folder.

To get started with gulp, we need to install some npm packages listed below:

       

    gulp

    gulp-minify-inline

    gulp-concat

   

Install these packages using npm:

    npm install gulp gulp-minify-inline gulp-concat gulp-clean-css

Once done, create a gulpfile.js

Gulp is a task runner. As discussed earlier, we will write code in the gulpfile.js to merge(bundle), minify and copy to a dist folder each for css and js files. Import all the gulp packages we have installed earlier.

    let gulp = require("gulp");

    let concat = require("gulp-concat");

    let minifyJS = require("gulp-minify-inline");

    let minifyCSS = require("gulp-clean-css");

//optional step

gulp.task("pack-html", function () {

    return (

      gulp

        .src(["public/*.html"])

        //merge all html together

        .pipe(concat("index.html"))

        //minify html

        .pipe(minifyJS())

        //copy to dist folder

        .pipe(gulp.dest("dist/build/"))

    );

  });    

    gulp.task("pack-js", function () {

    return (

        gulp

        .src(["src/*.js", "!src/blogs.js"]) //use exclamation (!) to ignore files

        //merge all js together

        .pipe(concat("my-carousel.js"))

        //minify js

        .pipe(minifyJS())

        //copy to dist folder

        .pipe(gulp.dest("dist/build/"))

    );

    });

    gulp.task("pack-css", function () {

    return (

        gulp

        .src(["src/*.css"])

        //merge all css together

        .pipe(concat("my-carousel.css"))

        //minify css

        .pipe(minifyCSS())

        //copy to dist folder

        .pipe(gulp.dest("dist/build/"))

    );

    });

    //we are calling this task as build and

    //asking it to substantially call html, js and css sub - tasks

    gulp.task("build", gulp.series("pack-html", "pack-js", "pack-css"));

Note that we can skip any file which we dont want to me merged using exclamation (!) followed by case-sensitive file name.

Once done, as we are using gulp, go to terminal and then cd to your folder where gulpfile.js resides. Now run below command:

  $ gulp build

  [11:01:58] Starting 'build'...

  [11:01:58] Starting 'pack-html'...

  [11:01:58] Finished 'pack-html' after 87 ms

  [11:01:58] Starting 'pack-js'...

  [11:01:58] Finished 'pack-js' after 14 ms  

  [11:01:58] Starting 'pack-css'...

  [11:01:58] Finished 'pack-css' after 24 ms

  [11:01:58] Finished 'build' after 132 ms

If your build was successful, you could see a dist folder created in your root directory. Otherwise, you will see error messages in the terminal.