Apple conveniently let’s users add any site to their home screen as a standalone web application that acts much like a native application.
But there’s one problem – by default all links open in Safari rather than in the web application. Very annoying.
I found a few bits of code out there to workaround this issue, the best of which came from Stanislav Kostadinov. Since we use mostly CoffeeScript, here’s a CS version:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
UPDATE: There was a small bug with watching Sass files which is now fixed. The fix removed the ability to use .sass and now only .scss will be processed. You can of course edit the code and switch to .sass but it doesn’t allow you to watch them both at once. The majority of folks use .scss so I doubt this will be an issue.
Today I needed a simple Gruntfile for compiling Sass and CoffeeScript files. My requirements were pretty basic:
use CoffeeScript for the Gruntfile
compile *.coffee into *.js
compile *.sass and *.scss into *.css
allow for sub-directories
maintain the directory structure
provide commands to simply compile once or watch for changes
Now there’s a ton of articles out there about doing this but many fall short with a combination of being out-dated, using JavaScript for the Gruntfile, hard-coding file paths, not preserving directory structure, etc. So here’s a very simple working configuration to get you up and running fast.
First, I’m assuming you’ve got Node installed along with Ruby and RubyGems.
Second, I’m also assuming you have a directory structure that looks like this:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
You can easily change it around by editing the cwd, src, and dest properties of the Gruntfile. But I suggest running it as-is at first to ensure you’ve got things working in the first place.
Copy the following two files (Gruntfile.coffee and package.json) and drop them into the root of your project.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
With those in place, you’re almost ready to go. Just run the following couple of commands and you should be up and running.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Make sure to check out the complete list of options for the Grunt Sass plugin and the Grunt CoffeeScript plugin as you can easily tweak the Gruntfile to suite your needs.