Handling errors in Gulp.js 🍺

Error handling is the most important in our projects to solve different kind of problems. In this post we will cover you how to handle error in javaScript files using jsHint and JSCS.

Installing JsHint and JSCS

May be you know little bit about gulp how is this works and some kind of stuff. Now in these session we will cover how to handle errors of javaScript using jsHint. Its time to install jshint and jscs but first we want to install gulp locally in our app. By typing this command in cmd (Command Prompt) to install gulp locally.

npm install --save-dev gulp

After installing this go to your package.json file. In this file check into the devdependency if they is installed or not. If is installed you are ready to move on the next section. If isn’t installed go to 1st section and type commands correctly in cmd.

Note: You must install Node.js and gulp installed globally -g

Step : 02 Installing and using JsHint and JSCS

Now its time to install JsHint and JSCS locally in our app to installing this just type this command in cmd something like this.

npm install --save-dev gulp-jshint

This command install gulp into your app check this in your package.json file. Now its time to install JSCS to installing this type this command in cmd.

npm install --save-dev gulp-jscs

also installing jshint-stylish.

npm install --save-dev jshint-stylish

After installing this let me show you what is jsHint and JSCS .

JsHint:

It’s a tool that help to detect a problem in javaScript files. You can use it any where in your apps to detect and help to solving problems in javaScript.

JSCS:

This is use to help to style javaScript code. It support ES2015, JSX, Flow, and more. JSCS is now available in brackets extension and you can use it anywhere by using npm packages even my friend Shahid is talking about this. This is very helpful for us specilly if you are working in large-scale projects..

Using JsHint and JSCS

create a file named gulpfile.js in this file type this code

1  var gulp = require('gulp');
2  var jshint = require('gulp-jshint');
3  var jscs = require('gulp-jscs');
4
5  //Creating task of detecting errors
6
7  gulp.task('detecterror', function(){
8          return gulp
9                 .src(['./src/**/*.js' , './*.js''])
10                 .pipe(jshint())
11                 .pipe(jscs())
12                 .pipe(jshint.reporter('jshint-stylish',{
13                      verbose:true
14                  }));
15 });

In the first three lines we require the packages of gulp, gulp-jshint, gulp-jscs and store these in a variables. In line 7 we uses gulp.task that has two parameters. In the first parameter we use task name which is detecterror and the second parameter we have a function in this function() we have 3 pipeline on line 10 , 11 and 12. The first pipe we use jshint() and execute this. On the second pipe we use jscs() (for styling javaScript) and execute this. In the last pipe we reporter of jshint for stylize javaScript. The source of all files on line 9. Now its time to run this task. Type this command to run this task.

gulp detecterror

After running this you can see the output result looks like this

You can see the output result here

Get Usama Liaquat’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

that’s it

Don’t forget to share this post.. 😍. love you developer’s 😘