Like always, great article Chris. It finally convinced me to give Grunt a try, since every time I wanted to install it so far, I was scared by the guides. But now, after some hassles and tweaks, it runs like a charm and I’m very glad that I gave it a try. Especially LiveReload finally works properly for me. Before I have used Sublime Text’s LiveReload package, but unfortunately it is pretty buggy and crashed my editor regularly.
However I ran into a few problems, which I’d like to share here:
- If you use Compass (e.g. you use mixins like border-radius, which you really should), install grunt-contrib-compass instead of the mentioned grunt-contrib-sass. It’s basically the same with the same configuration variables.
- If you want to minify multiple JS files, use this syntax:
bc.. files: {
‘js/script.min.js’: ‘js/script.js’,
‘js/modern.min.js’: ‘js/modern.js’
}
p. – If you want to use SASS in combination with LiveReload and need style injection, which means that the CSS gets updated without a page reload, than you need to do it like described here: draftingcode.com/2013/06/subtle-live-reloading-with-grunt-and-compass
Christian Krammer
Like always, great article Chris. It finally convinced me to give Grunt a try, since every time I wanted to install it so far, I was scared by the guides. But now, after some hassles and tweaks, it runs like a charm and I’m very glad that I gave it a try. Especially LiveReload finally works properly for me. Before I have used Sublime Text’s LiveReload package, but unfortunately it is pretty buggy and crashed my editor regularly.
However I ran into a few problems, which I’d like to share here:
- If you use Compass (e.g. you use mixins like border-radius, which you really should), install grunt-contrib-compass instead of the mentioned grunt-contrib-sass. It’s basically the same with the same configuration variables.
- If you want to minify multiple JS files, use this syntax:
bc.. files: { ‘js/script.min.js’: ‘js/script.js’, ‘js/modern.min.js’: ‘js/modern.js’ }
p. – If you want to use SASS in combination with LiveReload and need style injection, which means that the CSS gets updated without a page reload, than you need to do it like described here: draftingcode.com/2013/06/subtle-live-reloading-with-grunt-and-compass
Hope that helps.