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.
Tip: if not default, change the video quality to 720p :)
Setting up Grunt
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).
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:
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 Waiting...
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