Automate the Boring Stuff ...using Gulp.js

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

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 gulpfile.js this contains instructions for the gulp runner to automate the process

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

1. gulp-csso package is used to parse our sass definitions witten for the react app 

2. gulp-rename is package that is used to specify any custom name that we require as the output of the automated task

3. 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

4. The second pipe command converts to the css minified output of these files

5. The following pipe command uses the rename function to add the contents of the minified output to the file with the 

   .min.css

    extension

6. 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

github