I am a big fan (if you haven’t noticed in my prior posts) of optimizing my workflow. One thing I’ve never found until recently was a solid way to deal with styles and a live workflow. In comes grunt-style-injector.
The task is simple.
1 2 3 4 5 6
styleinjector: files: src: 'css/application.css' options: watchTask: false debugInfo: true
You simply type in:
1 2 3 4 5 6 7 8 9
⇒ grunt styleinjector Running "styleinjector:files" (styleinjector) task info - socket.io started All Set Up! Now copy & paste this snippet just before the closing </body> tag in your website. <script src='http://192.168.1.113:3000/socket.io/socket.io.js'></script> <script src='http://192.168.1.113:3001/style-injector-client.min.js'></script>
Put those snippets in your
index.html (or partial of choice) and make sure you don’t commit said file, and you’re good to go. Since it’s framework agnostic, you can use whatever compilation process you want, and it never falsely reloads CSS (something I found) happened all the time with