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!