Javascript Icon Get 62% off the JavaScript Master bundle

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs

Write JavaScript like a pro. Javascript Icon

Follow the ultimate JavaScript roadmap.

Using Grunt and Chrome Workspaces for in-browser development

After some great interest in why I ditched Sublime Text 2 for the day to fully code inside Google Chrome, here’s the promised screencast on how to do it yourself.

I’m using Sass/SCSS (.scss) and JavaScript, both of which compile, concat + minify and livereload the browser, ice cool. In the video I’m using Grunt and Chrome’s Workspaces to manage all of this, enjoy!

Table of contents

Tip: if not default, change the video quality to 720p :)


Setting up Grunt

Workspaces don’t require Grunt at all, it just saves me using software and refreshing the page myself, but Grunt is very flexible and reliable and I really advocate using it. It’s a fairly simple learning curve if you’re used to structuring JavaScript/JSON. If not, it’s a very readable format that you’ll pick up quickly anyway. Workspaces is very easy to setup, but here’s how to do the Grunt bit.

First you’ll need to setup Grunt locally, which requires Node.js so make sure you’ve got that installed first. I love using SourceTree by Atlassian which has a neat ‘Terminal’ button that auto-locates your project so you don’t have to change directory yourself (that’s if you’re using Git, anyway, if not slap your wrists).

Angular Directives In-Depth eBook Cover

Free eBook

Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.

  • Green Tick Icon Observables and Async Pipe
  • Green Tick Icon Identity Checking and Performance
  • Green Tick Icon Web Components <ng-template> syntax
  • Green Tick Icon <ng-container> and Observable Composition
  • Green Tick Icon Advanced Rendering Patterns
  • Green Tick Icon Setters and Getters for Styles and Class Bindings

Now, you’ll want to do as I did in the video, and locate your project by using ‘cd’ (change directory) on the command line. Next, we need to install all project dependencies (internet connection required), which uses Node Package Manager (npm) to fetch. Once your Terminal is pointing at your project folder with your package.json and Gruntfile.js in, run the following:

npm install

This will then loop through your package.json and install all the necessary stuff. If your permissions are uptight, you’ll need to run the following instead (which you’ll need to authenticate with a password):

sudo npm install

Once that’s successfully downloaded all the dependency components, just run Grunt:


You’ll then hopefully see the following:

Running "sass:dist" (sass) task

Running "uglify:dist" (uglify) task
File "dist/js/scripts.min.js" created.

Running "connect:livereload" (connect) task
Started connect web server on localhost:9000.

Running "open:server" (open) task

Running "watch" task

That’s good news, you’re good to go. Happy coding.


One thing I didn’t mention inside the video was Sass/SCSS sourcemapping (though sourcemapping is standalone tech and not limited to Sass itself). It essentially allows you to Inspect Element, and instead of seeing style.min.css inside the developer tools, you’ll actually going to drill down into the non-compiled Sass and you’ll see something like __inputs.scss_! This is coming in the latest version of Sass but is available now on prerelease:

gem install sass --pre

Thank you for reading!

Learn JavaScript the right way.

The most complete guide to learning JavaScript ever built.
Trusted by 82,951 students.

Todd Motto

with Todd Motto

Google Developer Expert icon Google Developer Expert

Related blogs 🚀

Free eBooks:

Angular Directives In-Depth eBook Cover

JavaScript Array Methods eBook Cover

NestJS Build a RESTful CRUD API eBook Cover