: Full Disclosure This is no distaste to Webpack, In fact Webpack is my favorite Blunder for React than create-react-app. If your Using Webpack you already know the process of configuring it, here i wont delve on the process of settings up Webpack to configure your react app, Lets assume you have gone down that rabbit hole a few too many times. One of the Use Case was to produce a minified scss file after the build process that's when. After hours of reading the documentation and the process of Configuring Webpack i Stumbled upon this great comment that summaries the whole process of product release Worry not that's where our task runners come in handy. Enter your friendly task runner to automate the truly boring stuff. gulp.js What took me some where close to an hour before i prepare my release was cut down to mere minutes thanks to the automation capabilities gulp provides straight out of the box. Its Assumed you know your way around webpack and to setup a basic configuration for your react app if else worry not follow this folder structure to set it up. This should get you started, Lets look at the this contains instructions for the gulp runner to automate the process gulpfile.js var csso = require('gulp-csso'); var gulp = require('gulp'); var sass = require('gulp-sass'); var rename = require('gulp-rename'); gulp.task('styles', function () { return gulp.src('./main.scss') .pipe(sass({      outputStyle: 'nested',      precision: 10,      includePaths: ['.'],      onError: console.error.bind(console, 'Sass error:')    })) .pipe(csso()) .pipe(rename(function(path) {      path.extname = '.min.css';    })) .pipe(gulp.dest('./')) }); The Task Runner can be Broken broken to these simple steps that are run to automate the task gulp-csso package is used to parse our sass definitions witten for the react app gulp-rename is package that is used to specify any custom name that we require as the output of the automated task The first pipe command reads the contents of the files in the specified location and all the other files that are added in the definitions of those sass files The second pipe command converts to the css minified output of these files The following pipe command uses the rename function to add the contents of the minified output to the file with the .min.css extension The Last pipe command stores the minified output in the destination specified. Thus Giving us the Power of Automation and reducing the any and all errors that are prone to be injected when we perform these tasks manually. This was a Quick Preview on the Automation of  Tasks using the Gulp runner. You can find the source code and template in the repository Thanks, Happy Coding :) github

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Automate the Boring Stuff ...using Gulp.js

Too Long; Didn't Read

Company Mentioned

Puneet

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Automate the Boring Stuff ...using Gulp.js

Too Long; Didn't Read

Company Mentioned

Puneet

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES