7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 1.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Working With JavaScript

Hello, and welcome to lesson number six, where we'll learn how to work with JavaScript files. Now it's pretty straightforward. What we want to do when we're editing the JavaScript file is of course to do browser reloading, so we'll add a target there to our watch task. And we'll also do something called, we'll use something called JSHint. And JSHint will look over our JavaScript file and tell us if there are any problems. Later on, when we'll be working with jQuery and other external libraries, we'll also use something called uglify to concatenate and minify JavaScript. But for now, let's begin with our condition here in watch. So we're going to add here code. We'll add a target here called js:, and we'll specify the files as this, paths.source_js and look for any files with the extension js. And then on tasks:, we'll leave this blank for now, because we don't have any related tasks to add. Now the only thing that we're gonna do to JavaScript right now is to use JSHint to check for potential errors. And that's because in order to test everything else, like browser reloading and concatenating and stuff, we need to use Bower to install some additional libraries. So for now, let's go ahead and focus on JSHint. Now JSHint is a plugin that will basically evaluate your JavaScript and return any kind of errors you might have. And to install it, I'm gonna say npm install grunt-contrib-jshint. And I'm also going to save it. So while it's installing, let's go ahead and load it here, JSHint. And let's go ahead and define our task here. We're gonna say dev: [COUGH] because we're only really working with this on the development side. We're gonna specify the files:, source, source_js and grab all the files from that directory, which is this one right here. So let's go ahead and create a new file called scripts.js and let's add this jshint task here on the watch task. So whenever one of these files is changed, launch in the jshint task. So now, if we start our server, And I make a change to the script.js file, let's say console.log('Hello') and I save, you'll see that the jshint:dev task was run. It says 1 file lint free. But, if for example, I leave this open, it gives me this error. It shows me where I have the error and it aborts the entire task. So that's cool. That's a nice way of checking your JavaScript files for errors. And it can save you lots of headaches later on when you're trying to figure out what went wrong. Now we're gonna install another plugin that's called the jshint-stylish. And that's gonna be used just to show this type of information in a slightly different way. It's gonna be more visually pleasing. So we're gonna exit this watch task by hitting Ctrl+C. Hit Cmd+K or the clear command to clear your console. And I'm going to say npm install jshint-stylish and also save it as a dependency. And once you do that, you go to gruntfile.js, you go to jshint: and you set some task-level options. And the option is called reporter. And you'd say require('jshint-stylish'). Okay, so now if we do the same thing and let's actually execute that task manually, grunt, jshint. You'll see that now the output looks a little bit different. It's not like a huge improvement, but personally I think it looks a bit better, so I included that plugin as well. All right, our workflow is starting to take shape. We can now work with CSS files and JavaScript files. Now, as I was saying in a previous lesson, there are a bunch of libraries out there, third-party libraries that can really augment your experience. Very helpful tools like Normalize.css, which is a reset file, or jQuery, even. Now a very simple way of working with these is with Bower, which is a package manager. And in the next lesson, you'll learn how to work with Bower and Grunt. See you there.

Back to the top