Automatic JavaScript Error checking
with GulpJS
 

#4

 

Frontend Workflow

 
By Raymon Schouwenaar
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#4

 
After this video, you know how to use Gulp to...
  • Check your JavaScript for mistakes
 

Frontend Workflow

 
By Raymon Schouwenaar
 
Before we start check
  1. Check if you installed NodeJS, NPM and GulpJS
  2. Check if you have created an package.json file
If not check episode #1 of the Frontend Workflow.
 

#4

 

Frontend Workflow

 
By Raymon Schouwenaar
 
Check your JavaScript for mistakes
 

#4

 

Frontend Workflow

 
By Raymon Schouwenaar
 
Make sure you installed these packages locally
 
  • Gulp
  • Browser-sync
 
$ npm install gulp browser-sync jshint gulp-jshint --save-dev
Run this command in your terminal
 

#4

 
  • JShint
  • Gulp-jshint
 

Frontend Workflow

 
By Raymon Schouwenaar
 
Let's creat our Gulpfile.js
 
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var jshint = require('gulp-jshint');

gulp.task('js', function() {
    gulp.src('src/javascript/app.js')
        .pipe(jshint())
    	.pipe(jshint.reporter('default'))
        .pipe(gulp.dest('dist/resoure/javascript'))
        .pipe(browserSync.stream());
});

gulp.task('serve', function() {
    browserSync.init({
        server: "./"
    });
});

gulp.task('default', ['serve', 'js'], function () {
    gulp.watch('src/javascript/*.js', ['js']);
    gulp.watch('./index.html').on('change', browserSync.reload);
});

#4

 

Frontend Workflow

 
By Raymon Schouwenaar
 
Let's creat a JavaScript file "app.js" in src/javascript directory
 
console.log('Test');

#4

 

Frontend Workflow

 
By Raymon Schouwenaar
 
Run this command
 
$ gulp
Run this command in your terminal
 
This should run the localhost server and is checking your JavaScript file for error's
 

#4

 

Frontend Workflow

 
By Raymon Schouwenaar
 
Let's create an error!
 

#4

 

Frontend Workflow

 
By Raymon Schouwenaar
 
Let's creat an error in the app.js while the Gulp is running
 
console.log('Test');
wrongVar;

#4

 

Frontend Workflow

 
By Raymon Schouwenaar
 
Read this carefully, it tells a lot!
 
src/javascript/app.js: line 2, col 1, 
    Expected an assignment or function call and instead saw an expression.

1 error

events.js:154
      throw er; // Unhandled 'error' event
      ^
Error: JSHint failed for: src/javascript/app.js

#4

 
- The error is in app.js, on line 2, column 1.
- It expected an assignment (var varName = 'test').
- Or it expected a function.
- But it saw an expression.
 

Frontend Workflow

 
By Raymon Schouwenaar
 
JShint is gonna help you
 

#4

 
- Find error's!
- Find the place of the error's.
- Debug faster.
- Tell you why your code is wrong.
- Write better JavaScript.
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#4

 
Let's fix the error!
 
console.log('Test');
// wrongVar;
var goodVar = 'test';

Frontend Workflow

 
By Raymon Schouwenaar
 

#4

 
Run this command
 
$ gulp
Run this command in your terminal
 
This should run the localhost server and is checking your JavaScript file error's again, but the error is now fixed!
 
By Raymon Schouwenaar
 
Thanks for watching the video and Good luck!
 
Made with Slides.com